Espandere un'immagine

G

Ghizza

Nuovo Utente
31 Ott 2007
6
0
0
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

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
26
Roma
alessandro1997.netsons.org
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"
    });
});
 
G

Ghizza

Nuovo Utente
31 Ott 2007
6
0
0
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.
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
I espandere un campo(testo) di una tabella Javascript 0
M Espandere e comprimere testo con javascript e CSS tramite un link Javascript 1
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
gara1 inserire immagine di sfondo in canvas Javascript 0
T Dividere un'immagine in 3 parti orizzontali e salvarle separatamente Photoshop 2
W Immagine come maschera photoshop Photoshop 1
L Ultima immagine Windows e Software 0
A Immagine decentrata con sfondo trasparente Photoshop 0
A Scontornare immagine di bassa qualità. Photoshop 2
B Selezionare un'immagine e salvare la selezione Photoshop 3
F Immagine come fosse selezione attiva Photoshop 1
Y Percorso assoluto file immagine HTML e CSS 9
K Come posso usare un'immagine al posto di un bottone? HTML e CSS 2
M Upload immagine con javascript problemi con FormData() Javascript 1
M Visulizzare immagine con php PHP 8
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 7
L Come caricare un'immagine in Canvas dinamicamente Javascript 0
R Cambiare il nome dell'immagine dopo caricamento ftp HTML e CSS 0
L salvare una immagine elaborata in canvas Javascript 1
L salvare una immagine elaborata in canvas Javascript 1
Y Come caricare e visualizzare un'immagine PHP 0
S Testo scrolla su immagine che cambia HTML e CSS 0
M Quando ha l'immagine ingrandita è possibile fare rotazione per ritagliare? Photoshop 0
R Caricamento immagine su cartella remota + mysql PHP 3
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
L Upload di un'immagine all'interno di un database usando php PHP 6
G Modifica immagine di sfondo attraverso un bottone PHP 18
F photoshop portable : spostamento immagine Photoshop 0
A Server Apache immagine not found (ERROR 404) Apache 5
P [Photoshop] ritagliare una immagine Photoshop 1
S [PHP] Recupero nome immagine da Form con input file PHP 3
D [Javascript] salvare immagine canvas - paypal Javascript 0
D [HTML] Inviare un link contenente un' immagine HTML e CSS 4
M [PHP] Cercare l'ultima immagine caricata in una cartella datata PHP 15
C [Photoshop] bordi tondi come posso fare per ottenerli come nell'immagine allegata Photoshop 2
M [HTML] Tasto condivisione social e immagine HTML e CSS 2
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
A Php variabile immagine inesistente PHP 4
R [PHP] Testo su immagine al passaggio del mouse PHP 2
L [PHP] controllo dimensione immagine per il resize PHP 2
felino [Wordpress] Immagine di sfondo (sotto il template) WordPress 8
Shyson [HTML] Sovrapporre un'immagine su un'altra HTML e CSS 2
A [PHP] Segnalazione in up-load immagine PHP 2
C [PHP] Scrivere testo su immagine PHP 3
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A [WordPress] Link multiplo su immagine WordPress 9
I [Photoshop] Come realizzare immagine tonalità di grigio Photoshop 0
edittaruocco [Photoshop] Immagine in editor grafico Photoshop 0

Discussioni simili

Alto Basso