Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

Module Gallery et HTLM5
#3

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

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>
Répondre


Messages dans ce sujet

Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)