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 CmsMadeSimple.
  • Renseignez impérativement le formulaire de nouveau message de manière la plus complète que possible. 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 11/02/2011 19:02:56

Jean le Chauve
Sa Seigneurie le Chauve, Comte du domaine .be
Lieu : Bruxelles
Inscription : 13/12/2007
Messages : 3 863
Site Web

Insérer un diaporama/slider avec le module Gallery

Je me suis décidé enfin à le tester big_smile:)
Ce module est assez génial. Il vous permet d'utiliser n'importe quel plugin JQuery pour afficher vos images.

Par exemple avec CoinSlider

Créez un nouveau gabarit Gallery que vous appelerez "coinslider" (dans l'administration du module, pas un gabarit de page).
Source du gabarit :

<div id='coin-slider'>
{foreach from=$images item=image}
    <a href="#"><img class="img-candidat" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
{/foreach}
</div>

Gabarit CSS-feuille de style:

/*
    Coin Slider jQuery plugin CSS styles
    http://workshop.rs/projects/coin-slider
*/
/* Added by Matt */
#coin-slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
/* */
#coin-slider a {
border:0;
display:block;
}
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 590px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

Gabarit JavaScript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/coin-slider.js"></script>{* à télécharger sur le site du plugin. Attention, corrigez le path suivant l'endroit où vous le placez *}
<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider({ width: 600, height: 398, hoverPause: true, navigation: true, delay: 5000 });
    });
</script>
 {* Vous pouvez modifier les paramètres comme il plaira, voir la doc du plugin *}

Vous n'avez plus qu'à placer charger vos images et écrire {Gallery template='coinslider'} dans la page voulue.
Have fun smile

Ce serait sympa que ceux qui ont déjà utilisé ce module avec des gabarits autre que ceux donnés par défaut partagent leur petites merveilles sur ce post, ou dans le blog wink

Résolution de problèmes
Si votre galerie ne fonctionne pas (l'image s'ouvre dans un nouvel onglet, par exemple), c'est très souvent à cause que le fichier (jquery.min.js) est dupliqué par un autre module ou thème. Vous ne pouvez avoir qu'une version de JQuery sur une page (vérifiez le code source de votre page).
Je vous conseille d'utiliser un bloc de contenu global pour tous vos appels aux fichiers JS que vous placerez dans le gabarit de page au lieu d'utiliser l'espace prévu dans les modules (comme ici au lieu de "Gabarit JavaScript:").
Cela vous permettra de mieux gérer les éventuels problèmes dûs à ShowTime ou encore le gabarit Simplex qui utilisent tous deux JQuery.
De même, vous pouvez créer un nouvelle feuille de style que vous ajouterez à votre gabarit de page au lieu d'utiliser l'espace réservé du module (comme ici au lieu de "Gabarit CSS-feuille de style:").
Vous verrez qu'il sera beaucoup plus facile de vous y retrouver wink
Attention : si vous utilisez le thème Simplex, ce dernier a besoin d'un JQuery récent.
Si vous n'avez pas suffisamment de compétences pour utiliser les blocs de contenu globaux, comme expliqué plus haut, le plus simple est de garder

{cms_jquery exclude='jquery-ui.min.js,jquery.ui.nestedSortable.js,jquery.json.min.js' append='uploads/simplex/js/functions.min.js'}

en fin de gabarit de PAGE, puis de placer

<script type="text/javascript" src="js/coin-slider.js"></script>{* à télécharger sur le site du plugin. Attention, corrigez le path suivant l'endroit où vous l'avez uploadé *}
<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider({ width: 600, height: 398, hoverPause: true, navigation: true, delay: 5000 });
    });
</script>

juste après (donc juste avant </body>). En effet, un script JS a besoin de charger d'abord la bibliothèque principale pour y trouver les fonctions qu'il utilise.

Dernière modification par Jean le Chauve (08/07/2014 11:26:16)

Hors ligne

 

#2 11/02/2011 19:56:15

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 080
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

je t'en prie mon cher Jean le Chauve, tu sais que tu peux toi même poster ce genre d'excellente astuce dans le blog ?:P

enfin je dis ça .... big_smile

http://www.cmsmadesimple.fr/proposer_son_article#main

Hors ligne

#3 11/02/2011 20:13:35

Jean le Chauve
Sa Seigneurie le Chauve, Comte du domaine .be
Lieu : Bruxelles
Inscription : 13/12/2007
Messages : 3 863
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

Bah, j'ai mes petites habitudes.
Trop vieux pour changer big_smile

Hors ligne

#4 12/02/2011 00:53:08

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 080
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

que tu le pste dans le forum je comprend, après tout la section s'y prête, mais un petit copier coller de rien du tout...

allez quoi big_smile

Hors ligne

#5 18/10/2011 14:22:41

miracleboy711
Membre
Inscription : 18/10/2011
Messages : 15

Re : Insérer un diaporama/slider avec le module Gallery

Salut à vous ! Je suis nouveau dans le monde du cms et je viens de voir ce topic interessant...

Mais cela fait un moment que je tourne les "explications" un peu dans tout les sens et je comprends rien !

Alors pourtant je me débrouille un peu niveau pc, mais la je comprends vraiment que dalle ! Et j'ai beau chercher partout et essayer, c'est pareil.

Alors pourriez vous reprendre toutes les etapes de la mise en ligne d'un diaporama s'il vous plaît ?

Hors ligne

#6 18/10/2011 15:48:58

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 204
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

ben tiens, j'y vais du mien aussi et je le mettrai sur le bolg quand JLC aura mis le sien!

Visible ici http://studio-avenue.fr/index.php/photos
Source du gabarit:

<div id="imageFlow"> 
        <div class="bank"> 
{foreach from=$images item=image}
    
        <a href="{$image->file}" title="{$image->titlename}"
{if $image->fields.lien.value != ''} rel="{$image->fields.lien.value}"
{/if}
>
{$image->comment}</a><br />
        {$image->titlename}

{/foreach}
            </div> 
 
        <div class="text"> 
            <div class="title">Chargement</div> 
            <div class="legend">Patientez...</div> 
        </div> 
        <div class="scrollbar"> 
            <img class="track" src="uploads/images/theorie_of_mind/sb.gif" alt=""> 
            <img class="arrow-left" src="uploads/images/theorie_of_mind/sl.gif" alt=""> 
            <img class="arrow-right" src="uploads/images/theorie_of_mind/sr.gif" alt=""> 
            <img class="bar" src="uploads/images/theorie_of_mind/sc.gif" alt=""> 
        </div> 
    </div>

Gabarit CSS-feuille de style:

#imageFlow { 
        position: relative; 
        width: 100%; 
        height: 350px; 
        left: 0%; 
        overflow: hidden; 
         
    } 
    #imageFlow .diapo { 
        position: absolute; 
        left: -1000px; 
        cursor: pointer; 
        -ms-interpolation-mode: nearest-neighbor; 
    } 
    #imageFlow .link { 
        border: dotted #fff 1px; 
        margin-left: -1px; 
        margin-bottom: -1px; 
    } 
    #imageFlow .bank { 
        visibility: hidden; 
    } 
    #imageFlow .text { 
        position: absolute; 
        left: 0px; 
        width: 100%; 
        bottom: 16%; 
        text-align: center; 
        color: #FFF; 
        font-family: verdana, arial, Helvetica, sans-serif; 
        z-index: 1000; 
    } 
    #imageFlow .title { 
        font-size: 1em; 
        font-weight: bold; 
    } 
    #imageFlow .legend { 
        font-size: 0.8em; 
    } 
    #imageFlow .scrollbar { 
        position: absolute; 
        left: 10%; 
        bottom: 10%; 
        width: 80%; 
        height: 16px; 
        z-index: 1000; 
    } 
    #imageFlow .track { 
        position: absolute; 
        left: 1%; 
        width: 98%; 
        height: 16px; 
        filter: alpha(opacity=30); 
        opacity: 0.3; 
    } 
    #imageFlow .arrow-left { 
        position: absolute; 
    } 
    #imageFlow .arrow-right { 
        position: absolute; 
        right: 0px; 
    } 
    #imageFlow .bar { 
        position: absolute; 
        height: 16px; 
        left: 25px; 
    } 

Gabarit JavaScript:

<script type="text/javascript">
/* 
   ======================================================== 
        script: image-flow 
        author: Gerard Ferrandez - [Ge1doot] 
          date: March 15, 2008 
          site: http://www.dhteumeuleu.com 
       license: CC-BY-NC - do not remove this notice 
   ======================================================== 
*/ 
 
var imf = function () { 
    /* //////////// ==== private methods ==== //////////// */ 
    var lf = 0; 
    var instances = []; 
    /* ===== custom getElementsByClass ==== */ 
    function getElementsByClass (object, tag, className) { 
        var o = object.getElementsByTagName(tag); 
        for ( var i = 0, n = o.length, ret = []; i < n; i++) 
            if (o[i].className == className) ret.push(o[i]); 
        if (ret.length == 1) ret = ret[0]; 
        return ret; 
    } 
    /* ===== crossbrowsers addEvent ==== */ 
    function addEvent (o, e, f) { 
        if (window.addEventListener) o.addEventListener(e, f, false); 
        else if (window.attachEvent) r = o.attachEvent('on' + e, f); 
    } 
    /* ===== create image reflexion ==== */ 
    function createReflexion (cont, img) { 
        var flx = false; 
        if (document.createElement("canvas").getContext) { 
            /* ---- canvas ---- */ 
            flx = document.createElement("canvas"); 
            flx.width = img.width; 
            flx.height = img.height; 
            var context = flx.getContext("2d"); 
            context.translate(0, img.height); 
            context.scale(1, -1); 
            context.drawImage(img, 0, 0, img.width, img.height); 
            flx.style.opacity = '0.35'; 
        } else { 
            /* ---- DXImageTransform ---- */ 
            flx     = document.createElement('img'); 
            flx.src = img.src; 
            flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' + 
                               'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' + 
                               (img.height * .25) + ')'; 
        } 
        /* ---- insert Reflexion ---- */ 
        flx.style.position = 'absolute'; 
        flx.style.left     = '-1000px'; 
        cont.appendChild(flx); 
        return flx; 
    } 
    /* //////////// ==== ImageFlow Constructor ==== //////////// */ 
    function ImageFlow(oCont, horizon, size, zoom, border, start, interval) { 
        this.diapos     = []; 
        this.scr        = false; 
        this.size       = size; 
        this.zoom       = zoom; 
        this.horizon    = horizon; 
        this.bdw        = border; 
        this.oCont      = oCont; 
        this.oc         = document.getElementById(oCont); 
        this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar'); 
        this.text       = getElementsByClass(this.oc,   'div', 'text'); 
        this.title      = getElementsByClass(this.text, 'div', 'title'); 
        this.legend     = getElementsByClass(this.text, 'div', 'legend'); 
        this.bar        = getElementsByClass(this.oc,   'img', 'bar'); 
        this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left'); 
        this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right'); 
        this.bw         = this.bar.width; 
        this.alw        = this.arL.width - 5; 
        this.arw        = this.arR.width - 5; 
        this.bar.parent = this.oc.parent  = this; 
        this.arL.parent = this.arR.parent = this; 
        this.view       = this.back       = -1; 
        this.time_start = start * 62.5 || 0; 
        this.time_inter = interval * 62.5 || 0; 
        this.time_out   = this.time_start; 
        this.time       = 0; 
        this.time_dir   = 1; 
        this.resize(); 
        this.oc.onselectstart = function () { return false; } 
        /* ---- create images ---- */ 
        var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a'); 
        this.NF = img.length; 
        for (var i = 0, o; o = img[i]; i++) { 
            this.diapos[i] = new Diapo(this, i, 
                                        o.href, 
                                        o.title || '- ' + i + ' -', 
                                        o.innerHTML || o.href, 
                                        o.rel || '', 
                                        o.target || '_self' 
            ); 
        } 
        /* ==== add mouse wheel events ==== */ 
        if (window.addEventListener) 
            this.oc.addEventListener('DOMMouseScroll', function(e) { 
                this.parent.scroll(-e.detail); 
                return false; 
            }, false); 
        this.oc.onmousewheel = function () { 
            this.parent.scroll(event.wheelDelta); 
            return false; 
        } 
        /* ==== scrollbar drag N drop ==== */ 
        this.bar.onmousedown = function (e) { 
            if (!e) e = window.event; 
            var scl = e.screenX - this.offsetLeft; 
            var self = this.parent; 
            /* ---- move bar ---- */ 
            this.parent.oc.onmousemove = function (e) { 
                if (!e) e = window.event; 
                self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px'; 
                self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * (self.NF-1)); 
                if (self.view != self.back) self.calc(); 
                return false; 
            } 
            /* ---- release scrollbar ---- */ 
            this.parent.oc.onmouseup = function (e) { 
                self.oc.onmousemove = null; 
                return false; 
            } 
            return false; 
        } 
        /* ==== right arrow ==== */ 
        this.arR.onclick = this.arR.ondblclick = function () { 
            if (this.parent.view < this.parent.NF - 1) 
                this.parent.calc(1); 
        } 
        /* ==== Left arrow ==== */ 
        this.arL.onclick = this.arL.ondblclick = function () { 
            if (this.parent.view > 0) 
                this.parent.calc(-1); 
        } 
    } 
    /* //////////// ==== ImageFlow prototype ==== //////////// */ 
    ImageFlow.prototype = { 
        /* ==== targets ==== */ 
        calc : function (inc) { 
            if (inc) { 
                this.view += inc; 
                /* ---- stop autoscroll ---- */ 
                this.time = 0; 
                this.time_out = this.time_start; 
            } 
            var tw = 0; 
            var lw = 0; 
            var o = this.diapos[this.view]; 
            if (o && o.loaded) { 
                /* ---- reset ---- */ 
                var ob = this.diapos[this.back]; 
                if (ob && ob != o) { 
                    ob.img.className = 'diapo'; 
                    ob.z1 = 1; 
                } 
                /* ---- update legend ---- */ 
                this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild); 
                this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild); 
                /* ---- update hyperlink ---- */ 
                if (o.url) { 
                    o.img.className = 'diapo link'; 
                    window.status = 'hyperlink: ' + o.url; 
                } else { 
                    o.img.className = 'diapo'; 
                    window.status = ''; 
                } 
                /* ---- calculate target sizes & positions ---- */ 
                if(o.r < 1) o.w1 = Math.min(o.iw, this.wh * .8, Math.round(this.ht * this.horizon / o.r)) * o.z1; 
                else o.w1 = Math.round(this.ht * this.horizon / o.r) * o.z1; 
                var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5); 
                var x = x0 + o.w1 + this.bdw; 
                for (var i = this.view + 1, o; o = this.diapos[i]; i++) { 
                    if (o.loaded) { 
                        o.x1 = x; 
                        o.w1 = (this.ht / o.r) * this.size; 
                        x   += o.w1 + this.bdw; 
                        tw  += o.w1 + this.bdw; 
                    } 
                } 
                x = x0 - this.bdw; 
                for (var i = this.view - 1, o; o = this.diapos[i]; i--) { 
                    if (o.loaded) { 
                        o.w1 = (this.ht / o.r) * this.size; 
                        o.x1 = x - o.w1; 
                        x   -= o.w1 + this.bdw; 
                        tw  += o.w1 + this.bdw; 
                        lw  += o.w1 + this.bdw; 
                    } 
                } 
                /* ---- move scrollbar ---- */ 
                if (!this.scr && tw) { 
                    var r = (this.ws - this.alw - this.arw - this.bw) / tw; 
                    this.bar.style.left = Math.round(this.alw + lw * r) + 'px'; 
                } 
                /* ---- save preview view ---- */ 
                this.back = this.view; 
            } 
        }, 
        /* ==== mousewheel scrolling ==== */ 
        scroll : function (sc) { 
            if (sc < 0) { 
                if (this.view < this.NF - 1) this.calc(1); 
            } else { 
                if (this.view > 0) this.calc(-1); 
            } 
        }, 
        /* ==== resize  ==== */ 
        resize : function () { 
            this.wh = this.oc.clientWidth; 
            this.ht = this.oc.clientHeight; 
            this.ws = this.scrollbar.offsetWidth; 
            this.calc(); 
            this.run(true); 
        }, 
        /* ==== animation loop ==== */ 
        run : function (res) { 
            /* ---- move all images ---- */ 
            var i = this.NF; 
            while (i--) this.diapos[i].move(res); 
            /* ---- autoscroll ---- */ 
            if (this.time_out) { 
                this.time++; 
                if (this.time > this.time_out) { 
                    this.view += this.time_dir; 
                    if (this.view >= this.NF || this.view < 0) { 
                        this.time_dir = -this.time_dir; 
                        this.view += this.time_dir * 2; 
                    } 
                    this.calc(); 
                    this.time = 0; 
                    this.time_out = this.time_inter; 
                } 
            } 
        } 
    } 
    /* //////////// ==== Diapo Constructor ==== //////////// */ 
    Diapo = function (parent, N, src, title, text, url, target) { 
        this.parent        = parent; 
        this.loaded        = false; 
        this.title         = title; 
        this.text          = text; 
        this.url           = url; 
        this.target        = target; 
        this.N             = N; 
        this.img           = document.createElement('img'); 
        this.img.src       = src; 
        this.img.parent    = this; 
        this.img.className = 'diapo'; 
        this.x0            = this.parent.oc.clientWidth; 
        this.x1            = this.x0; 
        this.w0            = 0; 
        this.w1            = 0; 
        this.z1            = 1; 
        this.z2            = 0; 
        this.img.parent    = this; 
        this.img.onclick   = function() { this.parent.click(); } 
        this.parent.oc.appendChild(this.img); 
        /* ---- display external link ---- */ 
        if (url) { 
            this.img.onmouseover = function () { this.className = 'diapo link';    } 
            this.img.onmouseout  = function () { this.className = 'diapo'; } 
        } 
    } 
    /* //////////// ==== Diapo prototype ==== //////////// */ 
    Diapo.prototype = { 
        /* ==== HTML rendering ==== */ 
        move : function (res) { 
            var that = this.parent; 
            if (this.loaded) { 
                var sx = this.x1 - this.x0; 
                var sw = this.w1 - this.w0; 
                if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) { 
                    /* ---- paint only when moving ---- */ 
                    this.x0 += sx * .1; 
                    this.w0 += sw * .1; 
                    var h = this.w0 * this.r; 
                    this.z2 = (that.ht * that.horizon + 1 - this.z2 - h) *.5; 
                    if (this.x0 < that.wh && this.x0 + this.w0 > 0) { 
                        /* ---- paint only visible images ---- */ 
                        this.visible = true; 
                        var o = this.img.style; 
                        /* ---- diapo ---- */ 
                        o.left   = Math.round(this.x0) + 'px'; 
                        o.bottom = Math.floor(that.ht * (1 - that.horizon) + this.z2) + 'px'; 
                        o.width  = Math.round(this.w0) + 'px'; 
                        o.height = Math.floor(h) + 'px'; 
                        /* ---- reflexion ---- */ 
                        if (this.flx) { 
                            var o = this.flx.style; 
                            o.left   = Math.round(this.x0) + 'px'; 
                            o.top    = Math.ceil(that.ht * that.horizon + 1 - this.z2) + 'px'; 
                            o.width  = Math.round(this.w0) + 'px'; 
                            o.height = Math.floor(h) + 'px'; 
                        } 
                    } else { 
                        /* ---- disable invisible images ---- */ 
                        if (this.visible) { 
                            this.visible = false; 
                            this.img.style.width = '0px'; 
                            if (this.flx) this.flx.style.width = '0px'; 
                        } 
                    } 
                } 
            } else { 
                /* ==== image onload ==== */ 
                if (this.img.complete && this.img.width) { 
                    /* ---- get size image ---- */ 
                    this.iw     = this.img.width; 
                    this.ih     = this.img.height; 
                    this.r      = this.ih / this.iw; 
                    this.loaded = true; 
                    /* ---- create reflexion ---- */ 
                    this.flx    = createReflexion(that.oc, this.img); 
                    if (that.view < 0) that.view = this.N; 
                    else if (this.N == 0) that.view = this.N; 
                    that.calc(); 
                } 
            } 
        }, 
        /* ==== diapo onclick ==== */ 
        click : function () { 
            /* ---- stop autoscroll ---- */ 
            this.parent.time = 0; 
            this.parent.time_out = this.parent.time_start; 
            if (this.parent.view == this.N) { 
                /* ---- click on zoomed diapo ---- */ 
                if (this.url) { 
                    /* ---- open hyperlink ---- */ 
                    window.open(this.url, this.target); 
                } else { 
                    /* ---- zoom in/out ---- */ 
                    this.z1 = this.z1 == 1 ? this.parent.zoom : 1; 
                    this.parent.calc(); 
                } 
            } else { 
                /* ---- select diapo ---- */ 
                this.parent.view = this.N; 
                this.parent.calc(); 
            } 
            return false; 
        } 
    } 
    /* //////////// ==== public methods ==== //////////// */ 
    return { 
        /* ==== initialize script ==== */ 
        create : function (div, horizon, size, zoom, border, start, interval) { 
            /* ---- instanciate imageFlow ---- */ 
            var load = function () { 
                var loaded = false; 
                var i = instances.length; 
                while (i--) if (instances[i].oCont == div) loaded = true; 
                if (!loaded) { 
                    /* ---- push new imageFlow instance ---- */ 
                    instances.push( 
                        new ImageFlow(div, horizon, size, zoom, border, start, interval) 
                    ); 
                    /* ---- init script (once) ---- */ 
                    if (!imf.initialized) { 
                        imf.initialized = true; 
                        /* ---- window resize event ---- */ 
                        addEvent(window, 'resize', function () { 
                            var i = instances.length; 
                            while (i--) instances[i].resize(); 
                        }); 
                        /* ---- stop drag N drop ---- */ 
                        addEvent(document.getElementById(div), 'mouseout', function (e) { 
                            if (!e) e = window.event; 
                            var tg = e.relatedTarget || e.toElement; 
                            if (tg && tg.tagName == 'HTML') { 
                                var i = instances.length; 
                                while (i--) instances[i].oc.onmousemove = null; 
                            } 
                            return false; 
                        }); 
                        /* ---- set interval loop ---- */ 
                        setInterval(function () { 
                            var i = instances.length; 
                            while (i--) instances[i].run(); 
                        }, 16); 
                    } 
                } 
            } 
            /* ---- window onload event ---- */ 
            addEvent(window, 'load', function () { load(); }); 
        } 
    } 
}(); 
 
/* ==== create imageFlow ==== */ 
//          div ID, horizon, size, zoom, border, autoscroll_start, autoscroll_interval 
imf.create("imageFlow", .75, 0.15, 1.8, 20, 8, 4); 
</script>

et voilà.
Sur http://www.dhteumeuleu.com, il y en a pleins d'autres!


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.
Module EasyList. La relève de ListIt2.
Module UsersGuide. Pour vos utilisateurs, réunir l'aide en un seul endroit.

C'est en se plantant qu'on devient cultivé.

Hors ligne

#7 18/10/2011 19:11:30

miracleboy711
Membre
Inscription : 18/10/2011
Messages : 15

Re : Insérer un diaporama/slider avec le module Gallery

Merci de répondre au déterrement de sujet !

En revanche quand je dis que je comprends rien, c'est à dire que je ne sais même pas quoi faire de tout ces codes !!

Faut il crée un gabarit et associé une feuille css ou un truc dans le genre ?

J'ai reussi à mettre un diaporama grace au site " comboost". C'etait assé simple parcque je met mes photos sur leur site, je copie une adresse et voila c'est fini!
Mais bon ca fait pas tres professionnel vu qu'il y'a leur nom un peu partout dessus !
J'aimerais en faire un comme les vôtres, mais comment ??

Hors ligne

#8 18/10/2011 20:19:46

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 204
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

Mince, j'avais pas vu la date...rhooo le vilain UP!
Bon Miracleboy, commence par installer le module Gallery, tu comprendra tout de suite j'en suis sûr.


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.
Module EasyList. La relève de ListIt2.
Module UsersGuide. Pour vos utilisateurs, réunir l'aide en un seul endroit.

C'est en se plantant qu'on devient cultivé.

Hors ligne

#9 19/10/2011 09:11:43

miracleboy711
Membre
Inscription : 18/10/2011
Messages : 15

Re : Insérer un diaporama/slider avec le module Gallery

Bon apres de longue recherches, j'ai capté que le module Gallery se trouve dans le logiciel même, heureusement  qu'il y'a des topics à droite à gauche !

Bon maintenant je comprends les codes que vous mettez et où les mettre. Mais par contre ca fait un moment que j'essaye de concretement le transformer en diaporama sur mon site, mais la, je bloque. Je sais pas comment le traduire en gabarit ou autre !

Hors ligne

#10 21/10/2011 07:52:25

miracleboy711
Membre
Inscription : 18/10/2011
Messages : 15

Re : Insérer un diaporama/slider avec le module Gallery

Allé les gars s'il vous plaît laissez moi pas tomber maintenant, bon c'est vrai que je pars de loin mais bon un petit coup de pouce !!

Hors ligne

#11 21/10/2011 07:58:13

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 204
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

miracleboy711,
il n'y a pas de miracle!
tu nous demande de te former à CMSMS.
Il faut que tu lises la doc et que tu apprennes les bases. Tout les modules s'utilisent selon la même logique :
gabarit, feuille de style et appelle avec balise smarty.
Dans la page documentation de ce site, tu trouveras de l'aide pour commencer à te former.

Si tu as déjà parcouru la doc, le wiki et les guides, pose ta question précisément, avec des termes techniques liés à l'utilisation de CMSMS, parce que là, je ne comprends pas ta question.


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.
Module EasyList. La relève de ListIt2.
Module UsersGuide. Pour vos utilisateurs, réunir l'aide en un seul endroit.

C'est en se plantant qu'on devient cultivé.

Hors ligne

#12 21/10/2011 08:13:37

miracleboy711
Membre
Inscription : 18/10/2011
Messages : 15

Re : Insérer un diaporama/slider avec le module Gallery

Ben ma question en faite elle est ultra simple, c'est comment par étape, je peux inserer le coinslider par exemple sur mon site. Comment le paramétrer.
Je comprends en revanche que la réponse soit longue et compliquée à donner.

La doc, je sais pas vraiment où la trouver, mais je vais chercher. Packe à la base, mon site est fait par un pro, mais le probleme, c'est que j'avais pas penser qu'un slider pouvait être nécessaire.

Et aujourd'hui, j'en ai besoin et le problème c'est que ca coute trop cher pour que je remette encore dedans pour faire un truc qui ne semble pas tres tres complexe une fois que l'on a saisi la logique.

Je vais donc essayer de regarder plus attentivement, pour éventuellement avoir une question moins large à poser si j'ai bien compris.

Merci quand même et ptetre à bientôt donc.

Hors ligne

#13 21/10/2011 08:34:13

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 204
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

pour trouver la doc, il y a juste là, au-dessus, dans la barre de menu du forum un lien qui s'appelle :
Documentation
Tu as aussi la documentation du module Gallery dans l'admin de ton site.


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.
Module EasyList. La relève de ListIt2.
Module UsersGuide. Pour vos utilisateurs, réunir l'aide en un seul endroit.

C'est en se plantant qu'on devient cultivé.

Hors ligne

#14 21/10/2011 08:55:30

miracleboy711
Membre
Inscription : 18/10/2011
Messages : 15

Re : Insérer un diaporama/slider avec le module Gallery

Merci pour l'info, je vais etudier tout ca.

C'est dommage quand même qu'il y'ai pas de tutos pour mettre en place des diaporamas ! Si j'y parviens ptetre que j'en ferais un !

Hors ligne

#15 25/10/2011 09:36:56

miracleboy711
Membre
Inscription : 18/10/2011
Messages : 15

Re : Insérer un diaporama/slider avec le module Gallery

HEY HEY, salut les jeunes ! Bon j'ai réussi à intégrer votre slide-show ! Et ducoup j'ai des questions plus précises maintenant !

D'abord le lien de ma page pour que vous puissiez voir ce que ca donne :

http://www.dauphine-stores.fr/test-2.htm

La première c'est comment je peux changer la couleur de l'écriture sous la photo ? et pourquoi je n'ai pas la barre avec la fleche comme dans le site "studio" ? ( c'est parck'elle est blanche j'imagine )

Hors ligne

#16 25/10/2011 10:29:58

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 204
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

salut,
il n'y a pas que des jeunes ici smile
Bravo pour l'intégration...tu vois, quand tu veux... tongue

1) la couleur répond à la CSS ligne 23 du fichier APPLE.css (#imageFlow .text)
2) les images sont absentes car tu n'as pas ajusté le chemin des images dans le gabarit : sb.gif, sl.gif, sr.gif, sc.gif

Firebug est ton ami big_smile


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.
Module EasyList. La relève de ListIt2.
Module UsersGuide. Pour vos utilisateurs, réunir l'aide en un seul endroit.

C'est en se plantant qu'on devient cultivé.

Hors ligne

#17 25/10/2011 11:02:15

miracleboy711
Membre
Inscription : 18/10/2011
Messages : 15

Re : Insérer un diaporama/slider avec le module Gallery

Oué alors au vue de ton commentaire, il  me manque encore pas mal de truc ! Bon je viens de trouver les codes couleurs donc ca c'est tout bon merci !

Par contre, pour la reponse n°2, la j'ai rien compris donc pas de question precise. Pourrais-tu grossièrement expliquer ca que je puisse chercher un peu partout pour traduire ?!

Hors ligne

#18 25/10/2011 11:09:17

miracleboy711
Membre
Inscription : 18/10/2011
Messages : 15

Re : Insérer un diaporama/slider avec le module Gallery

Je vous met le lien qd même pour que ceux que ca intéresse puisse voir le résultat :

http://www.dauphine-stores.fr/realisations.htm

Hors ligne

#19 25/10/2011 11:15:09

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 204
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

le problème, c'est que j'ai du mal a évaluer ton niveau de connaissance...
quand je dis 'ajuster le chemin des images dans le gabarit', ça veut dire :
1)aller dans gallery
2)ouvrir le gabarit que tu utilises
3)repérer là où les images manquantes sont appelées :

<img class="track" src="uploads/images/theorie_of_mind/sb.gif" alt=""> 
            <img class="arrow-left" src="uploads/images/theorie_of_mind/sl.gif" alt=""> 
            <img class="arrow-right" src="uploads/images/theorie_of_mind/sr.gif" alt=""> 
            <img class="bar" src="uploads/images/theorie_of_mind/sc.gif" alt=""> 

4)Comparer le chemin de ces images avec l'endroit où tu les as réellement uploadées.
5)Modifier ce chemin dans ton gabarit de manière à pointer au bon endroit.

Normalement, ça ne devrait pas te poser de problème, ce sont les bases du HTML.

J'espère que c'est suffisamment clair.

Bon courage.


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.
Module EasyList. La relève de ListIt2.
Module UsersGuide. Pour vos utilisateurs, réunir l'aide en un seul endroit.

C'est en se plantant qu'on devient cultivé.

Hors ligne

#20 25/10/2011 13:14:24

miracleboy711
Membre
Inscription : 18/10/2011
Messages : 15

Re : Insérer un diaporama/slider avec le module Gallery

Impeccable. Je vais voir avec ca.
C'est grace à ces indications que petit à petit je comprends plus le truc.
Et pour répondre à ta question, mon niveau de connaissance dans le CMS et tres proche du zero!

Mais vu que je trifouille pas mal d'autre truc, j'arrive ( même si c'est long ! ) à appliquer le genre d'infos que tu viens de me donner.

Merci en tout cas !

Hors ligne

#21 25/10/2011 15:04:05

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 080
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

Les membres du forum ne font pas de formation gratuite, vous voulez apprendre à bien utiliser Cms Made Simple ? formez vous avec nos guides

Hors ligne

#22 24/08/2012 16:50:13

Egareg
Membre
Lieu : Blainville sur Orne
Inscription : 21/04/2011
Messages : 5
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

jissey a écrit :

ben tiens, j'y vais du mien aussi et je le mettrai sur le bolg quand JLC aura mis le sien!

Visible ici http://studio-avenue.fr/index.php/photos


et voilà.
Sur http://www.dhteumeuleu.com, il y en a pleins d'autres!

Bonjour,

J'aimerais intégré sur mon site ce diapo photo.
Malheureusement, le code fourni plus haut ne semble pas passer chez moi (taille et position notamment).

Dans le module Gallery, j'ai créé un gabarit avec les différents bouts de code. OK
J'ai créé une galerie utilisant ce gabarit par défaut. OK
J'appelle la galerie sur ma page avec {Gallery dir='Accueil'}. Ca s'affiche, mais le résultat est loin d'être satisfaisant... Cf. http://www.coudelle.com/index.php?page= … it_gallery

Vu le résultat, j'ai affecté le gabarit par défaut à cette galerie et j'appelle la galerie avec {Gallery dir='Accueil' template='diaporama_accueil'}. Le résultat est identique. 

J'ai donc repris le code source sur dhteumeuleu.com et j'ai intégré le code dans une page. Le résultat est meilleur, mais pas encore satisfaisant (titre de la page et texte masqué par le diaporama) : Cf. http://www.coudelle.com/index.php?page= … hteumeuleu

Un lecteur du forum a-t-il déjà utilisé ce gabarit et pourrait-il me guider sur les pistes à creuser pour obtenir un résultat satisfaisant ?

Le site concerné : www.coudelle.com
Je souhaite mettre le diapo en bas de ma page d'accueil, comme l'auteur a pu le faire sur http://studio-avenue.fr/index.php/photos

Je soupçonne les <div> de n'en faire qu'à leur tête... Quelqu'un a-t-il déjà eu des problèmes similaires ?

Merci d'avance !

Hors ligne

#23 27/08/2012 22:40:48

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 204
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

Bonsoir,
d'abord, il faut absolument enlever le lien vers l'admin en pied de page, c'est pas la peine de faciliter la tâches aux vilains pas beaux!
Ensuite, tu peux changer le nom du dossier admin, c'est mieux aussi. Et surtout, mettre à jour CMSMS, qui vu le formulaire de login me semble d'un autre âge, et ici, comme c'est signalé à plusieurs endroits, on ne supporte que les version 1.11.x.
Bon, sinon, pour ton problème, c'est juste une histoire de CSS:
remplace position:absolute par position:relative dans #imageFlow.

Autre chose, tes photos sont beaucoup trop volumineuses, il faute les travailler à la bonne taille avant de les mettre sur le site.
Bonne continuation.


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.
Module EasyList. La relève de ListIt2.
Module UsersGuide. Pour vos utilisateurs, réunir l'aide en un seul endroit.

C'est en se plantant qu'on devient cultivé.

Hors ligne

#24 28/08/2012 10:50:07

Egareg
Membre
Lieu : Blainville sur Orne
Inscription : 21/04/2011
Messages : 5
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

Merci beaucoup pour ta réponse.

Concernant la version de CMSMS, je n'ai pas trop le choix... car mon serveur est toujours en PHP4 ! Je suis donc en version 1.6.10, le max avec PHP4. Et si l'interface d'admin n'est pas très jolie, c'est parce que j'utilise le thème basique qui se charge plus vite : pas besoin de fioritures pour administrer le site.  wink
Bonne remarque pour la taille des photos, il faut que je prenne le temps de corriger ça. C'est vrai que cela ne sert à rien d'avoir trop gros.

J'ai remplacé absolute par relative pour la position, mais ce n'est pas encore ça...
Je n'ai jamais trop aimé fixer les positions en CSS (surtout en valeur absolue), mais je pense qu'il va falloir que je m'y mette pour de bon !

Ca me rassure de savoir que ce n'est "que" du CSS. Je vais tâtonner pour arriver aux bonnes valeurs et avoir un diapo qui présente bien.

Hors ligne

#25 28/08/2012 14:29:51

Ouik
Modérateur
Lieu : Bourgogne
Inscription : 08/01/2008
Messages : 553
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

En fait si, tu as le choix de passer sur un hébergeur moderne, parce que bon php4, faut pas abuser, hein.

La remarque concerne le lien vers l'administration, pas l'interface d'administration elle-même : donc, il faut virer le lien vers l'admin dans le bas de page.

bon courage pour la suite, tu vas y arriver.

Hors ligne

Pied de page des forums

  Flux Rss Twitter FaceBook
fermer

Concours pour le Geekmoot 2015

Certes, ce n'est pas encore Nöel mais nous avons déjà pensé a vous ! ça vous dirais de participer au geekmoot 2015 en mars prochain à Gand (Belgique) ? l'association vous offre les pass 3 jours :) [lire la suite]