Vous n'êtes pas identifié(e).
Pages : 1
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
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 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
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
Salut jonas
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
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
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
J'avais testé d'inverser mais sans succès Par contre, ta deuxième solution marche au poil
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 J'ouvre un nouveau post pour éclaircir certains points quant à la création de plugins.
Hors ligne
Pages : 1