jQuery Mouse Scroll Slider Image Gallery

The Easiest way to navigate through Multiple Photo's / Picture gallery is Mouse Scroll. Core JQuery Supports "mousewheel" event.

Download Demo view-source

Include JQuery Library

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>

Required Script

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var imglist = ["ras1.gif","ras2.jpg","ras3.gif","ras4.jpg","ras5.jpg","ras6.png","ras7.jpg","ras8.gif"];

function getnext(img){
    if(imglist.length>=jQuery.inArray(img,imglist) ){
        var position = jQuery.inArray(img,imglist)+1;
        return imglist[position];
    } else {
        return false;
    }
}

function getprev(img){
    if(imglist.length>=jQuery.inArray(img,imglist) ){
        var position = jQuery.inArray(img,imglist)-1;
        return imglist[position];
    } else {
        return false;
    }
}
$(document).ready(function(){
    //Get the First Image
    var loadimg = imglist[0];
    $("#imgholder").html("<img src="+loadimg+" width=400>");
    $('#foo').bind('mousewheel', function(e){
        if(e.wheelDelta > 0) {
            loadimg = (getnext(loadimg)==false) ? imglist[0]:getnext(loadimg);
            if(loadimg){
                $("#imgholder").html("<img src="+loadimg+" width=400>");
            } else {
                alert("End of Scroll Up Gallery ");
            }
        }
        else{
        
            loadimg = (getprev(loadimg)==false) ? imglist[0]:getprev(loadimg);
            if(loadimg){
                $("#imgholder").html("<img src="+loadimg+" width=400>");
            } else {
                alert("End of Scroll Down Gallery");
            }
        }
    });
});
});//]]>  

</script>

HTML Body

<body>
  <div id="foo">
    <div id="imgholder"></div>
  </div>
  
</body>

Optional Style

<style>
#foo {
border: solid #112200 2px;
padding:3px;
width:400px;
height:175px;
}
</style>

jQuery Mouse Scroll Slider Image Gallery

Post a Comment

Contact Form