<![CDATA[[jQuery - PHP] Slideshow prodotti avanzato]]>Ciao a tutti,
il mio obiettivo è il seguente: creare una pagina dove vi sia un box (es: 800px x 300px) contente un'immagine grande del prodotto e una descrizione, e sotto questa delle thumbs di tutti i prodotti. Per navigare si possono usare i bottoni avanti e indietro presenti a lato del box principale oppure cliccare sulle varie thumbs.

Mi sono avvicinato a questo obiettivo usando uno script PHP e il plugin jQuery Cycle.

Usando foreach e glob prendo tutte le foto grandi dei prodotti presenti nella cartella prodotti:
[PHP]
<div id="fotoBox">
<?php
foreach (glob("prodotti/*.jpg") as $filename) {?>
<img src="prodotti/<?php echo basename($filename);?>" class="slide" alt="Slide" />
<?php
}
?>
</div>[/PHP]

Poi usando il plugin Cycle e usando la funzione pagerAnchorBuilder creo le thumbnails delle foto:

$(document).ready(function() {
  $('#fotoBox').cycle({
    fx:'fade',
    speed:  1000,
    timeout: 5000,
    prev:   '#prima',
    next:   '#dopo',
	pager:  '#thumbnails ul',
	
	pagerAnchorBuilder: function(idx, slide) {
	return '<li><a href="#" title="Thumbnail"><img src="' + slide.src + '"/ class="thumb"></a></li>';
	}
	
  }).cycle("pause");
  
});

I problemi quali sono:
1- non voglio creare delle thumbs delle immagini grandi ma caricare delle foto piccole dei prodotti da una cartella e collegarle al box principale.
2- quando il box principale è su un prodotto voglio che la relativa miniatura sia evidenziata (es: bordo colorato)

Avete qualche suggerimento su come raggiungere questo scopo?

]]>https://connect.gt/topic/171448/jquery-php-slideshow-prodotti-avanzatoRSS for NodeFri, 10 Apr 2026 09:17:11 GMTSun, 20 May 2012 09:30:13 GMT60<![CDATA[Reply to [jQuery - PHP] Slideshow prodotti avanzato on Mon, 21 May 2012 10:44:20 GMT]]>Senz'altro!
Buona giornata,
ciao

]]>https://connect.gt/post/1069881https://connect.gt/post/1069881Mon, 21 May 2012 10:44:20 GMT<![CDATA[Reply to [jQuery - PHP] Slideshow prodotti avanzato on Mon, 21 May 2012 10:39:11 GMT]]>Ti inizio con l'indirizzare a jQuery e alla funzione "each"...
Se ti studi un po i vari doc del framework...vedrai che riuscirai a tirare fuori un bello script.

Se serve siamo qui, e se alla fine hai qualcosa in mano...ricordati di postarla qui così da aiutare che avrà gli stessi problemi e dubbi!

]]>https://connect.gt/post/1069843https://connect.gt/post/1069843Mon, 21 May 2012 10:39:11 GMT<![CDATA[Reply to [jQuery - PHP] Slideshow prodotti avanzato on Mon, 21 May 2012 10:28:43 GMT]]>Ho provato entrambi e a smanettare un pò con il codice ma sembra, come dicevi tu, che il core del plugin vada per la sua strada. A questo punto mi tocca lasciarlo da parte e provare a fare da capo.
Pensavo di usare richiamare con lo script php tutte le miniature e impostare all'evento click l'apertura della relativa immagine grande. Sono in grado di realizzarlo ma solo scrivendo la funzione per ogni miniatura. Sapresti indicarmi come fare per automatizzare la cosa?
Grazie del tuo tempo!

]]>https://connect.gt/post/1069880https://connect.gt/post/1069880Mon, 21 May 2012 10:28:43 GMT<![CDATA[Reply to [jQuery - PHP] Slideshow prodotti avanzato on Sun, 20 May 2012 16:45:55 GMT]]>Non avendo sotto mano lo script, sarò un po generico, spero non troppo...

Dove hai questo:


return '<li><a href="#" title="Thumbnail"><img src="' + slide.src + '"/ class="thumb"></a></li>';

devi riuscire a modificare la parte dello "slide.src", mettendo magari una cartella di prefisso in questo modo:


return '<li><a href="#" title="Thumbnail"><img src="/miniature/' + slide.src + '"/ class="thumb"></a></li>';

Ma se lo script funziona a url assoluti e non relativi, questo non funzionerà...

Però puoi provare a farlo dopo, in questo modo:


$('a .thumb').each(function(){
     url = $(this).attr('src');
     url = url.split('/');
     nome_img = url[url.length];
     $(this).attr({'src':'http://iltuosito.com/img/thumb/'+nome_img});
});

Non sapendo come funziona lo script, anche questo potrebbe non andare...quindi rimane solo il pastrocchio con il core.

fammi sapere, se non va, escogitiamo altro!

]]>https://connect.gt/post/1069841https://connect.gt/post/1069841Sun, 20 May 2012 16:45:55 GMT<![CDATA[Reply to [jQuery - PHP] Slideshow prodotti avanzato on Sun, 20 May 2012 16:36:52 GMT]]>E' un'idea, a livello di sintassi come faccio a codificare il tuo suggerimento. Lasciando stare il plugin Cycle, hai altri suggerimenti o idee su come realizzare grosso modo ciò che vorrei?
Grazie della disponibilità

]]>https://connect.gt/post/1069879https://connect.gt/post/1069879Sun, 20 May 2012 16:36:52 GMT<![CDATA[Reply to [jQuery - PHP] Slideshow prodotti avanzato on Sun, 20 May 2012 10:34:12 GMT]]>Non conosco il plugin, ma a quel che vedo, o metti mano nel core, o lui continuerà a fre così!

Prova senò a fare così:
Nel tag dell'immagine, parsare e ricreare l'url della miniatura a tuo piacimento, sperando che il core non decida poi di prendere quello come immagine grande...

Fammi sapere!

]]>https://connect.gt/post/1069840https://connect.gt/post/1069840Sun, 20 May 2012 10:34:12 GMT