Bonjour !
Ne sachant coder en javascript, je me permet de vous demander un peu d'aide. J'ai un slider sur la page d'accueil de mon site (www.qandb-portfolio.com), qui présente quelques problèmes de compatibilité avec ie6 et 7, ainsi qu'avec les personnes n'ayant pas activé javascript.
Je vous donne les codes ci-dessous mais ils sont assez longs. Ce qui serait bien, c'est que le problème de compatibilité soit réglé (je me charge des problèmes de transparence :) et que l'on obtienne quelque chose de potable si javascript est désactivé.
Les codes :
Javascript
Code Javascript :
/*
* FeatureList - simple and easy creation of an interactive "Featured Items" widget
* Examples and documentation at: http://jqueryglobe.com/article/feature_list/
* Version: 1.0.0 (01/09/2009)
* Copyright (c) 2009 jQueryGlobe
* Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
* Requires: jQuery v1.3+
*/
;(function($) {
$.fn.featureList = function(options) {
var tabs = $(this);
var output = $(options.output);
new jQuery.featureList(tabs, output, options);
return this;
};
$.featureList = function(tabs, output, options) {
function slide(nr) {
if (typeof nr == "undefined") {
nr = visible_item + 1;
nr = nr >= total_items ? 0 : nr;
}
tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');
output.stop(true, true).filter(":visible").fadeOut();
output.filter(":eq(" + nr + ")").fadeIn(function() {
visible_item = nr;
});
}
var options = options || {};
var total_items = tabs.length;
var visible_item = options.start_item || 0;
options.pause_on_hover = options.pause_on_hover || true;
options.transition_interval = options.transition_interval || 7500;
output.hide().eq( visible_item ).show();
tabs.eq( visible_item ).addClass('current');
tabs.click(function() {
if ($(this).hasClass('current')) {
return false;
}
slide( tabs.index( this) );
});
if (options.transition_interval > 0) {
var timer = setInterval(function () {
slide();
}, options.transition_interval);
if (options.pause_on_hover) {
tabs.mouseenter(function() {
clearInterval( timer );
}).mouseleave(function() {
clearInterval( timer );
timer = setInterval(function () {
slide();
}, options.transition_interval);
});
}
if (options.pause_on_hover) {
output.mouseenter(function() {
clearInterval( timer );
}).mouseleave(function() {
clearInterval( timer );
timer = setInterval(function () {
slide();
}, options.transition_interval);
});
}
}
};
})(jQuery);HTML
Code HTML :
<div id="feature_list">
<ul id="tabs">
<li class="tab1">
<a href="javascript:;">
<span>Votre site Web gratuit</span>
</a>
</li>
<li class="tab2">
<a href="javascript:;">
<span>Des Trucs & Astuces</span>
</a>
</li>
<li class="tab3">
<a href="javascript:;">
<span>Des forums sans inscription</span>
</a>
</li>
<li class="tab4">
<a href="javascript:;">
<span>Un support performant</span>
</a>
</li>
</ul>
<ul id="output">
<li>
<img src="images/accueil/slider/images/1.png" alt="Nous créons gratuitement votre site Web" width="690" height="230"/>
</li>
<li>
<img src="images/accueil/slider/images/2.png" alt="Nous vous proposons une série de trucs & astuces !" width="690" height="230"/>
</li>
<li>
<img src="images/accueil/slider/images/3.png" alt="La communauté est là pour vous aider" width="690" height="230"/>
</li>
<li>
<img src="images/accueil/slider/images/4.png" alt="Un support performant vous assiste" width="690" height="230"/>
</li>
</ul>
</div>
CSS
Code :
div#feature_list
{
width: 990px;
height: 250px;
overflow: hidden;
position: relative;
margin: 0px auto 10px;
}
div#feature_list:hover ul#tabs
{
background: url('../images/accueil/slider/pause.png') left bottom no-repeat;
}
div#feature_list ul
{
position: absolute;
top: 0;
list-style: none;
padding: 0;
}
ul#tabs
{
left: 0;
z-index: 2;
width: 320px;
height: 250px;
background: url('../images/accueil/slider/play.png') left bottom no-repeat;
margin: 0px;
}
ul#tabs li
{
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
display: block;
height: 50px;
width: 320px;
overflow: hidden;
margin-left: 26px;
}
ul#tabs li a
{
padding: 12px 0px 0px 60px;
text-decoration: none;
outline: none;
display: block;
height: 43px;
width: 260px;
color: #fff;
}
ul#tabs li.tab1
{
background: url('../images/accueil/slider/tabs/tab1.png') top;
margin-top: 27px;
}
ul#tabs li.tab2
{
background: url('../images/accueil/slider/tabs/tab2.png') top;
}
ul#tabs li.tab3
{
background: url('../images/accueil/slider/tabs/tab3.png') top;
}
ul#tabs li.tab4
{
background: url('../images/accueil/slider/tabs/tab4.png') top;
}
ul#tabs .current
{
color: #3c2211;
font-weight: bold;
letter-spacing: -1px;
text-shadow: 0px 1px 0px #fff;
}
ul#tabs li.tab1 .current
{
background: url('../images/accueil/slider/tabs/tab1.png') bottom;
}
ul#tabs li.tab2 .current
{
background: url('../images/accueil/slider/tabs/tab2.png') bottom;
}
ul#tabs li.tab3 .current
{
background: url('../images/accueil/slider/tabs/tab3.png') bottom;
}
ul#tabs li.tab4 .current
{
background: url('../images/accueil/slider/tabs/tab4.png') bottom;
}
ul#tabs li a.current:hover
{
cursor: default;
}
ul#output
{
right: 0px;
width: 710px;
height: 250px;
position: relative;
overflow: hidden;
margin-bottom: 0px;
}
ul#output li
{
position: absolute;
width: 690px;
height: 230px;
padding: 10px;
}Bref, j'avoue honteusement rechercher quelqu'un pour retravailler un peu ces codes... (Je maitrise css et html, si sa peu aider).
Merci pour vos futures réponses. ;)