Ciao,
posso elencarti i vari "pezzi" che ti serviranno a realizzare la pagina completa.
glasp ha scritto:
Vorrei evitare di creare immagini doppie nel sito (la stessa immagine con dimensioni diverse).
In realtà sarebbe meglio se la miniatura venisse già preparata al caricamento dell'immagine ma, se vuoi evitarlo, puoi scriverti un HttpHandler .ashx che legga l'immagine originale dal disco e la ridimensioni al volo, prima di inviarla al client.
Opzionalmente, potrebbe salvarsi la miniatura da qualche parte a mo' di cache, per evitare che alla successiva richiesta debba rifare il ridimensionamento.
Qui trovi del codice su come creare l'handler.
http://www.sumitgarg.net/post/2010/04/07/Image-Resigning-in-ASP-Dot-with-C-using-httphandler.aspxAnche se non vuoi avere le miniature su disco, siamo d'accordo sul fatto che le immagini originali debbano essere ridimensionate perché vogliamo inviare al client pochi kilobytes, in modo che la pagina finisca di caricarsi velocemente.
glasp ha scritto:
scroll che visualizza le miniature
Per prima cosa devi leggere i nomi delle immagini dalla cartella in cui sono contenute usando
Directory.GetFiles, a meno che tu non abbia già salvato quell'elenco nel database.
Ottenuti i nomi dei file fisici, devi trasformarli in modo che diventino parametri di una richiesta all'handler di cui parlavamo poco fa. Esempio:
var cartellaSito = Server.MapPath("~/");
var cartellaImmagini = Server.MapPath("~/categorie/divani");
var immagini = Directory.GetFiles(cartellaImmagini, "*.jpg").Select(img => img.Substring(cartellaSito.Length));
Ora puoi mettere in binding l'elenco dei percorsi con un Repeater o un ListView. All'interno del loro ItemTemplate metti un asp:Image e lega la proprietà ImageUrl con il percorso, che dovrai trasformare affinché diventi un parametro nella richiesta all'handler che di cui ti parlavo prima.
Verranno così prodotte una serie di tag <img> che puoi contenere in una <div>. Per "scroll" immagino che tu intenda l'effetto di scorrimento automatico orizzontale, che puoi realizzare con uno dei componenti javascript scaricabili gratuitamente dal web. Prova a cercare "javascript continuous image scrolling", salteranno fuori componenti tipo questo. Basta seguire le istruzioni per l'installazione.
http://www.dyn-web.com/code/scrollers/continuous/Ora non resta che realizzare l'ingrandimento. Esistono molti componenti, denominati
lightbox, che realizzano questo effetto. Uno di essi è prettyPhoto, che oltre all'ingrandimento mostra anche l'elenco delle miniature, come avevi richiesto.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhotoAnche in questo caso dovrai seguire le istruzioni per l'installazione. Tornare nel Repeater e aggiungi anche un asp:HyperLink attorno all'asp:Image che avevi già messo in precedenza. Quel link servirà a scatenare l'apertura della lightbox.
Vai ad ispezionare il codice HTML prodotto dalla tua pagina e verifica scrupolosamente che sia conforme a quanto indicato nella documentazione dei componenti che ti ho suggerito di usare.
ciao,
Moreno
Modificato da BrightSoul il 11 agosto 2013 17.58 -
