Visualizzazione dei risultati da 1 a 6 su 6

Discussione: Fade in/out

  1. #1

    Fade in/out

    Ciao a tutti, ho realizzato una semplice gallery in JQuery visualizzabile qui http://www.fiumicinocomune.com/prova...a_gallery.html

    Il codice della pagina è questo

    codice:
    <html> 
    <head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Prova Gallery</title> 
    
    <link href="css/stile_gallery.css" rel="stylesheet" type="text/css" />
     </script>
     </head>
     <div id="gallery"> <div id="panel"> 
    [img]images/image_01_large.jpg[/img]
    </div>
     <div id="thumbs"> 
    [img]images/image_01_thumb.jpg[/img] 
    [img]images/image_02_thumb.jpg[/img]
    [img]images/image_03_thumb.jpg[/img]
     </div> </div> 
    <script> 
    $('#thumbs').delegate('img','click', function(){ $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); $('#description').html($(this).attr('alt')); });
     </script> 
    </body> 
    </html>
    e il Css associato questo

    #thumbs { padding-top: 10px; overflow: hidden; }
    #thumbs img, #largeImage {
    border: 0px solid gray;
    padding: 0px;
    background-color: white;
    cursor: pointer;
    }
    #thumbs img {
    float: left;
    margin-right: 0px;
    }

    Quello che vorrei fare è semplice: fare in modo che sul click ci sia un effetto fade. Come faccio per inserirlo nel codice?

    Vorrei anche dare un rollover ai bottoni, sostituendoli con una immagine diversa.

    Grazie in anticipo

  2. #2
    aiutino?

  3. #3
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Prova cosi:
    codice:
    $('#thumbs').delegate('img','click', function(){ $('#largeImage').fadeOut(300).delay(1000).fadeIn(300).attr('src',$(this).attr('src').replace('thumb','large')); $('#description').html($(this).attr('alt')); });
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  4. #4

  5. #5
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    codice:
    $('#thumbs').delegate('img','click', function(){ $('#panel img').fadeOut(300, function(){setTimeout(function(){$(this).fadeIn(300)},1000)}).attr('src',$(this).attr('src').replace('thumb','large')); 
    $('#description').html($(this).attr('alt')); });
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  6. #6
    niente...mi piacerebbe sapere perché non funziona...alla fine quello che devo fare è molto semplice, il problema è che il cliente ha esigenze di design.

    Devo fare una gallery in html5 con la dissolvenza, statica (cioè senza script di avvio automatico e timer), e con i bottoncini sotto, che abbiano un rollover di swap image.
    Sembrava tutto facile all'inizio ma non riesco a combinare le funzioni "onclick" dei pulsanti con la dissolvenza e non riesco a dare il rollover di swap image ai bottoni.

    Salvatemi la vita !

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.