Slideshow e Posizionamento DIV

Guido84

Nuovo Utente
6 Ott 2013
8
0
0
Salve ragazzi e come sempre complimenti,

sto realizzando una semplice struttura con header, menu sulla dx, div centrale per galleria fotografica etc etc...
Il problema sorge proprio nella galleria fotografica dove quando scorro le immagini queste ultime "saltano" prima di entrare in posizione, penso sia un problema di CSS.
Da quello che ho capito la foto entra prima che l'altra scompare quindi mettendosi sotto e poi entra in posizione, ma non capisco come ovviare se non giocando sui tempi di transizione.

Un esempio si puo vedere sul sito provaguido.altervista.org
entrando in menu e poi prova, premendo nex o prev si nota il difetto,
se potete darmi qualche dritta vi sarei mooooolto grato.

HTML:
<! slide container >
            <div id ="slide">     
                 
            <img id="first" src="menu/1.jpg" width="349" height="550"  alt="animation" /> 
             
            <div id="uovo">
            <div id="top">      
			<a id="frp" href="javascript:prev()" > prev </a> 
			<a id="frn" href="javascript:nex()"  > next </a>                      
			</div>  
            <div class='slideshow'>
            <img class="1" src="uovo/1.jpg"  width="349" height="550"  alt="animation"  />
            <img class="1" src="uovo/2.jpg"  width="349" height="550"  alt="animation" style="display:none" />
            <img class="1" src="uovo/3.jpg" width="550" height="349"  alt="animation" style="display:none"/>
 
            </div>          
            </div>                  
            </div>

CSS:
Codice:
#container { width:960px; margin:0 auto; padding:10px ; height:100%  }

#header { width:960px; padding-top:5px; padding-bottom:10px; }



#slide { width:600px; height:550px; 
		float:left; margin:0 auto; 
		text-align:center; }	

#footer { width:960px; clear:both; padding-top: 15px; color:#666; border-top:#CCC 1px solid} 
#footer_space { width:960px; clear:both; height:15px; }
a:hover { color:#CCC;}

#uovo {float:left; width:550px; height:550px; display:none;}

.slideshow img { margin:0 auto;  }


Jquery:
Codice:
<script type="text/javascript">
 function photo(name) {
	 
	  $("#first").css("display","none");
	  $(name).css("display","block").fadeIn("slow");
	   
	 }

	function nex() {
     $("#uovo .slideshow img:first-child").fadeOut().next().fadeIn().end().appendTo('.slideshow');	  
			}
		
	function prev() {
    $("#uovo .slideshow img:first-child").css("display","none");
    $("#uovo .slideshow img:last-child").prependTo('.slideshow').fadeOut(500);
    $("#uovo .slideshow img:first-child").fadeIn(500);	
	}
</script>

Grazie in anticipo a tutti.

Guido.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Secondo me non è un problema di CSS ma di JS. Non è detto che funzioni ma prova cambiare i valori di fadein e fadeout mettendoli diversi magari più lungo fadein
 

Guido84

Nuovo Utente
6 Ott 2013
8
0
0
Ciao e grazie, ho provato e se cambio ad esempio il fadeout con .css(display:none) e allungo il fadeout ad esempio a 500 il difetto scompare, ma ero convinto che ci fosse un problema di posizionamento div, magari riuscire ad usare un position absolute nel float centrale ma non riesco.

Grazie
 

Guido84

Nuovo Utente
6 Ott 2013
8
0
0
Ciao cory e grazie.. si con overflow il difetto è tolto, :beer:
volevo chiederti comunque se è giusto fare così o c'è comunque qualche errore strutturale nel layout che ha causato questa cosa.

Grazie
Guido.
 

cory

Utente Attivo
31 Gen 2014
51
0
6
cory.altervista.org
nessun errore :)
non sono esperto di javascript ma credo che agisca su opacity per fare il fade in/out
ma per farlo cambia l'immagine da display none a block
e quindi il div si allunga anche solo per una frazione di secondo
causando il saltello che dici
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
nessun errore :)
non sono esperto di javascript ma credo che agisca su opacity per fare il fade in/out
ma per farlo cambia l'immagine da display none a block
e quindi il div si allunga anche solo per una frazione di secondo
causando il saltello che dici
Quindi come avevo detto io non è un problema di css ma di JS
 

Guido84

Nuovo Utente
6 Ott 2013
8
0
0
Alla fine sto usando entrambi i metodi, ho allungato i tempi di ingresso delle img e aggiunto anche l' overflow hidden al div contenitore, ora mi resta solo un micro spostamento delle foto quando si visualizza e sto cercando di capire.

Gracias....
 
Discussioni simili
Autore Titolo Forum Risposte Data
Z CSS Slideshow senza JS e JQUERY HTML e CSS 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
F [PHP] Slideshow video PHP 0
Cosina Aggiungere pulsante pause/play a slideshow Javascript 0
ANDREA20 [Javascript] Slideshow Gallery Javascript 0
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
I [CSS3]Problema slideshow multiple HTML e CSS 2
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
V Creare slideshow con immagini esterne Ajax 1
dakko96 slideshow doppia jQuery 0
G Aiuto slideshow joomla3x Joomla 4
R Slideshow di immagini in HTML5 HTML e CSS 1
S Slideshow con jquery Javascript 2
S Slideshow immagini automatica senza specificare il file immagine PHP 7
I Slideshow HTML e CSS 4
L SlideShow in js Javascript 1
A problema slideshow con visualizzazione mobile HTML e CSS 6
F Plugin Metaslider (Slideshow Wordpress) WordPress 1
C slideshow numero immagini Javascript 5
Devil-94 javascript slideshow Javascript 1
D Come far ripartire una gif quando si rivisita la pagina dello slideshow WordPress 1
Emix Slideshow con div sovrapposto HTML e CSS 5
J Slideshow e gallerie manuali HTML e CSS 19
F Codice Random Javascript con slideshow Javascript 3
S Problemi con slideshow HTML e CSS 0
M Simple Slideshow jQuery 1
R Errore Slideshow - "Attenzione lo script non risponde" Joomla 1
R Uso Immagini per Slideshow Joomla 0
R Immagini con Link (modulo e slideshow) Joomla 0
C aggiungere link foto slideshow HTML e CSS 2
K Aiuto per slideshow HTML e CSS 4
L Slideshow non cambia le foto Flash 7
G problema caricamento condizionale slideshow FlexSlider Javascript 0
M [RISOLTO]Fermare slideshow immagini al passaggio del mouse. jQuery 3
L jquery slideshow con anteprima jQuery 10
F Slideshow Javascript 0
P Slideshow orrizontale con link WordPress 0
M sezione news del mio sito collegata a uno slideshow nella home page PHP 0
P Bug IE 7/8 slideshow inserito in pagina html5 Parallax HTML e CSS 4
P Bug IE 7 slideshow inserito in pagina html5 Parallax Javascript 1
M Come dire al mio slideshow di non scrollare all'infinito! jQuery 23
F aiuto slideshow Javascript 0
F personalizzazione slideshow Javascript 0
L Banner e slideshow Flash 1
P Slideshow per sito in ASP Classic ASP 0
J creazione di un slideshow con pagine html HTML e CSS 3
T conflitto tra due slideshow Javascript 3
T inserimento url su immagini in slideshow Javascript 4
Frank10 slideshow immagini in wordpress WordPress 2

Discussioni simili