Espandere un'immagine

Ghizza · 2012-08-05T22:07:29+0200

Buongiorno a tutti,
sto cercando uno script jQuery che espanda (*non* zoomi) un'immagine all'interno di una pagina.
L'esempio più simile a quello che vorrei è qui:

http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm

MA... voglio usare *due* immagini: una thumbnail e un'immagine grande, esattamente come fanno le lightbox tipo Fancybox, ecc.
Non voglio un resize.
Cioè, nella pagina si caricano le thumbnails, e quando si clicca su una di esse l'immagine grande si carica, si apre (magari con un effetto graduale) e resta aperta, facendo scorrere il resto del contenuto in basso.

Grazie in anticipo.

criric · 2012-08-05T23:12:46+0200

Ciao,
eccoti un semplice esempio del metodo animate di Jquery:
ovviamente è da testare migliorare ed adattare alle tue esigenze ma puo essere un buon punto di partenza

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>thumb</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <img class="thumb" src="img/thumb-1.bmp" alt="-1"/>
        <img class="thumb" src="img/thumb-2.bmp" alt="-2"/>
        <img class="thumb" src="img/thumb-3.bmp" alt="-3"/>
        <div id="big"></div>
        <script>
            $(".thumb").each(function() {
                $(this).click(function() {                    
                    var big = $(this).attr('alt');
                    $("#big").html("<img class='big' src='img/big" + big + ".bmp' alt='" + big + "'/>");
                    $("#big img").animate({
                        height:"300px",
                        width:"350px"
                    });
                })
            })
        </script>
    </body>
</html>

non ho commentato viste le poche righe di codice , se hai bisogno chiedi pure

alessandro1997 · 2012-08-07T09:29:44+0200

Se non esegui altre operazioni al di fuori del binding dell'evento allora il codice può essere semplificato così:

Codice:

$(".thumb").click(function() {               
    var big = $(this).attr('alt');
    $("#big").html('<img class="big" src="img/big' + big + '.bmp" alt="' + big + '" />");
    $("#big img").animate({
        height: "300px",
        width: "350px"
    });
});

Ghizza · 2012-08-07T23:05:59+0200

Ti ringrazio molto, ho comunque deciso di inserire direttamente solo le immagini "piene" nella pagina, per essere certo che il lettore le osservi bene.
Non posso permettere che qualcuno non clicchi sulle thumbnail, pazienza, la pagina è più pesante ma va bene così.
Grazie di nuovo.

Cerca

Cerca

Espandere un'immagine

Ghizza

Nuovo Utente

criric

Super Moderatore

alessandro1997

Utente Attivo

Ghizza

Nuovo Utente

Discussioni simili