Ciao! Qualcuno mi sa consigliare una gallery come questa ma fatta con prototype?
http://www.e2interactive.com/e2_photo_gallery/demo.php
Grazie mille!
Ciao! Qualcuno mi sa consigliare una gallery come questa ma fatta con prototype?
http://www.e2interactive.com/e2_photo_gallery/demo.php
Grazie mille!
Disegnatori e romanzieri d'Italia, visitate il mio sito, cerchiamo favolieri dark ed illustratori dark fantasy... http://www.neilgaimania.it
La gallery da te citata è una applicazione vera e propria, essendo a quanto pare dotata di un pannellino riservato con backend in php per l'upload e il ridimensionamento delle immagini (utilizza class.upload.php di Colin Verot, che adoro). Dubito esista qualcosa di così completo basato su altri framework. Questa gallery usa Mootols, che è comunque un buon framework, l'ideale per interazioni ed effetti grafici, potresti usarla così com'è, questo se non utilizzi Prototype intensivamente in altri script.
In tal caso, il mio consiglio, che richiede però un po' di impegno, è di fare da te, e realizzarla con Prototype e Scriptaculous, modificando qualche plugin già esistente.
Se dai un'occhiata su Scripteka puoi trovare l'ispirazione giusta. Puoi partire da un carousel, per le thumbs che scorrono sotto. Al click sulla thumbs associ una funzione in cui recuperi l'href della thumbs (che conterrà l'indirizzo dell'ingrandimento) e crei con javascript un'immagine da inserire attraverso il DOM nel contenitore assegnandogli come src il valore dell'href. Ricordati di bloccare la propagazione dell'evento con event.stop() nella funzione del click sulla thumbs, altrimenti invece di partire lo script viene aperta l'immagine in una pagina come comportamento consueto del link. Brutalmente la func potrebbe contenere qualcosa di simile:
Chiaramente insieme all'update puoi utilizzare gli effetti di scriptaculous per nascondere il container con la foto vecchia (fade) e "afterfinish" farlo riapparire (appear) una volta aggiornatone il contenuto.Codice PHP:
var hrefthumbs = $('thumbs').readAttribute('href')
var zoomimage = new Element('img');
zoomimage.setAttribute('src',hrefthumbs);
$('containerfotogrande').update(zoomimage);
Non ti resta che scaricare qualche script e provare...
p.s. alla fine, visto che Prototype e Mootools sono abbastanza simili nei metodi, puoi in qualche parte vedere il codice originale e provare un porting.