Forum CMS Made Simple Francophone

Aide francophone sur CMS Made Simple

Vous n'êtes pas identifié(e).

Annonce

ATTENTION

  • Prenez le temps de rechercher si quelqu'un n'a pas déjà proposé une solution à votre problème. Sur le forum français et sur le wiki
  • Pensez à mettre à jour votre version de CMS Made Simple. Nous ne faisons de support que sur LA dernière version de CMS Made Simple.
  • Renseignez impérativement le formulaire de nouveau message de manière la plus complète que possible. Dans votre CMS utiliser le menu Administration du site/Informations du système en haut Vue au format texte. Ces informations demandées nous permettent de mieux vous aider
  • Ajoutez [Résolu] au début du titre de votre 1er message lorsqu'une solution a été trouvée.

#1 21/01/2014 17:20:02

Nickx
Petit nouveau
Inscription : 11/10/2013
Messages : 7

Utiliser Fancybox avec jquery dans le gabarit Simplex

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

[== 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>

[== Indéfini ==]
<head>

{global_content name='jquery'}

Et dans ma page ou je veux afficher ma photo voici le code que j'utilise.

[== 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>

Là j'ai remarqué qu'il y avait un problème mes photos ne n’affichais pas dans la fenêtre fancybox.

En fouillant un peu dans le Gabarit j'ai remarqué qu'il y avais une ligne à la fin, que j'ai supprimé

[== 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.

Hors ligne

Pied de page des forums