+ Rispondi al Thread
Visualizzazione dei risultati da 1 a 2 su 2

Discussione: Modificare ImageUrl dopo click su immagine

  1. #1
    Nottambulo non è in linea Scolaretto
    Luogo
    Campione d'Italia
    Post
    322

    Modificare ImageUrl dopo click su immagine

    Ho creato una galleria immagini utilizzando Fancybox, seguendo un esempio da un sito:

    codice:
    <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script> 
    <script src="Scripts/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery.serialScroll-1.2.2-min.js" type="text/javascript"></script>
    codice:
    <link href="jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    	img{border:none;} 
    	#scroll{width:486px; height:90px; overflow:hidden; background-color:#FFF; float:left;} 
    	#scroll ul {margin:0; padding:0; width: 5000px;} 
    	#scroll ul li {list-style: none; float: left; border:solid 1px #ccc; margin-right:10px;} 
    </style>
    codice:
    <div style="float:left;"><a href="#"><img class="prev" src="Images/fancy_nav_left.png" alt="indietro" /></a></div> 
    <div id="scroll"> 
    	<ul>
    		<asp:Repeater ID="rptImmagini" runat="server" DataSourceId="sdsImmagini"> 
    			<ItemTemplate> 
    				<li> 
    					<a rel="example_group" <%# Eval("Immagine","href=""images/{0}""") %> > 
    					<asp:image runat="server" ID="hlImmagine" 
    					ImageUrl='<%# Eval("Immagine","images/{0}") %>' 
    					AlternateText='<%# Eval("Titolo") %>' 
    					ToolTip='<%# Eval("Titolo") %>' 
    					width="100px" height="75px"/> 
    					</a> 
    				</li> 
    			</ItemTemplate> 
    		</asp:Repeater> 
    	</ul> 
    </div> 
    <div style="float:left;"><a href="#"><img class="next" src="Images/fancy_nav_right.png
    codice:
    $(function () {
    	//applico la possibilità di muoversi
    	//all'interno dello slideshow
    	$('#scroll').serialScroll({
    		items: 'li',
    		prev: 'img.prev',
    		next: 'img.next',
    		start: 0,
    		step: 4,
    		duration: 600,
    		force: true,
    		stop: true,
    		lock: false,
    		cycle: false,
    		easing: 'easeOutExpo'
    	});
    
    	//applico la fancybox agli elementi della galleria
    	$("a[rel=example_group]").fancybox({
    		'transitionIn': 'easeOutExpo',
    		'transitionOut': 'none'
    	});
    });
    E fino a qui nessun problema, copiare è facile!!!
    Ora vorrei che quando clicco su un'immagine della galleria, mi visualizza l'immagine in un controllo Image e non a tutto schermo come fa l'esempio. Per far questo ho provato a eliminare la parte delle funzioni

    codice:
    	//applico la fancybox agli elementi della galleria
    	$("a[rel=example_group]").fancybox({
    		'transitionIn': 'easeOutExpo',
    		'transitionOut': 'none'
    	});
    e a sostituirla con:

    codice:
    $(document).ready(function() {
      $('#hlImmagine').click(function() {
       $('#img_grande').attr('ImageUrl', this.ImageUrl);
      });
    });
    Purtroppo non funziona e nemmeno i 200 tentativi seguenti. Come posso fare?

    Grazie, ciao.

  2. #2
    Nottambulo non è in linea Scolaretto
    Luogo
    Campione d'Italia
    Post
    322
    Ho trovato il problema, il codice giusto è il seguente:

    codice:
      <script type="text/javascript">
            $(document).ready(function () {
                $('.h1Immagine').click(function () {
                    $('.ImgGrande').attr('src', this.src);
                    event.preventDefault();
                });
            });
          </script>
    Purtroppo non funziona con iexplorer, con chrome va perfettamente.
    Come posso farlo funzionare su entrambi i browser?

    Grazie, ciao

+ Rispondi al Thread

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi