Problema jQuery cycle ed aggiornamento foto

**ringhio_8** · 15-04-2010, 15:10

Ciao a tutti, ho un problema con l'aggiornamento della pagina web e jquery.

Questa la parte di Jquery:

$(document).ready(function() {

$('#header_foto').cycle({
fx: 'fade',
speed: 5000
});
});

La pagina contiene un div header fatto così:

<div id="header_foto">
[img]images/foto1.png[/img]
[img]images/foto2.png[/img]
[img]images/foto3.png[/img]
</div>

Come da tutorial, tutto funziona correttamente, ma quando aggiorno la pagina mi si vedono tutte e tre le foto, mentre invece vorrei che se ne vedesse una fino a che il documento non è stato caricato e appena avvenuto il caricamento vorrei che partisse lo slideshow.

Il vero problema non è tanto l' aggiornamento (era un esempio) ma effettivamente, quando clikko su un link che mi deve portare ad un' altra pagina del sito per qualche istante appaiono tutte le foto, e questa cosa dà un effetto veramente brutto!!

Qualcuno sà come aiutarmi??

Grazie a tutti.

**Xinod** · 15-04-2010, 15:22

normalmente questo non succede,
stai gia' richiamando l' effetto il prima possibile

senza vedere la tua pagina e' difficile immaginare perche' lo faccia

**ringhio_8** · 15-04-2010, 15:41

Grazie per la risposta!!
Questa è la pagina QUASI completa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tenuta Montecorbo</title>

<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link href="lavalamp.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>

<script type="text/javascript">

$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});

$(document).ready(function() {

/* slide show header*/
$('#header_foto').cycle({
fx: 'fade',
speed: 5000
});

$('#s6').cycle({
fx: 'scrollUp',
timeout: 6000,
delay: -2000,
pause:1
});

<div id="header">
<div id="header_foto">
[img]images/capri1.png[/img]
[img]images/capri2.png[/img]
[img]images/capri3.png[/img]
</div>
</div>
<div id="s6">
<div id="sponsor">

<a href="#">[img]images/esterno_2_ristoranti_300.jpg[/img]
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultricies dignissim mauris. Integer turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vitae tellus porttitor turpis congue pellentesque. Suspendisse ante urna, pretium vitae, commodo id, ornare et, ante. Vivamus pulvinar lacus. Proin luctus, metus quis volutpat convallis, elit massa vestibulum odio, non tincidunt justo libero et turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mattis urna id massa scelerisque dapibus. Ut varius aliquam diam.
</a>
</p>
</div>
<div id="sponsor">

<a href="#">
[img]images/interno_ristorante_300.jpg[/img]
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultr
</a>
</p>
</div>

</div>

Grazie ancora per l' aiuto!!!

**Xinod** · 15-04-2010, 15:44

no,no, link alla pagina online

pensi che ci sia tempo di ricostruire le pagine altrui con lavalamp, fancybox etc...?

**ringhio_8** · 15-04-2010, 15:54

Mi dispiace ma al momento sto ancora lavorando in locale, il sito è a metà non posso ancora metterlo online.
E se non riesco a risolvere il problema dubito che andrà online, volevo solo chiederti se secondo te può essere un problema di lavalamp o altre librerie o se pensi che dovrei invertire il codice in modo tale che lo slideshow venga richiamato per primo??

Grazie cmq

**Senamion** · 15-04-2010, 17:20

Il problema è che finchè non si ha il document ready (ha caricato la pagina) le immagini si vedono tutte. Prova a mettere una classe alle immagini che vuoi nascondere con display: none;
Al più se è necessario (non conosco il plugin cycle) prova a fare così nel ready (dopo aver comunque messo le foto con la classe di cui sopra):

codice:

$(document).ready(function() {
  $('#header_foto img').show();
  $('#header_foto').cycle({
    fx: 'fade',
    speed: 5000
    });
});

**ringhio_8** · 15-04-2010, 17:46

RISOLTO!!!!!

SEI UN GRANDISSIMO!!!!!!

posto il codice in caso qualcuno ne abbia bisogno:

Come mi hai suggerito, ho creato
#foto2{
display:none;
}

l' html è questo:

<div id="header">
<div id="header_foto">
[img]images/capri1.png[/img]
</div>
<div id="foto2">
[img]images/capri1.png[/img]
[img]images/capri2.png[/img]
[img]images/capri3.png[/img]</>
</div>
</div>

il codice jquery è questo

$('#header_foto').hide();//faccio scomparire la foto di default
$('#foto2').show();//mostro il div foto2
$('#foto2').cycle({ // ciclo sulle foto !!!!!!
fx: 'fade',
speed: 5000
});

Grazie ancora per il PREZIOSISSIMO aiuto!!!

Discussione: Problema jQuery cycle ed aggiornamento foto

Strumenti discussione

Ricerca discussione

Visualizza

Problema jQuery cycle ed aggiornamento foto

Permessi di invio