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
 
criric

criric

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

gandalf1959

Utente Attivo
21 Nov 2013
208
1
18
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...
 
criric

criric

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

gandalf1959

Utente Attivo
21 Nov 2013
208
1
18
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
 
criric

criric

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

gandalf1959

Utente Attivo
21 Nov 2013
208
1
18
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...
 
gandalf1959

gandalf1959

Utente Attivo
21 Nov 2013
208
1
18
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
 
criric

criric

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

gandalf1959

Utente Attivo
21 Nov 2013
208
1
18
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

gandalf1959

Utente Attivo
21 Nov 2013
208
1
18
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
 
gandalf1959

gandalf1959

Utente Attivo
21 Nov 2013
208
1
18
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
 
criric

criric

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

gandalf1959

Utente Attivo
21 Nov 2013
208
1
18
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
 
gandalf1959

gandalf1959

Utente Attivo
21 Nov 2013
208
1
18
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
Autore Titolo Forum Risposte Data
L Effetto fade a div Javascript 1
E Div con effetto fade in 2 tempi. Javascript 1
K navigazione tra div nel sito con fade Javascript 2
T [Javascript] identico carousel con effetto fade: in una pagina va in un'altra no, mistero? Javascript 3
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
F [HTML] Effetto fade su ogni immagine contenute in uno slider HTML e CSS 16
trattorino [Javascript] caricamento immagine con effetto fade Javascript 1
M Problema fade in e out jQuery 1
filomeni backgrund fade jQuery 0
I problema fade Javascript 1
emanuelevt [RISOLTO] animazione pulsante con fade jQuery 1
F effetto fade javascript Javascript 2
andre9004 Jquery background-image fade (Effetto comparsa background-image) jQuery 8
R animazione fade Javascript 2
H Fade in/Fade out con actionscript Flash 0
I Gallery con effetto fade Javascript 0
M Fade in di immagine su foto! Javascript 1
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2

Discussioni simili

Alto Basso