-
JCarousel non gira bene
Ciao a tutti, non so bene se questo argomento riguardi principalmente Javascript o PHP perché il seguente codice li contiene tutti e due.
Brevemente: ho una pagina che elenca in breve le news del momento per un sito ed è inserita in un piccolo spazio nella home page, per cui ho deciso di sfruttare JCarousel per far girare le news in cerchio.
Ora, se provo a scrivere direttamente le news nella pagina suddetta funziona tutto perfettamente, ma io ho bisogno che queste news vengano riprese da un database per cui ho modificato il tutto così
Dopo aver richiamato le librerie js di JCarousel ho dato le impostazioni generali così
Codice HTML:
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disabilitiamo l'autoscrolling se l'utente clicca sui pulsanti prev o next
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Nel caso l'utente posizioni il cursore su una clip mettiamo in pausa l'autoscrolling
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 1,
auto: 2,
animation: 1500,
wrap: 'circular',
initCallback: mycarousel_initCallback
});
jQuery('#mycarousel_vert').jcarousel({ //scrolling attivo in questa pagina
vertical: true,
scroll: 1,
wrap: 'circular', // tipo di animazione
animation: 3000, // velocità animazione
auto:2,
initCallback: mycarousel_initCallback
});
jQuery('#mycarousel_vert2').jcarousel({
vertical: true,
scroll: 1,
wrap: 'circular',
animation: 1000,
auto:2,
initCallback: mycarousel_initCallback
});
jQuery('#mycarousel_orr').jcarousel({
scroll: 3,
auto: 2,
animation: 1500,
wrap: 'circular',
initCallback: mycarousel_initCallback
});
});
</script>
Poi ho inserito il contenuto in questo div
Codice HTML:
<div > Ultime News e Comunicazioni<br />
<div>
<ul id="mycarousel_vert" class="jcarousel-skin-ie7">
<li>
<table border="0" cellpadding="0" cellspacing="0" style=" width:220px">
<?
// cicliamo adesso il risultato della nostra query per visualizzare le nostre news
while ($row=mysql_fetch_array($query))
{
?>
<tr>
<td style="height:10px"> </td>
</tr>
<a href="articolo.php?title=<?= urlencode($row['title']) ?>">
<tr>
<td class="image_promo" align="center" style="padding-top:3px; width:60px">foto</td>
<td class="font_offerte_top" align="left"><div class="arial_10_grigio">Data: <? echo date("d/m/Y", $row['publish_data']); ?></div>
<span style="text-align:left;"> <? echo $row['title']; ?> </span>
<div class="arial_13_grigio_666" style="margin-top:3px;"> <? echo html_entity_decode($row['text']); // la funzione html_entity_decode serve a ritrasformare le entità HTML create dall'editor in tag ?></div></td>
</tr>
</a>
<?
}
?>
</table>
</li>
</ul>
</div>
</div>
Scritto così, quando testo la pagina inizialmente sembra funzionare, ma dopo aver fatto il primo giro di news cominciano ad accavallarsi una sopra l'altra e tra l'altro non torna alla prima news ma si resetta lasciando visibile sempre le ultime 2 news.
Abbozzo l'ipotesi possa essere il ciclo while a crearmi un qualche problema, ma ho bisogno che i dati vengano prelevati in automatico.
Avete avuto esperienze del genere in passato e qualche soluzione?
-
Potresti indicare l'indirizzo della pagina in questione?
-
-
Non usare le tabelle e includi ogni notizia in un elemento li a sé stante.
-
Grazie karl94
ho spostato il while per comprendere i li e ora in effetti non mi da più alcun problema, la tabella l'ho usata solo per essere veloce per testarlo, dopo andrò a sostituire il tutto con i css. Ancora grazie
