«
»

Simple Image Gallery Navigation (slider) plugin in jQuery

June 23, 2009, 12:28 pm

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 :

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

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

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

Tags:
Category: jQuery  |  Comment (RSS)  |  Trackback

13 Comments

  1. sa says:
    June 24, 2009 at 9:54 am

    Very nice.

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

  2. 4款Javascript滑动门特效 » 没事æžèµ·è€ says:
    October 13, 2009 at 4:32 am

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

  3. lily says:
    October 21, 2009 at 11:02 am

    thanks. it ‘s useful.

  4. FX says:
    March 16, 2010 at 12:30 pm

    useful for me too !

  5. FX says:
    March 16, 2010 at 12:46 pm

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

  6. Trimbitas Sorin says:
    March 17, 2010 at 10:14 am

    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

  7. Johannas says:
    June 20, 2010 at 2:15 am

    Thank you. it’s very useful :)

  8. Stephanie says:
    August 20, 2010 at 7:57 pm

    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.

  9. anderson says:
    November 26, 2010 at 9:26 pm

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

  10. Trimbitas Sorin says:
    December 17, 2010 at 12:13 pm

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

    HTH

    Sorin

  11. Manish says:
    December 30, 2010 at 10:00 am

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

  12. cesar says:
    December 30, 2010 at 5:59 pm

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

    nice blog

  13. harry says:
    September 16, 2011 at 5:53 am

    nice

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes