Slider avec scrolling jquery

Bonjour,

Je fait du php mais je suis débutant en javascript/jquery.

Je cherche un slider d'images qui défile en continu comme sur ce site
( http://kiusso.net/scripts/imageScroller_jquery_plugin/index.htm )
mais qui en même temps laisse l'opportunité de sélectionner parmi les images comme sur un slider classique.
( exemple : http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html )

J'ai bien trouvé du code, mais je n'arrive pas tout seul à lier les 2 codes. Il m'est déjà assez dur de m'y plonger

Le code javascript :

//slider classique

jQuery(function(){
jQuery("div.svw").prepend("<img src='spinner.gif' class='ldrgif' alt='loading...'/ >");
});
var j = 0;
var quantofamo = 0;
jQuery.fn.slideView = function(settings) {
settings = jQuery.extend({
easeFunc: "easeInOutExpo",
easeTime: 750,
uiBefore: false,
toolTip: false,
ttOpacity: 0.9
}, settings);
return this.each(function(){
var container = jQuery(this);
container.find("img.ldrgif").remove();
container.removeClass("svw").addClass("stripViewer");
var pictWidth = container.find("img").width();
var pictHeight = container.find("img").height();
var pictEls = container.find("li").size();
var stripViewerWidth = pictWidth*pictEls;
container.find("ul").css("width" , stripViewerWidth);
container.css("width" , pictWidth);
container.css("height" , pictHeight);
container.each(function(i) {
(!settings.uiBefore) ? jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>") : jQuery(this).before("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>");
jQuery(this).find("li").each(function(n) {
jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"<\/a><\/li>");
});
jQuery("div#stripTransmitter" + j + " a").each(function(z) {
jQuery(this).bind("click", function(){
jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current");
var cnt = -(pictWidth*z);
container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
return false;
});
});


container.bind("click", function(e){
var ui = (!settings.uiBefore) ? jQuery(this).next().find("a.current") : jQuery(this).prev().find("a.current");
var bTotal = parseFloat(jQuery(this).css('borderLeftWidth').replace("px", "")) + parseFloat(jQuery(this).css('borderRightWidth').replace("px", ""));
var dOs = jQuery(this).offset();
var zeroLeft = (bTotal/2 + pictWidth) - (e.pageX - dOs.left);
if(zeroLeft >= pictWidth/2) {
var uiprev = ui.parent().prev().find("a");
(jQuery(uiprev).length != 0)? uiprev.trigger("click") : ui.parent().parent().find("a:last").trigger("click");
}
else {
var uinext = ui.parent().next().find("a");
(jQuery(uinext).length != 0)? uinext.trigger("click") : ui.parent().parent().find("a:first").trigger("click");
}
});


jQuery("div#stripTransmitter" + j).css("width" , pictWidth);
jQuery("div#stripTransmitter" + j + " a:first").addClass("current");
jQuery('body').append('<div class="tooltip" style="display:none;"><\/div>');


if(settings.toolTip){
var aref = jQuery("div#stripTransmitter" + j + " a");

aref.live('mousemove', function(e) {
var att = jQuery(this).attr('title');
posX=e.pageX+10;
posY=e.pageY+10;
jQuery('.tooltip').html(att).css({'position': 'absolute', 'top': posY+'px', 'left': posX+'px', 'display': 'block', 'opacity': settings.ttOpacity});
});
aref.live('mouseout', function() {
jQuery('.tooltip').hide();
});
}
});
j++;
});
};

//le scrolling

( function( $ ) {
$.fn.imageScroller = function ( options ) {
return this.each( function() {
var $this = $( this );
var loadImgs = 0;

var opt = $.extend(
{
speed: "5000"
, loading: "Loading images..."
, direction: "left"
}
, options || {}
);

$this.children().hide();
$this.append(
"<div style='clear:both; padding: 0px; margin: 0px;'>" +
"<div id='loading'>" + opt.loading + "</div>" +
"</div>"
);

$( "img" , $this ).each(function () {
var img = new Image();
var soc = $( this ).attr( 'src' );

$( img ).load(
function () {
loadImgs++;
}
).attr( "src" , soc );
}
);

var intVal = window.setInterval(
function () {
if ( loadImgs == $( "img" , $this ).length ) { //Si le nombre d'images trouvés.
window.clearInterval( intVal );
$( "#loading" ).remove();
$this.children().show();
var totImg = 0;

$.each(
$this.children( ":not(div)" )
, function () {
if ( opt.direction == 'left' ) {
if ( $( this ).children().length ) {
$( this ).width( $( this ).children( ":eq(0)" ).width() );
}
totImg += $( this ).width();
}

$( this ).css({
margin: "0px"
, padding: "0px"
, clear: "both"
});

$( this ).bind(
"mouseover"
, function () {
$( "div:eq(0)" , $this ).stop();
}
).bind(
"mouseout"
, function () {
scrollStart( $( "div:eq(0)" , $this ) , opt );
}
);

$( "div:eq(0)" , $this ).append( $( this ) );
}
);

if ( opt.direction == 'left' ) {
$( "div:eq(0)" , $this ).css( "width" , totImg + "px" );
}

scrollStart( $( "div:eq(0)" , $this ) , opt );
}
}
, 100
);

function scrollStart ( $scroll , opt ) {
if ( opt.direction == 'left' ) {
var pos = -( $scroll.children( ":eq(0)" ).width() );
var spd = opt.speed - ( Math.abs ( parseInt( $scroll.css( "marginLeft" ) ) ) * ( opt.speed / $scroll.children( ":eq(0)" ).width() ) );
}

$scroll.animate(
{
marginLeft: ( pos || "0" ) + "px"
}
, spd
, "linear"
, function () {
if ( opt.direction == 'left' ) {
$scroll.append( $( this ).children( ":eq(0)" ) );
$scroll.css( "marginLeft" , "0px" );
}

scrollStart( $scroll , opt );
}
);
};
});
};
})(jQuery);


//test.js
$(
function () {
$( "#left" ).imageScroller( {loading:'Wait please...'} );
}
)

//index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content=" "/>
<meta name="keywords" content=" " />

<script src="viewer/jquery-1.5.2.js" type="text/javascript"></script>
<script src="viewer/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="viewer/jquery.slideviewer.1.2.js" type="text/javascript"></script>
<!-- Syntax hl -->
<script src="viewer/jquery.syntax.min.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="viewer/scroll.css" />
<script type='text/javascript' src="viewer/test.js"></script>

<script type="text/javascript">
$(window).bind("load", function() {
$("div#mygaltop").slideView({toolTip: true, ttOpacity: 0.5});
$("div#mygalone").slideView(); //if leaved blank performs the default kind of animation (easeInOutExpo, 750)
$("div#mygaltwo").slideView({
easeFunc: "easeInOutBounce",
easeTime: 2200,
toolTip: true
});
$("div#mygalthree").slideView({
easeFunc: "easeInOutSine",
easeTime: 500,
uiBefore: true,
ttOpacity: 0.5,
toolTip: true
});
});

$(function(){
$.syntax({root: 'viewer/jquery.syntax.js'});
});

$(function () {
$( "#left" ).imageScroller( {loading:'Wait please...'} );
})

</script>
</head>
<body>
<?php $name=""; ?>
<div id="wrapp">
<div id="mygaltop" class="svw">

<?php switch($_GET['album']){

case "images":
?><div id='left'>
<ul>
<li><img src='viewer/picts/images-1.jpg' /></li>
<li><img src='viewer/picts/images-2.jpg' /></li>
<li><img src='viewer/picts/images-3.jpg' /></li>
<li><img src='viewer/picts/images-4.jpg' /></li>
</ul>
</div>

default :
?>
<center><font size=5px color=lightgray>
cette partie du site n'est pas encore disponible
</font></center>
<?php break;}?>
</div>
<h1><?php echo $name ?></h1>
</div>
</body>
</html>

---------------------------------------

Voila toutes aides sera la bienvenu,
Merci.
Modifié par rayz404 (11 May 2011 - 10:57)