Les Modules

Plus de 300 modules Thelia

Zoombox

14 janvier 2013 , par Michaël Espeche

Téléchargement(s)

version 1.0.0

Ajoute un effet Zoombox sur les liens de votre choix

Présentation

Plugin Zoombox

Ce plugin est une adaptation du celebre plugin jQuery de Grafikart.fr (http://grafikart.github.com/Zoombox...). Zoombox vous permet d’afficher des images, du contenu HTML et du contenu multimedia avec une "lightbox" qui flotte sur votre page web.

Configuration

Vous pouvez configurer tous les aspects de Zoombox en intervenant dans l’espace "Modules" de Thelia. Vous pourrez y configurer toutes les fonctionnalite du plugin. Par defaut, tous les elements HTML ayant la classe CSS ".zoombox" seront affectes par l’effet du plugin.

Utilisation

Pour utiliser Zoombox, rien de plus simple ! Il vous suffira d’ajouter la balise #ZOOMBOX_HEAD entre les balises de vos pages HTML. Si vous souhaitez utiliser le mode "Gallery" de Zoombox, il vous faudra effectuer une modification au niveau de votre structure HTML. En effet, il faut indiquer au plugin le groupe d’image qui sera inclu dans une galerie. Pour ce faire, ajoutez simplement la classe CSS "zgallery_" suivit d’un identifiant. Par exemple, dans une boucle PRODUIT, nous aurons :

<a href="#IMAGE" class="zgallery#PRODUIT">

        <img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>

</a>

Pour ajouter l’effet Zoombox la ou vous le desirez, ajoutez votre selecteur CSS dans la configuration du plugin via l’espace "Module". Par exemple, ajoutez : "#produitImages a" pour ajouter l’effet Zoombox aux images de présentation d’un produit (Page Produit)

Auteur

Michael Espeche - mespeche@openstudio.fr

Plus d’infos

Pour obtenir plus d’informations sur Zoombox, rendez-vous sur la page officiel du plugin jQuery : http://grafikart.github.com/Zoombox...

Captures

1 Message

explications configuration zoombox Le 23 octobre 2013 à 12:54

Bonjour ,

Je cherchais un plugin de ce type pour afficher les images des produits de mon site à la façon d’une lightbox. J’aimerais que lorsqu’on clique sur une image du produit elle s’affiche comme une lightbox, au lieu de s’afficher seule dans une autre page html. Cependant je ne comprends pas très bien comment configurer le plugin :

Dans quelle page exactement faut-il insérer #ZOOMBOX_HEAD ? à quel endroit de la page ?

Pour la galerie, où dois-je mettre le code cité dans les explications : c’est dans la page produit.html ? et à quel niveau de la page ?

Et enfin en ce qui concerne le sélecteur CSS je l’ai mis j’espère au bon endroit, mais j’aimerais savoir si c’est exactement #produitImages a, ou je dois changer ?

Bref j’aurais besoin d’explications plus détaillées car là je ne vois pas du tout comment je dois m’y prendre.

Merci pour vos réponses.

fan