Skip to content


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 :

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

, set the CSS for the navigation images :

  1. .simple_slider_hover{
  2.         cursor:pointer;
  3.         cursor:hand;
  4. }
  5. .simple_slider_disabled {
  6.         opacity : 0.2;
  7.         filter: alpha(opacity=20);
  8.         zoom: 1;
  9. }

, init the plugin over your images holder :

JAVASCRIPT [Show Plain Code]:
  1. jQuery('#test').simple_slider({
  2.         'leftID': 'leftNav', //ID of the left image navigation
  3.         'rightID': 'rightNav', //ID of the right image navigation
  4.         'display': 4 //how many images to display at once
  5. });

and an example of image holder :

  1. <img src='images/left.png' id='leftNav' />
  2. <span id='test'>
  3.         <img src='images/0.gif' />
  4.         <img src='images/1.gif' />
  5.         <img src='images/2.gif' />
  6.         <img src='images/3.gif' />
  7.         <img src='images/4.gif' />
  8.         <img src='images/5.gif' />
  9.         <img src='images/6.gif' />
  10.         <img src='images/7.gif' />
  11.         <img src='images/8.gif' />
  12.         <img src='images/9.gif' />
  13. </span>
  14. <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 .


13 Responses

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

  1. sa says

    Very nice.

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

  2. lily says

    thanks. it ‘s useful.

  3. FX says

    useful for me too !

  4. FX says

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

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

  6. Johannas says

    Thank you. it’s very useful :)

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

  8. anderson says

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

  9. Trimbitas Sorin says

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

    HTH

    Sorin

  10. Manish says

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

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

  12. harry says

    nice

Continuing the Discussion

  1. 4款Javascript滑动门特效 » 没事æžèµ·è€ linked to this post on October 13, 2009

    [...] 2. Simple Slider (æ¼-Y¡ç¤ºåœ°å€) [...]



Some HTML is OK

or, reply to this post via trackback.


Get Adobe Flash playerPlugin by wpburn.com wordpress themes