Simple Image Gallery Navigation (slider) plugin in jQuery

View
Download

How to setup
You must include in your page’s HEAD section the jQuery library and the slider plugin :

Add JavaScript Files:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/jquery.simple_slider.js" type="text/javascript"></script>

set the CSS for the navigation images :

.simple_slider_hover{

cursor:pointer;

cursor:hand;

}

.simple_slider_disabled {

opacity : 0.2;

filter: alpha(opacity=20);

zoom: 1;

}

 

JAVASCRIPT:

jQuery('#test').simple_slider({

'leftID': 'leftNav', //ID of the left image navigation

'rightID': 'rightNav', //ID of the right image navigation

'display': 4 //how many images to display at once

});

and an example of image holder :

HTML:

<img pagespeed_lazy_replaced_functions="1" id="leftNav" pagespeed_lazy_src="images/left.png" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<span id="test">

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="images/0.gif" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="images/1.gif" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="images/2.gif" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="images/3.gif" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="images/4.gif" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="images/5.gif" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="images/6.gif" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="images/7.gif" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="images/8.gif" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="images/9.gif" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

</span>

<img pagespeed_lazy_replaced_functions="1" id="rightNav" pagespeed_lazy_src="images/right.png" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">