mais de rien sa fait plaisir que je peut t'aider je suis la pour sa.
donc prenons l'exmple de ce slider :
http://designm.ag/tutorials/image-rotator-css-jquery/dans le dossier de ton thème tu vas créer un dossier "slider"
dans ce dossier "silder" tu vas y mettre tes images qui seront présentent dans ton slider.
ensuite tu créer un deuxième dossier que tu vas appeler "js"
tu vas y mettre tes fichier "slider.js"
ensuite tu vas créer un fichier "slider.html" tu vas y mettre le code html du slider exemple pour ce slider donner plus haut:
<div class="main_image">
<img src="slider/banner1.jpg" alt="" />
<div class="desc">
<a href="#" class="collapse">Close Me!</a>
<div class="block">
<h2>Title</h2>
<small>Date</small>
<p>Copy</p>
</div>
</div>
</div>
<div class="image_thumb">
<ul>
<li>
<a href="slider/banner1.jpg"><img src="banner1_thumb.jpg" alt="Image Name" /></a>
<div class="block">
<h2>Title</h2>
<small>Date</small>
<p>Copy</p>
</div>
</li>
</ul>
</div>
ensuite dans ton fichier "style.css" de ton théme tu vas ajouter le style du slider exemple:
.main_image {
width: 598px;
height: 456px;
float: left;
background: #333;
position: relative;
overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px;
padding: 10px;
}
.main_image p {
font-size: 1.2em;
line-height: 1.6em;
padding: 10px;
margin: 0;
}
.block small { /*--We'll be using this same style on our thumbnail list--*/
font-size: 1em;
padding: 0 0 0 20px;
background: url(slider/icon_calendar.gif) no-repeat 0 center;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
bottom: 0;
left: 0; /*--Stick the desc class to the bottom of our main image container--*/
width: 100%;
display: none; /*--Hide description by default, if js is enabled, we will show this--*/
}
.main_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}
.main_image a.collapse { /*--This is our hide/show tab--*/
background: url(slider/btn_collapse.gif) no-repeat left top;
height: 27px;
width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px;
right: 20px;
}
.main_image a.show {background-position: left bottom;}
une fois que tu a fait tous sa dans ton fichier théme.html de ton thème il faudra faire appel a la page que tu à créer plus haut que l'on a appeler "slider.html" et placer le code suivant ou tu veut que ton slider apparaisse:
<{includeq file="$theme_name/dossier_ou_ce_trouve_ton fichier_slider/slider.html"}>
Imaginons que tu veut ton slider en dessous du header de ton théme il te faudra placer le code ci dessus juste en dessous exemple:
<table cellspacing="0">
<tr id="header">
<td id="headerlogo"><a href="<{xoAppUrl /}>" title="<{$xoops_sitename}>"><img src="<{xoImgUrl xoops-logo.png}>" alt="<{$xoops_sitename}>" /></a></td>
<td id="headerbanner"><{$xoops_banner}></td>
</tr>
<tr>
<td id="headerbar" colspan="2">
<table border="0" width="100%">
<tr>
<!-- Start slider -->
<td >
<{includeq file="$theme_name//slider.html"}>
</td>
<!-- End Slider -->
Il ne faudra pas non plus oublier de faire appel au js donc dans ton "théme.html" entre les balises <head> et </head> il faudra placer ce code:
<script type="text/javascript" src="<{xoImgUrl js/slider.js}>"></script>
voila j'espère que cela peut t'aider n'oublie que c'est un exemple en aucun cas c'est ce que tu dois copier et coller pour que sa fonctionne mais sa en n'est pas loin ;)
