[jQuery - PHP] Slideshow prodotti avanzato

ale.colombo

[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?

digital.daigor

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!

ale.colombo

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à

digital.daigor

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!

ale.colombo

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!

digital.daigor

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!

ale.colombo

Senz'altro!
Buona giornata,
ciao