[Laure_21]

#~~~~~ 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.