Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.11.1
#~ Url du site : localhost
#~ Hébergeur / Soft : amen
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.1
#~ Installed Modules:
#~ CMSMailer: 5.2.1
#~ CMSPrinting: 1.0.3
#~ FileManager: 1.4.0
#~ MenuManager: 1.8.3
#~ MicroTiny: 1.2.3
#~ ModuleManager: 1.5.5
#~ News: 2.12.8
#~ Search: 1.7.7
#~ ThemeManager: 1.1.7
#~ FormBuilder: 0.7.2
#~ Gallery: 1.6
#~ TinyMCE: 2.9.6
#~ CGCalendar: 1.9.6
#~ CGExtensions: 1.29.1
#~ Showtime: 3.2
#~ CGSmartImage: 1.6.1
#~ HitCounter: 1.1
#~ ModuleMaker: 0.3.2
#~ Questions: 1.0.3
#~ GoogleMaps: 0.2.0
#~ Uploads: 1.14.1
#~ FrontEndUsers: 1.16.5
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ output_compression:
#~ max_upload_size: 10000000
#~ 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.4.3
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 128M
#~ max_execution_time: 60
#~ output_buffering: 1
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 10M
#~ upload_max_filesize: 10M
#~ 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 (mysql)
#~ Server Db Version: 5.5.24
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~
Bonjour la communauté,
Je reviens un peu sur le post astuce de Jean le Chauve : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3229
J'ai suivi pas à pas cet astuce et cela marche super bien à l'exception d'un petit detail qui me fait vraiment reflechir :
Mon slider s'affiche comme je l'ai défini, mais je n'ai pas les petites images défilantes qui devraient s'afficher sous mon slider.
Illustration
Voici le code de mon template de la gallery
Code :
[== Indéfini ==]
<div id="featured_slide">
{foreach from=$images item=image}
<div class="featured_box">
<a href="#"><img src="{root_url}/{$image->file|escape:'url'|replace:'%2F':'/'}" alt=""/></a>
<div class="floater">
{$image->comment}
</div>
</div>
{/foreach}
</div>Le feuille de style
Code :
[== Indéfini ==]
#featured_slide {
position:relative;
margin:0 auto 0;
display:block;
width:960px;
height:300px;
overflow:hidden;
font-size:13px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#22C0FD;
}
#featured_slide a{
color:#01425A;
background-color:#22C0FD;
}
#featured_slide a, #featured_slide ul, #featured_slide img{
margin:0;
padding:0;
border:none;
outline:none;
list-style:none;
text-decoration:none;
}
#featured_slide h1, #featured_slide h2, #featured_slide h3, #featured_slide h4, #featured_slide h5, #featured_slide h6{
margin:0 0 15px 0;
padding:0 0 8px 0;
line-height:normal;
font-size:13px;
font-weight:bold;
font-family:Georgia, "Times New Roman", Times, serif;
border-bottom:1px dotted #CCCCCC;
}
/* ----------------------------------------------Content-------------------------------------*/
.featured_box{
position:relative;
display:block;
width:960px;
height:300px;
background-color:#2F5F8F;
}
.featured_box img{
display:block;
float:left;
width:650px;
height:300px;
}
.featured_box .floater{
display:inline;
float:right;
width:250px;
margin:30px 30px 0 0;
}
.featured_box p{
margin:0 0 15px 0;
padding:0;
line-height:1.6em;
}
.featured_box p.readmore{
display:block;
width:100%;
margin:0;
padding:0;
text-align:right;
line-height:normal;
text-transform:uppercase;
}
/* ----------------------------------------------Navigation Buttons-------------------------------------*/
/*
Navigation dynamically created using: jquery.cycle.setup.js and jquery.cycle.min.js
HTML Output:
<div id="fsn">
<ul id="fs_pagination">
<li><a href="javascript:void()">1</a></li>
<li><a href="javascript:void()">2</a></li>
<li><a href="javascript:void()">3</a></li>
<li><a href="javascript:void()">4</a></li>
<li><a href="javascript:void()">5</a></li>
</ul>
</div>
*/
#fsn{
position:relative;
margin:10px auto -5px;
display:block;
width:960px;
height:25px;
text-align:center;
background-image:url([[root_url]]/uploads/images/trans.png);
z-index:1000;
}
#fsn ul{
position:relative;
margin:0 auto 0;
display:block;
width:125px;
height:20px;
padding:5px 0 0 0;
overflow:hidden;
list-style:none;
}
#fsn ul li, #fsn ul li a{
display:block;
float:left;
width:15px;
height:15px;
margin:0 10px 0 0;
padding:0;
}
#fsn ul li a{
float:none;
border:none;
margin:0;
outline:none;
text-indent:-5000px;
text-decoration:none;
background:url([[root_url]]/uploads/images/slide.png) 50% 50% no-repeat;
}
#fsn .activeSlide{
background:url([[root_url]]/uploads/images/slide.png) 0% 50% no-repeat;
}Le Gabarit JavaScript:
Code :
[== Indéfini ==]
<script type="text/javascript" src="[[root_url]]/uploads/scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="[[root_url]]/uploads/scripts/jquery.cycle.min.js">
<script type="text/javascript" src="[[root_url]]scripts/jquery.cycle.setup.js"></script>Avec le jquery.cycle.setup.js qui se présente comme :
Code :
[== Indéfini ==]
$(function () {
$('#featured_slide').after('<div id="fsn"><ul id="fs_pagination">').cycle({
timeout: 5000, // milliseconds between slide transitions (0 to disable auto advance)
fx: 'fade', // choose a transition type, ex: fade, scrollUp, shuffle, etc...
pager: '#fs_pagination', // selector for element to use as pager container
pause: 0, // true to enable "pause on hover"
pauseOnPagerHover: 0 // true to pause when hovering over pager link
});
});Quelqu'un à t il une idée?
Merci