27/02/2013, 20:41:27
Une alternative possible et plus simple:
Utilisez le plugin "prettyphoto" inclu dans le module Gallery 1.6
Avantages 1 :
Ce plugin est un clone de Lightbox mais avec le support pour les vidéos, flash, youtube, iframes et ajax.
Avantage 2 :
Pour le rendre compatible HTML5, il ne nécessite pas de modifier le fichier .js du plugin.
Les modifications s'effectuent directement depuis l'admin de CMSMS.
Procédure:
Dans le gabarit de base "prettyPhoto" du module Gallery,remplacez rel par data-rel
Puis modifiez le code javascript de base :
voici le code modifié ( enlever aussi le charset utf-8 qui n'est pas compatible w3c )
Utilisez le plugin "prettyphoto" inclu dans le module Gallery 1.6
Avantages 1 :
Ce plugin est un clone de Lightbox mais avec le support pour les vidéos, flash, youtube, iframes et ajax.
Avantage 2 :
Pour le rendre compatible HTML5, il ne nécessite pas de modifier le fichier .js du plugin.
Les modifications s'effectuent directement depuis l'admin de CMSMS.
Procédure:
Dans le gabarit de base "prettyPhoto" du module Gallery,remplacez rel par data-rel
Code :
[== HTML ==]
<a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->comment}" data-rel="prettyPhoto[{$galleryid}]"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
Puis modifiez le code javascript de base :
Code :
[== JavaScript ==]
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
animation_speed: 'fast',
slideshow: 5000,
autoplay_slideshow: false,
show_title: true,
allow_resize: true,
counter_separator_label: '/',
theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
overlay_gallery: true,
keyboard_shortcuts: true
});
});
</script>
voici le code modifié ( enlever aussi le charset utf-8 qui n'est pas compatible w3c )
Code :
[== JavaScript ==]
<script type="text/javascript" >
$(document).ready(function(){
$("a[data-rel^='prettyPhoto']").prettyPhoto({
animation_speed: 'fast',
slideshow: 5000,
autoplay_slideshow: false,
show_title: true,
allow_resize: true,
counter_separator_label: '/',
theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
overlay_gallery: true,
keyboard_shortcuts: true
});
$("a[data-rel^='prettyPhoto']").prettyPhoto({hook: 'data-rel'});
});
</script>