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.

13 comments

By Trimbitas Sorin – June 23, 2009

13 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
Stephanie says

I’m trying to learn jquery at the moment but it’s not the easiest of things! To be honest I only really got to a part about ‘cows’ in programming in my javascript book. Yeah, weird.

August 20, 2010, 7:57 pm
anderson says

hy there, how to make image display in 2 or 3 row instead 1 row
thanks

November 26, 2010, 9:26 pm
Trimbitas Sorin says

Anderson .. you just need to play with CSS/HTML. No need to modify the JS

HTH

Sorin

December 17, 2010, 12:13 pm
Manish says

Great Plugin, Exactly what I needed. How do I update all the 4 images at the click of next button?

December 30, 2010, 10:00 am
cesar says

I had a question, i want to show to differents galleries on a page, how can I do that. Thanks a lot

nice blog

December 30, 2010, 5:59 pm
harry says

nice

September 16, 2011, 5:53 am