Utiliser Fancybox avec jquery dans le gabarit Simplex - Version imprimable
+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Ressources (https://forum.cmsmadesimple.fr/forum-4.html)
+--- Forum : Développement et Astuces (https://forum.cmsmadesimple.fr/forum-15.html)
+--- Sujet : Utiliser Fancybox avec jquery dans le gabarit Simplex (/thread-3090.html)
+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Ressources (https://forum.cmsmadesimple.fr/forum-4.html)
+--- Forum : Développement et Astuces (https://forum.cmsmadesimple.fr/forum-15.html)
+--- Sujet : Utiliser Fancybox avec jquery dans le gabarit Simplex (/thread-3090.html)
Utiliser Fancybox avec jquery dans le gabarit Simplex - Nickx - 21/01/2014
Salut tout le monde,
Voilà j'ai galérer depuis quelque jour pour que fancybox fonctionne.
J'ai suivi plusieurs tuto, JLC,... mais cela ne fonctionnais quand même pas. Donc je vous fais part de mon expédition^^
Je n'ai pas installer jquerytools il parait que sa ne fonctionne pas.
J'utilise le gabarit Simplex et mon CMSms est en version 1.11.9.
1/ J'ai télécharger fancybox 2.1.5 la dernière versions
2/ Je l'ai envoyer sur mon serveur
J'ai créer un Bloc de contenus globaux
Code :
[== Indéfini ==]
<!-- Add jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="*************/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="*************/fancybox/source/jquery.fancybox.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="*************/fancybox/source/jquery.fancybox.css?v=2.1.4" media="screen" />
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="*************/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
<script type="text/javascript" src="*************/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="*************/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay opening speed and opacity
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedIn : 500,
opacity : 0.95
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background-color' : '#eee'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
{/literal}J'ai ajouté ce code dans mon gabarit Simplex juste apres le <head>
Code :
[== Indéfini ==]
<head>
{global_content name='jquery'}Et dans ma page ou je veux afficher ma photo voici le code que j'utilise.
Code :
[== Indéfini ==]
<p><a class="fancybox" title="Lorem ipsum dolor sit amet" href="fancybox/demo/1_b.jpg" data-fancybox-group="gallery"><img src="fancybox/demo/1_s.jpg" alt="" /></a></p>En fouillant un peu dans le Gabarit j'ai remarqué qu'il y avais une ligne à la fin, que j'ai supprimé
Code :
[== Indéfini ==]
{cms_jquery exclude='jquery-ui.min.js,jquery.ui.nestedSortable.js,jquery.json.min.js' append='uploads/simplex/js/functions.min.js'}Et là ça a fonctionné
J'aimerai que un administrateur confirme que je n'ai pas fais de connerie en enlevant cette ligne dans le gabarit. Parce que je ne sais pas pourquoi elle empêchai de visualiser la photo dans Fancybox
J’espère que ça vous aidera et si il y a besoin d'autre info n'hésitez pas à demander.