Tutorial Avanzati - Myalbum con effetto lightbox!

Profilo autore: slyss

E' ormai più di un annetto che io uso lightbox con myalbum ma purtroppo non ho mai avuto tempo
di scrivere un bel tutorial.

Finalmente questo tempo l'ho trovato (grazie alle vacanze pasquali

) e quindi eccovi il
tutorial per trasformare il vostro myalbum in un myalbum-lightbox.

Per chi si chiedesse che cosa è lighbox può vedere una preview cliccando qui:

http://www.stefanosilvestrini.com/lab/

INIZIAMO!!!

Scaricatevi e scompattate il seguente pack:

http://www.huddletogether.com/project ... releases/lightbox2.04.zip

Andiamo via FTP ed apriamo la cartellina themes presente nella root del nostro sito Xoops.
Entriamo nella cartellina del nostro tema in uso ed editiamo il file theme.html:

prima della chiusura del tag



</head>

inserite questo codice:



<script type="text/javascript" src="<{$xoops_url}>/js/prototype.js"></script>

<script type="text/javascript" src="<{$xoops_url}>/js/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="<{$xoops_url}>/js/lightbox.js"></script>

<link rel="stylesheet" href="<{$xoops_url}>/css/lightbox.css" type="text/css" media="screen" />

ora salvate e chiudete.

Ora fate upload delle direcotry css, js e images presenti nel pack lightbox 2.04 facendo attenzione
di non sovrascrivere la cartellina images (già presente nella vostra root), ma copiando i file della
lightbox/images/ ed incollandoli nella root/images/ del vostro sito Xoops.

A questo punto siamo pronti a modificare il codice.

ATTENZIONE: utilizzerò il nuovo sistema di TEMPLATE OVERRIDE usando come esempio la visualizzazione a TABELLA di myalbum.
(se vorrete potrete cambiare tipo di visualizzazione dalle preferenze di myalbum, ricordando di modificare il codice del template relativo)

Andiamo via ftp in:

root_del_sito/modules/myalbum/templates

e copiamo sul nostro desktop (o dove vorrete) il file myalbum_viewcat_table.html

A questo punto apriamo il file ed editiamolo in questo modo:

alla riga 65 troviamo la riga:



<a href='<{$mod_url}>/photo.php?lid=<{$photo.lid}>'><img src='<{$photo.imgsrc_thumb}>' <{$photo.width_spec}> alt='<{$photo.title}>' title='<{$photo.title}>' border='0' /></a>

e la modifichiamo in questo modo:



<a href='<{$photo.imgsrc_photo}>' rel='lightbox[]'><img src='<{$photo.imgsrc_thumb}>' <{$photo.width_spec}> alt='<{$photo.title}>' title='<{$photo.title}>' border='0' /></a>

Ora salviamo il file e chiudiamo.

Eseguiamo la stessa procedura con questo file: myalbum_photo_in_list.html ed

alla riga 11 troviamo questo codice:



<a href='<{$mod_url}>/photo.php?lid=<{$photo.lid}>'><img src='<{$photo.imgsrc_thumb}>' <{$photo.width_spec}> alt='<{$photo.title}>' title='<{$photo.title}>' /></a>

e la modifichiamo in questa maniera:



<a href='<{$photo.imgsrc_photo}>' rel='lightbox[]'><img src='<{$photo.imgsrc_thumb}>' <{$photo.width_spec}> alt='<{$photo.title}>' title='<{$photo.title}>' /></a>

ed alla riga 16 troviamo:



<a href='<{$photo.ahref_photo}>' target='_blank'><img src='<{$photo.imgsrc_thumb}>' <{$photo.width_spec}> alt='<{$photo.title}>' title='<{$photo.title}>' /></a>

e la modifichiamo:



<a href='<{$photo.imgsrc_photo}>' rel='lightbox[]'><img src='<{$photo.imgsrc_thumb}>' <{$photo.width_spec}> alt='<{$photo.title}>' title='<{$photo.title}>' /></a>

Ora salviamo il file e chiudiamo.

Eseguiamo la stessa procedura con questo file: myalbum_photo.html ed

alla riga 28 troviamo questo codice:



<a href="<{$photo.ahref_photo}>" target="_blank" onClick="window.open('<{$photo.ahref_photo}>','','width=<{$photo.window_x}>,height=<{$photo.window_y}>');return(false);"><img src="<{$photo.imgsrc_photo}>" border="0" align="center" vspace="3" hspace="7" alt="<{$photo.title}>" title="<{$photo.title}>" <{$photo.width_height}> /></a>

e la modifichiamo in questa maniera:



<a href='<{$photo.imgsrc_photo}>' rel='lightbox[]'><img src="<{$photo.imgsrc_photo}>" border="0" align="center" vspace="3" hspace="7" alt="<{$photo.title}>" title="<{$photo.title}>" <{$photo.width_height}> /></a>

Ora salviamo il file e chiudiamo.

A questo punto usiamo il template override e quindi andiamo via ftp in:

root_del_sito/themes/il_tema_in_uso/ creiamo una cartellina modules (se non è già presente)
ed al suo interno creiamo una cartellina myalbum. All'interno di questa cartellina myalbum inseriamo i file appena creati.

Ora per sicurezza andiamo via ftp a svuotare la cartellina template_c presente nella root del nostro sito.

Ora aprite il file js/lightbox.js e modificate le righe 49 e 50 in questo modo:



fileLoadingImage:        'http://www.stefanosilvestrini.com/lab/images/loading.gif',     

fileBottomNavCloseImage: 'http://www.stefanosilvestrini.com/lab/images/closelabel.gif',

inserendo quindi il path completo relativo al vostro sito.

IL TUTORIAL E' FINITO. Ora avrete il vostro myalbum con la visualizzazione lightbox!

Vi ricordo che con il sistema lightbox non avrete il conteggio dei click e delle visualizzazioni delle vostre foto,
ma avrete un effetto visivo veramente eccellente.

Happy Xoops!

ciao Stefano