#1 07-08-2011 00:39

Brice
Inscription : 17-02-2010
Messages : 45
Site Web

[Résolu] Adaptation plugin Lightbox avec pirobox

Salut jonas,

J'ai voulu regarder la création de plugins pour gcweb et ai décidé de tenter de créer un plugin de lightbox basé sur le script pirobox (http://www.pirolab.it/pirobox_v_1_2/) mais ça coince hmm

Je me suis basé sur le render_lightbox2.php pour produire ce code :

<?php
$info['array_add_header'][] = '<link rel="stylesheet" href="'.URL_GCWEB.'/plugins/pirobox1.2.2/css_pirobox/demo5/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="'.URL_GCWEB.'/plugins/pirobox1.2.2/js/jquery.min.js"></script>
<script type="text/javascript" src="'.URL_GCWEB.'/plugins/pirobox1.2.2/js/pirobox.min.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function(){
	jQuery().piroBox({
	      my_speed: 300, //animation speed
	      bg_alpha: 0.5, //background opacity
	      slideShow : true, // true == slideshow on, false == slideshow off
	      slideSpeed : 3, //slideshow
	      close_all : \'.piro_close,.piro_overlay\'
	      });
	});
</script>
<script type="text/javascript">
<!--
    addFuncOL (function() {
        var anchorTags = document.getElementsByTagName("a");
        for (var i = 0; i < anchorTags.length ; i++)
        {
            if ( anchorTags[i].href.search(/\?image/) != -1 ) {
                anchorTags[i].setAttribute("class","pirobox");
            }
        }
    })
//-->
</script>';
?>

Or après enregistrement de la configuration et rechargement d'une page item, je n'ai pas la lightbox au clic sur l'image hmm Pourtant, je n'ai aucune erreur javascript, les scripts sont bien chargés dans le head... J'ai inversé l'ordre d'ajout des scripts (comme tu peux le voir) mais rien n'y fait.

J'ai fait une archive, disponible ici : http://www.briceboucard.fr/tmp/pirobox_plugin.zip

Je me suis penché sur la création de plugins en envisageant la création d'un plugin lightbox générique permettant à l'utilisateur de sélectionner quel système de lightbox il souhaite et éventuellement de pouvoir une configuration particulière (effets, vitesse d'ouverture, thème, ...) Qu'en penses-tu ?

Merci et à bientôt.

Hors ligne

#2 07-08-2011 12:04

jonas
Administrator
Inscription : 25-06-2006
Messages : 729

Re : [Résolu] Adaptation plugin Lightbox avec pirobox

Peux-tu me donner le lien vers ton gcweb avec pirobox ?

Si c'est un truc en locale ou que tu ne veux pas donner le lien peux-tu me mettre le code html d'une page "item" ?

Hors ligne

#3 07-08-2011 12:10

Brice
Membre
Inscription : 17-02-2010
Messages : 45
Site Web

Re : [Résolu] Adaptation plugin Lightbox avec pirobox

Salut jonas smile

Voici un lien vers une page item : http://www.briceboucard.fr/mylibrary/in … m&item=703

Sinon, j'ai fait un essai avec un autre script lightbox (Shadowbox) sans utiliser ses fonctionnalités jQuery, en standalone donc, mais même souci hmm

Est-ce que ça ne pourrait pas être lié à la forme du href (?....) ?

Merci et à+

Dernière modification par Brice (07-08-2011 13:18)

Hors ligne

#4 07-08-2011 14:11

jonas
Administrator
Inscription : 25-06-2006
Messages : 729

Re : [Résolu] Adaptation plugin Lightbox avec pirobox

Je sais pas trop ... quand on regarde le DOM de la page class="pirobox" est bien ajouter

peut-être que

<script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery().piroBox({
          my_speed: 300, //animation speed
          bg_alpha: 0.5, //background opacity
          slideShow : true, // true == slideshow on, false == slideshow off
          slideSpeed : 3, //slideshow
          close_all : \'.piro_close,.piro_overlay\'
          });
    });
</script>

doit être apppeler après

<script type="text/javascript">
<!--
    addFuncOL (function() {
        var anchorTags = document.getElementsByTagName("a");
        for (var i = 0; i < anchorTags.length ; i++)
        {
            if ( anchorTags[i].href.search(/\?image/) != -1 ) {
                anchorTags[i].setAttribute("class","pirobox");
            }
        }
    })
//-->
</script>';

Essaie d'inverser les deux

Ou peut être même remplacer le tout par un truc du genre :

$info['array_add_header'][] = '<link rel="stylesheet" href="'.URL_GCWEB.'/plugins/pirobox1.2.2/css_pirobox/demo5/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="'.URL_GCWEB.'/plugins/pirobox1.2.2/js/jquery.min.js"></script>
<script type="text/javascript" src="'.URL_GCWEB.'/plugins/pirobox1.2.2/js/pirobox.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
    
    var anchorTags = document.getElementsByTagName("a");
        for (var i = 0; i < anchorTags.length ; i++)
        {
            if ( anchorTags[i].href.search(/\?image/) != -1 ) {
                anchorTags[i].setAttribute("class","pirobox");
            }
        }

    jQuery().piroBox({
          my_speed: 300, //animation speed
          bg_alpha: 0.5, //background opacity
          slideShow : true, // true == slideshow on, false == slideshow off
          slideSpeed : 3, //slideshow
          close_all : \'.piro_close,.piro_overlay\'
          });
    });
</script>

Dans le code

Hors ligne

#5 07-08-2011 16:59

Brice
Membre
Inscription : 17-02-2010
Messages : 45
Site Web

Re : [Résolu] Adaptation plugin Lightbox avec pirobox

J'avais testé d'inverser mais sans succès hmm Par contre, ta deuxième solution marche au poil smile

J'ai ajouté un petit morceau pour avoir le titre de l'image (copié du alt de l'image) dans la lightbox mais par contre j'ai utilisé du jQuery pour le faire, ça fait longtemps que j'ai pas touché au JavaScript et au DOM...

Du coup le code modifié :

    var anchorTags = document.getElementsByTagName("a");
        for (var i = 0; i < anchorTags.length ; i++)
        {
            if ( anchorTags[i].href.search(/\?image/) != -1 ) {
                anchorTags[i].setAttribute("class","pirobox");
		var anchorTagsTitle = jQuery(anchorTags[i]).find("img").attr("alt");
		anchorTags[i].setAttribute("title", anchorTagsTitle);
            }
        }

Et le plugin en fonctionnement : http://www.briceboucard.fr/mylibrary/in … m&item=701

Merci beaucoup pour ton aide smile J'ouvre un nouveau post pour éclaircir certains points quant à la création de plugins.

Hors ligne

Réponse rapide

Veuillez composer votre message et l'envoyer
Si vous êtes un être humain ne changez pas le contenu de ces deux champs.

Pied de page des forums