[RESOLU]Incorporer un nouveau gabarit dans le module Gallery

[RESOLU]Incorporer un nouveau gabarit dans le module Gallery - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [RESOLU]Incorporer un nouveau gabarit dans le module Gallery (/thread-3259.html)

[RESOLU]Incorporer un nouveau gabarit dans le module Gallery - Laure_21 - 01/07/2014

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.10
#~ Url du site : local
#~ Hébergeur / Soft : wampserver
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.10
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.4
#~ MenuManager: 1.8.6
#~ MicroTiny: 1.2.6
#~ ModuleManager: 1.5.5
#~ News: 2.14.2
#~ Search: 1.7.11
#~ ThemeManager: 1.1.8
#~ Gallery: 1.6.1
#~ Showtime: 3.4
#~ CGExtensions: 1.39
#~ MleCMS: 1.11.4
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 2000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.2.4
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ memory_limit: 128M
#~ max_execution_time: 30
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 8M
#~ upload_max_filesize: 2M
#~ session_save_path: c:/wamp/tmp (0777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.1.36
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour,

J'aimerai intégrer un slide dans mon site et pour cela je voudrais utiliser le module Gallery. J'ai lu l'article suivant http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3229 mais j'avoue je ne comprends pas ce qu'il faut mettre dans la source du gabarit.
Le slider que je voudrais intégrer est le suivant : http://cssglobe.com/lab/easyslider1.7/01.html

Pour le moment j'ai créé un nouveau gabarit où j'y ai inscrit ceci :

Source du gabarit :

Code :
[== Indéfini ==]

<div id='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 :
[== CSS ==]

img{border:none;}

    pre{

        display:block;

        font:12px "Courier New", Courier, monospace;

        padding:10px;    

        margin:.5em 0;

        width:674px;

        }    

    /* image replacement */

        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{

            margin:0;

            padding:0;

            display:block;

            overflow:hidden;

            text-indent:-8000px;

            }

    /* // image replacement */

    #container{    

        margin:0 auto;

        position:relative;

        text-align:left;

        width:696px;

        background:#fff;        

        margin-bottom:2em;

        }                    

    #content{

        position:relative;

        }            

/* Easy Slider */

    #slider ul, #slider li,

    #slider2 ul, #slider2 li{

        margin:0;

        padding:0;

        list-style:none;

        }

    #slider2{margin-top:1em;}

    #slider li, #slider2 li{ 

        /* 

            define width and height of list item (slide)

            entire slider area will adjust according to the parameters provided here

        */ 

        width:696px;

        height:241px;

        overflow:hidden; 

        }    

    #prevBtn, #nextBtn,

    #slider1next, #slider1prev{ 

        display:block;

        width:30px;

        height:77px;

        position:absolute;

        left:-30px;

        top:71px;

        z-index:1000;

        }    

    #nextBtn, #slider1next{ 

        left:696px;

        }                                                        

    #prevBtn a, #nextBtn a,

    #slider1next a, #slider1prev a{  

        display:block;

        position:relative;

        width:30px;

        height:77px;

        background:url(img/btn_prev.gif) no-repeat 0 0;    

        }    

    #nextBtn a, #slider1next a{ 

        background:url(img/btn_next.gif) no-repeat 0 0;    

        }    

    /* numeric controls */    

    ol#controls{

        margin:1em 0;

        padding:0;

        height:28px;    

        }

    ol#controls li{

        margin:0 10px 0 0; 

        padding:0;

        float:left;

        list-style:none;

        height:28px;

        line-height:28px;

        }

    ol#controls li a{

        float:left;

        height:28px;

        line-height:28px;

        border:1px solid #ccc;

        background:#DAF3F8;

        color:#555;

        padding:0 10px;

        text-decoration:none;

        }

    ol#controls li.current a{

        background:#5DC9E1;

        color:#fff;

        }

    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

Gabarit JavaScript :

Code :
[== JavaScript ==]

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/easySlider1.7.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){    

            $("#slider").easySlider({

                auto: true, 

                continuous: true

            });

        });    

    </script>

Evidemment cela ne marche pas, j'obtiens seulement mes images les unes en dessous des autres.
Pouvez-vous m'indiquer ce que je dois changer ou alors me dire où m'orienter car je suis perdue..
Mes connaissances se limitent au html et css.

D'avance merci.

[RESOLU]Incorporer un nouveau gabarit dans le module Gallery - bess - 01/07/2014

je regarde ce midi ce qu'il se passe car à priori tu as un template cohérent.

sans doute une petite erreur de rien du tout.

[RESOLU]Incorporer un nouveau gabarit dans le module Gallery - pierrepercee - 02/07/2014

Bonjour,

Si toujours en panne, vous pouvez vérifier que les liens vers vos fichiers Javascript sont bons... Sur Firefox clic droit->code source de la page puis cliquer sur le lien pour voir s'il monte bien le fichier...
Sinon il faut sans doute aussi modifier le gabarit pour y intégrer une liste puisque les css du slider fonctionnent avec:

Code :
[== Indéfini ==]

<div id='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>

devient

Code :
[== Indéfini ==]

<div id='slider'><ul>

{foreach from=$images item=image}

  <li>  <a href="#"><img class="img-candidat" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a></li>

{/foreach}

</ul>

</div>

Bon courage !

[RESOLU]Incorporer un nouveau gabarit dans le module Gallery - Laure_21 - 02/07/2014

Bonjour,
et merci pour vos messages!
J'ai regardé les liens de mes fichiers JS et ils sont bon. J'ai changé la source du gabarit par ce que vous m'avez donné et cela marche mieux mais c'est encore un grand n'importe quoi... Les images défilent mais deviennent de plus en plus petite et elles ne sont pas bien cadrées.
J'ai mis le cms en ligne pour que vous y voyez un peu plus clair. Le diapo est disponible ici : http://v2.domaine-berthaut.com/index.php?page=accueil
Je vais continuer de chercher, c'est peut être qu'une histoire de css maintenant mais j'en doute alors si vous pouviez encore m'aider un petit peu svp
D'avance merci.

[RESOLU]Incorporer un nouveau gabarit dans le module Gallery - pierrepercee - 02/07/2014

Essayez déjà ça :

Code :
[== HTML ==]

  <div class="main-main util-clearfix">

            <pre><div id='slider'><ul>

  <li>  <a href="#"><img class="img-candidat" src="uploads/images/Gallery/diaporama/image3.jpg" alt="image3.jpg" /></a></li>

  <li>  <a href="#"><img class="img-candidat" src="uploads/images/Gallery/diaporama/image5.jpg" alt="image5.jpg" /></a></li>

  <li>  <a href="#"><img class="img-candidat" src="uploads/images/Gallery/diaporama/image2.jpg" alt="image2.jpg" /></a></li>

  <li>  <a href="#"><img class="img-candidat" src="uploads/images/Gallery/diaporama/image1.jpg" alt="image1.jpg" /></a></li>

  <li>  <a href="#"><img class="img-candidat" src="uploads/images/Gallery/diaporama/image4.jpg" alt="image4.jpg" /></a></li>

</ul>

</div><br />francais anglais</pre>

à remplacer par:

Code :
[== HTML ==]

  <div class="main-main util-clearfix">

           <div id='slider'><ul>

  <li>  <a href="#"><img class="img-candidat" src="uploads/images/Gallery/diaporama/image3.jpg" alt="image3.jpg" /></a></li>

  <li>  <a href="#"><img class="img-candidat" src="uploads/images/Gallery/diaporama/image5.jpg" alt="image5.jpg" /></a></li>

  <li>  <a href="#"><img class="img-candidat" src="uploads/images/Gallery/diaporama/image2.jpg" alt="image2.jpg" /></a></li>

  <li>  <a href="#"><img class="img-candidat" src="uploads/images/Gallery/diaporama/image1.jpg" alt="image1.jpg" /></a></li>

  <li>  <a href="#"><img class="img-candidat" src="uploads/images/Gallery/diaporama/image4.jpg" alt="image4.jpg" /></a></li>

</ul>

</div><br />francais anglais

La suppression de la balise <pre> me semble une bonne idée dans un premier temps... A faire dans votre gabarit ou dans la page...
Bonne chance !

[RESOLU]Incorporer un nouveau gabarit dans le module Gallery - bess - 02/07/2014

trouvé via le debugguer de Chrome : tu as deux 404

http://v2.domaine-berthaut.com/modules/Gallery/templates/css/[[root_url]]/uploads/NCleanBlue/btn_prev.gif
http://v2.domaine-berthaut.com/modules/Gallery/templates/css/[[root_url]]/uploads/NCleanBlue/btn_next.gif

en cause le [[root_url]] qui est présent ici dans accueil.css:

Code :
#slider1next a, #slider1prev a{  

        display:block;

        position:relative;

        width:30px;

        height:77px;

        background:url([[root_url]]/uploads/NCleanBlue/btn_prev.gif) no-repeat 0 0;    

        }

il n'a pas été interprété par le moteur de rendu Smarty car c'est un fichier plat externe a cmsms...

et je te confirme que le <pre> casse quelque chose... A voir si c'est l'unique erreur qu'il te reste...

[RESOLU]Incorporer un nouveau gabarit dans le module Gallery - pierrepercee - 02/07/2014

La bonne idée dans bien des cas c'est bien entendu de copier les styles concernés dans une nouvelle feuille de style interne que l'on attache ensuite au gabarit. Évidemment il faut supprimer le lien vers la feuille de style externe...

Smile

[RESOLU]Incorporer un nouveau gabarit dans le module Gallery - Laure_21 - 02/07/2014

J'ai essayer d'intégrer le code HTML dans la source du gabarit ou dans le contenu de la page ... bref ça ne marche jamais.
Du coup j'ai créé un gabarit et une feuille de style à part (c'est dommage car cela n'utilise plus le module Gallery...)
Ça donne cela: http://v2.domaine-berthaut.com/index.php?page=diapo-test
Je sens que je suis proche du but mais je n'arrive pas à "contenir" les photos.
Je continue de chercher, d'essayer et de bidouiller mais si vous avez encore des idées je suis preneuse !
D'avance merci.

[RESOLU]Incorporer un nouveau gabarit dans le module Gallery - Laure_21 - 02/07/2014

Je ne sais pas trop comment mais à force de persévérance et de bidouillage avec le css, j'ai finalement réussi !
Malheureusement je n'utilise pas le module Gallery mais c'est pas grave, j'ai le rendu que je souhaitais.
Encore merci pour votre aide.