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 .


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

Continuing the Discussion

  1. 4款Javascript滑动门特效 » 没事搞起耍 linked to this post on October 13, 2009

    [...] 2. Simple Slider (演示地址) [...]



Some HTML is OK

or, reply to this post via trackback.


Get Adobe Flash playerPlugin by wpburn.com wordpress themes