Myalbum con effetto lightbox!
Categoria: Hack Moduli
Autore: slyss
Data: 23/3/2008
Sommario: Modificate il vostro myalbum con il sistema di visualizzazione lightbox!
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/projects/lightbox2/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
inserite questo codice:
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:
e la modifichiamo in questo modo:
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:
e la modifichiamo in questa maniera:
ed alla riga 16 troviamo:
e la modifichiamo:
Ora salviamo il file e chiudiamo.
Eseguiamo la stessa procedura con questo file: myalbum_photo.html ed
alla riga 28 troviamo questo codice:
e la modifichiamo in questa maniera:
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:
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
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 iltutorial 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/projects/lightbox2/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
Tutorial Avanzati V1
URL: http://www.xoopsitalia.org/modules/article/view.article.php/c20/67