Simple Image Gallery Navigation (slider) plugin in jQuery

Hi all,

I started about a year ago a personal project regarding the touristic places I have visited (and will visit) in Romania and because I had a lot of other work to do on my ex-full time job (I’m now again a freelancer) I never had time to finish it but all changed now and I’m almost done with it . It just needs more testing time and on 15th July I will finally release it to the interested visitors ( I can’t give you more details until then too ).

Let’s get back to the plugin now …

I have there a simple gallery of images and I needed a nice method of navigating through them. I have searched for plugin/code to do this but without luck so in an afternoon I started reading some documentation and started the coding , here is what it came out …

Simple Slider - jQuery plugin

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


 HTML [Show Styled Code]:



 HTML [Show Plain Code]:



<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 :


 CSS [Show Styled Code]:
.simple_slider_hover{
	cursor:pointer;
	cursor:hand;
}
.simple_slider_disabled {
	opacity : 0.2;
	filter: alpha(opacity=20);
	zoom: 1;
}



 CSS [Show Plain Code]:



.simple_slider_hover{


        cursor:pointer;


        cursor:hand;


}


.simple_slider_disabled {


        opacity : 0.2;


        filter: alpha(opacity=20);


        zoom: 1;


}

, init the plugin over your images holder :


 JAVASCRIPT [Show Styled Code]:
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
});



 JAVASCRIPT [Show Plain Code]:



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 [Show Styled Code]:



 HTML [Show Plain Code]:



<img src='images/left.png' id='leftNav' />


<span id='test'>


        <img src='images/0.gif' />


        <img src='images/1.gif' />


        <img src='images/2.gif' />


        <img src='images/3.gif' />


        <img src='images/4.gif' />


        <img src='images/5.gif' />


        <img src='images/6.gif' />


        <img src='images/7.gif' />


        <img src='images/8.gif' />


        <img src='images/9.gif' />


</span>


<img src='images/right.png' id='rightNav' />

To see a live example click here and to download it click here.

This is my first attempt to build a jQuery plugin so if you find errors in its design don’t be afraid to let me know of them

Best regards

Sorin

Posted in jQuery.

Tagged with jQuery.

7 comments

By Trimbitas Sorin – June 23, 2009

7 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

sa says

Very nice.

I like the idea of hiding the elements rather than moving the container box ( the way that other sliders do)

June 24, 2009, 9:54 am
lily says

thanks. it ‘s useful.

October 21, 2009, 11:02 am
FX says

useful for me too !

March 16, 2010, 12:30 pm
FX says

is there an option to mask nav images when the number of images is under the display number ? thanks

March 16, 2010, 12:46 pm
Trimbitas Sorin says

Hi FX,

No, there is no such option but, if you want to do this .. you can try doing it directly in JS file on the _checkNavigation by adding .hide() and .show() too.

Regards

Sorin

March 17, 2010, 10:14 am
Johannas says

Thank you. it’s very useful

June 20, 2010, 2:15 am