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



, 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;
}

, init the plugin over your images holder :

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 :



	
	
	
	
	
	
	
	
	
	


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

23 comments on “Simple Image Gallery Navigation (slider) plugin in jQuery

  1. Very nice.

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

  2. Pingback: 4款Javascript滑动门特效 » 没事起

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

  4. 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

  5. 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.

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

  7. When I put a href links for the images huge black boxes appear around the images, how do I eliminate this or is this not the correct way to make the images a link

  8. Well Tom .. it requires only basic JS.

    For our example :
    [script]
    setInterval(function(){ $(“#rightNav”).click(); }, 3000);
    [/script]
    should work by going to right once every 3 seconds (3000 ms).

    Hope this helps

  9. hmm.. although it now moves automatically which is great… its very random. It dosnt move from item 1,2,3,4 it moves randomly like 1,2,4,3,2,3 etc

    Is there something else we can add? It would also be nice to have some pause on hover?… any advise on these? Happy to pay you a small amount for your help…

  10. i want to show many galleries on a single page,and i have set that by using your this plugin but little bug is occurring when i click on next of one gallery and previous of second gallery.
    need your help.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.