fade in e out di 2 div ckiccando su miniature

gandalf1959

gandalf1959

Utente Attivo
21 Nov 2013
208
1
18
Buongiorno a tutti.
Ho un problema da risokvere e non so da dove partire...
Ok, non sono cosi' esperto con js e jQuery, ma di solito me la cavo.
Ecco il problema struttura.jpg
Guardando l'immagine allegata: ho tre miniature in basso (2,3 e 4), un'immagine grande in alto e un testo corrispondente all'immagine grande. Cliccando su 2 (per esempio) 2 diventa grande al posto di 1 e testo1 diventa testo2, 1 diventa piccola e si affianca al posto di 4, mentre 3 e 4 scorrono verso sinistra.
Il tutto con eleganti effetti di fade in e out e scorrimenti fluidi...
Da dove comincio?
AIUTO!!!
Grazie
 
Ciao benvenuto
Da dove comincio?
Clicca per allargare...
crea l'html i div contenitori assegna loro un id formattali con i css e includi la libreria jquery
 
ok, quello e' gia fatto...
il problema riguarda soprattutto lo scorrimento/sostituzione delle miniature.
Per un semplice fade in e out dei div so gia' come fare...
E comunque integrare tutto...
 
non è molto complicato, dipende tutto da come hai strutturato l'html
la funzione potrebbe essere più o meno cosi
Codice: 
<script>
    $("#miniature img").click(function(){
        $("#miniature img").show();
        $(this).fadeOut();
        $("#immagine").attr("src",$(this).attr("src"));
    })
</script>
servirebbe sapere anche dove hai il testo da associare all'immagine
se posti l'html essenziale si può fare qualche prova
 
criric ha scritto:
non è molto complicato, dipende tutto da come hai strutturato l'html
la funzione potrebbe essere più o meno cosi
Codice: 
<script>
    $("#miniature img").click(function(){
        $("#miniature img").show();
        $(this).fadeOut();
        $("#immagine").attr("src",$(this).attr("src"));
    })
</script>
servirebbe sapere anche dove hai il testo da associare all'immagine
se posti l'html essenziale si può fare qualche prova
Clicca per allargare...

Intanto grazie.
Ora sto uscendo ma postero' il tutto prima di sera. Al momento ho preparato i diversi div con display:none pronti per il semplice $('nomeDiv').fadeOut e .fadeIn.
Quindi tutti i testi relativi alle diverse immagini sono in div a parte contenente html con link e altro.
Cioe' a div id ="immagine1" corrisponde un div con id="testo1".
Il tutto gia' con misure e posizioni relative (il tutto e' in div contenitore) corrette impostate naturalmente con CSS.
A piu' tardi
 
Nel frattempo visto che la cosa mi intrigava ho preparato una bozza online
HTML: 
<html>
    <head>
        <style>
            html {
                margin:0;padding:0;
                text-align: center;
            }
            #contenitore,#miniature {
                margin: auto;
                width: 756px;
                overflow: hidden;
                border:1px solid black;
            }
            #immagine, #immagine img, #testo {
                float:left;
                width: 378px;
            }
            #immagine img {
                margin:2px;                
            }
            #miniature{
                border-top: none;
            }
            #miniature img {
                float: left;
                width: 120px;
                margin:2px;
                border:1px solid black;
                cursor:pointer;
            }
            #testo p {
                font-size: 2.0em;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function(){
                $("#miniature img").first("img").hide();
                $("#testo p").not(":first").hide();
                $("#miniature img").click(function(){
                    var img = $(this).attr("src");
                    var alt = $(this).attr("alt")
                    $("#miniature img").show();
                    $(this).hide();
                    $("#immagine img").fadeOut(500,function(){
                        $(this).attr("src",img);
                        $(this).fadeIn(500,function(){
                            $("#testo p").hide();
                            $("#" + alt).fadeIn();                            
                        });                        
                    });                  
                });
            });
        </script>
    </head>
    <body>
        <div id="contenitore">
            <div id="immagine">
                <img src="img/07.jpg" alt="img 1"/>
            </div>
            <div id="testo">
                <p id="img1">Monica bellucci </p>
                <p id="img2">Hugo Weaving </p>
                <p id="img3">Jada Pinkett Smith </p>
                <p id="img4">Keanu reeves </p>
                <p id="img5">Laurence Fishburne </p>
                <p id="img6">Carrie-Anne moss </p>
                <p id="img7">Adrian e neil Rayment </p>
            </div>
        </div>
        <div id="miniature">
            <img src="img/07.jpg" alt="img1"/>
            <img src="img/08.jpg" alt="img2"/>
            <img src="img/09.jpg" alt="img3"/>
            <img src="img/10.jpg" alt="img4"/>
            <img src="img/11.jpg" alt="img5"/>
            <img src="img/12.jpg" alt="img6"/>
            <img src="img/13.jpg" alt="img7"/>
        </div>
    </body>
</html>
 
Rieccomi...
prima di risolvere il problema oggetto della discussione, mi imbatto in un altro problemino - probabilmente semplice da risolvere).
La pagina (www.mauriziogerosa.it/rcs/kvnordic) contiene una serie di div uno sotto l'altro che rappresentano le pagine del minisito. All'interno dei diversi div ci sono dei bottoni - in basso, se andate a dare un'occhiata - premendo i quali dovrei far scomparire con un fade il div visualizzato e sostituirlo con il div (la pagina) richiesta.
Con la funzione che segue la cosa non funziona...

$(document).ready(function() {

$("#b_idee").click(function(){
$("#homepage").fadeOut("fast");
$("#bloggers").fadeOut("fast");
$("#salmone").fadeIn("slow");
});

$("#b_acena").click(function(){
$("#homepage").fadeOut("fast");
$("#salmone").fadeOut("fast");
$("#salmoneInvoltini").fadeOut("fast");
$("#bloggers").fadeIn("slow");
});

$("#b_home").click(function(){
$("#bloggers").fadeOut("fast");
$("#salmone").fadeOut("fast");
$("#salmoneInvoltini").fadeOut("fast");
$("#homepage").fadeIn("slow");
});

});

Come si risolve?
Grazie...

p.s.
L'animazione che inizia questa discussione serve sul div salmone...
 
criric ha scritto:
non è molto complicato, dipende tutto da come hai strutturato l'html
la funzione potrebbe essere più o meno cosi
Codice: 
<script>
    $("#miniature img").click(function(){
        $("#miniature img").show();
        $(this).fadeOut();
        $("#immagine").attr("src",$(this).attr("src"));
    })
</script>
servirebbe sapere anche dove hai il testo da associare all'immagine
se posti l'html essenziale si può fare qualche prova
Clicca per allargare...

puoi andare a guardare qui: (www.)mauriziogerosa.it / rcs / kvnordic
 
I primi due errori della pagina sono
"NetworkError: 404 Not Found - http://code.jquery.com/jquery-1.8.16.min.js"
ReferenceError: $ is not defined
Clicca per allargare...
vuol dire che non richiami la libreria jquery nel modo corretto di conseguenza qualsiasi script jquery non funziona
 
si infatti ho gia' cambiato quella parte di codice. Ho anche trovato la soluzione alla navigazione tra i div, utilizzando scrollTop,
Possiamo tornare a concentrarci sull'animazione iniziale.
Il primo "tentativo" si avvicina, ma...
Intanto descrivo, che serve anche ame per chiarirmi le idee... quindi:
le immagini sono un numero fisso, 4, e bisogna che l'immagine grande quando si rimpicciolisce si posizioni all'estrema destra facendo scorrere le due rimanenti miniature verso sinistra mentre la miniatura cliccata sparisce dalle miniature e "diventa grande". Quindi, facendo riferimento al jpeg iniziale: se clicco su 2, 1 diventa una miniatura a destra di 4 mentre 2 sparisce e "diventa" grande sostituendo 1. Se clicco 4 diventa simile a quanto provato da criric...
Vediamo se si riesce...
Grazie per ogni supporto
 
gandalf1959 ha scritto:
Ho anche trovato la soluzione alla navigazione tra i div, utilizzando scrollTop,
Clicca per allargare...

in realta' adesso si naviga tra i diversi div con i fade che volevo...
Sono proprio a piedi con l'animazione... non mi viene... e per stasera sono stanco.
magari domani ci riguardo.

Comunque grazie criric e se a te o a qualcuno viene in mente come risolvere...

A presto e buona serata
 
criric ha scritto:
Nel frattempo visto che la cosa mi intrigava ho preparato una bozza online
HTML: 
<html>
    <head>
        <style>
            html {
                margin:0;padding:0;
                text-align: center;
            }
            #contenitore,#miniature {
                margin: auto;
                width: 756px;
                overflow: hidden;
                border:1px solid black;
            }
            #immagine, #immagine img, #testo {
                float:left;
                width: 378px;
            }
            #immagine img {
                margin:2px;                
            }
            #miniature{
                border-top: none;
            }
            #miniature img {
                float: left;
                width: 120px;
                margin:2px;
                border:1px solid black;
                cursor:pointer;
            }
            #testo p {
                font-size: 2.0em;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function(){
                $("#miniature img").first("img").hide();
                $("#testo p").not(":first").hide();
                $("#miniature img").click(function(){
                    var img = $(this).attr("src");
                    var alt = $(this).attr("alt")
                    $("#miniature img").show();
                    $(this).hide();
                    $("#immagine img").fadeOut(500,function(){
                        $(this).attr("src",img);
                        $(this).fadeIn(500,function(){
                            $("#testo p").hide();
                            $("#" + alt).fadeIn();                            
                        });                        
                    });                  
                });
            });
        </script>
    </head>
    <body>
        <div id="contenitore">
            <div id="immagine">
                <img src="img/07.jpg" alt="img 1"/>
            </div>
            <div id="testo">
                <p id="img1">Monica bellucci </p>
                <p id="img2">Hugo Weaving </p>
                <p id="img3">Jada Pinkett Smith </p>
                <p id="img4">Keanu reeves </p>
                <p id="img5">Laurence Fishburne </p>
                <p id="img6">Carrie-Anne moss </p>
                <p id="img7">Adrian e neil Rayment </p>
            </div>
        </div>
        <div id="miniature">
            <img src="img/07.jpg" alt="img1"/>
            <img src="img/08.jpg" alt="img2"/>
            <img src="img/09.jpg" alt="img3"/>
            <img src="img/10.jpg" alt="img4"/>
            <img src="img/11.jpg" alt="img5"/>
            <img src="img/12.jpg" alt="img6"/>
            <img src="img/13.jpg" alt="img7"/>
        </div>
    </body>
</html>
Clicca per allargare...

Sono partito dal tuo codice, ho aggiunto qualcosa e adesso funzione. Se vuoi dai un'occhiata a www.mauriziogerosa.it/rcs/kvnordic/ e vai alla pagina dei salmoni.
L'animazione non mi è riuscito di implementarla come richiesto... Tu per caso ci hai ripensato?
Comunque grazie per l'aiuto.
Alla prossima
 
Avevo aggiornato il codice online, prova a ritestarlo
puoi scaricare il sorgente direttamente dal browser
ho aggiunto l'effeto fade e l'elemento nascosto prenderà l'ultima posizione a destra
non so se mi ero perso qualcos'altro
La tua pagina però non mi convince molto :
l'immagine è troppo grande, in uno schermo normale da notebook non ci sta e l'utente sraà costretto a scrollare la pagina
 
criric ha scritto:
Avevo aggiornato il codice online, prova a ritestarlo
puoi scaricare il sorgente direttamente dal browser
ho aggiunto l'effeto fade e l'elemento nascosto prenderà l'ultima posizione a destra
non so se mi ero perso qualcos'altro
La tua pagina però non mi convince molto :
l'immagine è troppo grande, in uno schermo normale da notebook non ci sta e l'utente sraà costretto a scrollare la pagina
Clicca per allargare...

Grande! Adesso guardo il codice. Tu hai visto le aggiunte che ho fatto per cambiare il div dei testi?
Riguardo alle dimensioni, mi hanno chiesto addirittura di fare un'unica pagina lunghissima con tutti i div visibili (adesso erano nascosti) uno sotto l'altro... quindi altro che problema di scroll!
A presto e per ora grazie
 
Ed eccomi ancora qui per un ultimo (per ora) suggerimento...
Decisamente con javascript faccio pena...
All'interno della struttura di cui abbiamo parlato, una volta che ho richiamato il div con il testo, all'interno di tale testo c'e' un ulteriore link che dovrebbe sostituire il div visualizzato con un altro (il titolo della ricetta: cliccandoci sopra si deve visualizzare il relativo div al posto di quello descrittivo del salmone). Mettendo all'interno del tag a il codice: onClick="$('#nameOfVisibleDiv').fadeOut('fast'); $('#nameOfDivToAppear').fadeIn('fast');" non funziona. Perche'?
I div sono definiti con display:non direttamente sulla pagina, come gli altri.
Qualche suggerimento?
Grazie
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

L
Effetto fade a div
Risposte
1
Visite
2K
Javascript
MAeSI
MAeSI
E
Div con effetto fade in 2 tempi.
Risposte
1
Visite
2K
Javascript
el chengio
E
K
navigazione tra div nel sito con fade
Risposte
2
Visite
3K
Javascript
knight2008
K
T
[Javascript] identico carousel con effetto fade: in una pagina va in un'altra no, mistero?
Risposte
3
Visite
1K
Javascript
WmbertSea
WmbertSea
M
[HTML] Slideshow immagini con effetto FADE
Risposte
2
Visite
3K
HTML e CSS
mozillaro
M
F
[HTML] Effetto fade su ogni immagine contenute in uno slider
Risposte
16
Visite
6K
HTML e CSS
Francesco Ferrai
F
trattorino
[Javascript] caricamento immagine con effetto fade
Risposte
1
Visite
2K
Javascript
Max 1
Max 1
M
Problema fade in e out
Risposte
1
Visite
1K
jQuery
criric
criric
filomeni
backgrund fade
Risposte
0
Visite
982
jQuery
filomeni
filomeni
I
problema fade
Risposte
1
Visite
1K
Javascript
ispanic
I
emanuelevt
[RISOLTO] animazione pulsante con fade
Risposte
1
Visite
1K
jQuery
emanuelevt
emanuelevt
F
effetto fade javascript
Risposte
2
Visite
2K
Javascript
Fabio90
F
andre9004
Jquery background-image fade (Effetto comparsa background-image)
Risposte
8
Visite
6K
jQuery
filomeni
filomeni
R
animazione fade
Risposte
2
Visite
3K
Javascript
ricdata
R
H
Fade in/Fade out con actionscript
Risposte
0
Visite
2K
Flash
Horizon
H
I
Gallery con effetto fade
Risposte
0
Visite
2K
Javascript
ivanisevic82
I
M
Fade in di immagine su foto!
Risposte
1
Visite
2K
Javascript
lukeonweb
lukeonweb
E
Creare un testo trasparente dietro un div
Risposte
5
Visite
3K
HTML e CSS
WmbertSea
WmbertSea
F
Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni?
Risposte
0
Visite
579
Javascript
fede12
F
M
Accordion menu e posizione div
Risposte
0
Visite
1K
HTML e CSS
miagy
M
Alto Basso