Forum CMS Made Simple FR
Insérer un diaporama/slider avec le module Gallery - 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 : Insérer un diaporama/slider avec le module Gallery (/thread-975.html)

Pages : 1 2

Insérer un diaporama/slider avec le module Gallery - Jean le Chauve - 11/02/2011

Je me suis décidé enfin à le tester Big GrinSmile
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 :
Code :
<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:
Code :
/*
    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:
Code :
<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
Code :
{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
Code :
<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.

Insérer un diaporama/slider avec le module Gallery - bess - 11/02/2011

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 ?Tongue

enfin je dis ça .... Big Grin

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

Insérer un diaporama/slider avec le module Gallery - Jean le Chauve - 11/02/2011

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

Insérer un diaporama/slider avec le module Gallery - bess - 12/02/2011

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 Grin

Insérer un diaporama/slider avec le module Gallery - miracleboy711 - 18/10/2011

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 ?

Insérer un diaporama/slider avec le module Gallery - jissey - 18/10/2011

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:
Code :
<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:
Code :
#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:
Code :
<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!

Insérer un diaporama/slider avec le module Gallery - miracleboy711 - 18/10/2011

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 ??

Insérer un diaporama/slider avec le module Gallery - jissey - 18/10/2011

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.

Insérer un diaporama/slider avec le module Gallery - miracleboy711 - 19/10/2011

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 !

Insérer un diaporama/slider avec le module Gallery - miracleboy711 - 21/10/2011

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 !!

Insérer un diaporama/slider avec le module Gallery - jissey - 21/10/2011

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.

Insérer un diaporama/slider avec le module Gallery - miracleboy711 - 21/10/2011

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.

Insérer un diaporama/slider avec le module Gallery - jissey - 21/10/2011

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.

Insérer un diaporama/slider avec le module Gallery - miracleboy711 - 21/10/2011

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 !

Insérer un diaporama/slider avec le module Gallery - miracleboy711 - 25/10/2011

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 )

Insérer un diaporama/slider avec le module Gallery - jissey - 25/10/2011

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 Grin

Insérer un diaporama/slider avec le module Gallery - miracleboy711 - 25/10/2011

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 ?!

Insérer un diaporama/slider avec le module Gallery - miracleboy711 - 25/10/2011

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

Insérer un diaporama/slider avec le module Gallery - jissey - 25/10/2011

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 :
Code :
<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.

Insérer un diaporama/slider avec le module Gallery - miracleboy711 - 25/10/2011

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 !

Insérer un diaporama/slider avec le module Gallery - bess - 25/10/2011

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

Insérer un diaporama/slider avec le module Gallery - Egareg - 24/08/2012

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=diapo_gabarit_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=diapo_dhteumeuleu

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é : http://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 !

Insérer un diaporama/slider avec le module Gallery - jissey - 27/08/2012

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.

Insérer un diaporama/slider avec le module Gallery - Egareg - 28/08/2012

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.

Insérer un diaporama/slider avec le module Gallery - Ouik - 28/08/2012

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.