For all jQuery Lovers out there, i’ve built a simple but powerful jQuery Slider/Gallery Plugin which is realy easy to use – and its small with just 5kb of filesize.

Examples

  1. Example 1 – Standard without any options
  2. Example 2 – with Thumbnail navigation
  3. Example 3 – Clean without any navigations
  4. Example 4 – left Descriptiontext and 10 Elements
  5. Example 5 – all options used

Features

  • easy to use and to customize via options
  • different effects
  • optional number or image navigation
  • optional next/prev navigation
  • optional Image Caption Text
  • You can link every image if you want
  • use as lot images/Elements you want
  • small with just 5kb of size

Options

Here is the complete option Reference with standard Values and possible values

option name standard possible values description
startElement 0 int element to start with
speed 1000 int animation speed in milliseconds
pauseDuration 2500 int pause duration in milliseconds
pauseOnHover false true, false should animation stop on mousover
pauseOnBlur true true, false should animation stop if window is inactive
animationDir “left” “top”, “right”, “bottom”, “left”, “topright”, “topleft”, “bottomright”, “bottomleft” direction of the animation
animationOpacity 0.1 0.0 to 1.0 Opacity of the Animation
captionPosition “bottom” “bottom”, “top”, “left”, “right”, “none” position of the caption box or hide it with none
captionWidth “100%” px, auto, % width of the caption box
captionHeight “auto” px, auto, % height of the caption box
navClass “nav” “text” class name for the navigation
navType “number” “number”, “thumb”, “none” type of the navigation
prevNextNav true true, false show or hide the prev next buttons
nextClass “next” “text” class name for the next button
prevClass “prev” “text” class name for the prev button
nextTitle “Next Image” “text” title text of the next button
prevTitle “Previous Image” “text” title text of the prev button

HTML Structure

Example Structure with 3 Elements:

<ul id="slider">
<li><a href="optional_link.html"><img src="myimage1"/></a><div><h2>Title 1</h2><p>Image Caption Text 1</p></div></li>
<li><a href="optional_link2.html"><img src="myimage2"/></a><div><h2>Title 2</h2><p>Image Caption Text 2</p></div></li>
<li><a href="optional_link3.html"><img src="myimage3"/></a><div><h2>Title 3</h2><p>Image Caption Text 3</p></div></li>
</ul>

Browser Support

Works perfect with: Firefox, Chrome, Opera, Safari, IE8, IE9
Not yet testet with IE6 and IE7 (could you? Thanks.)

Known Issues

– You cant use multiple Sliders on one page at the moment (there is a small bug (problem with multiple setInterval Methods – need HELP!))

Ideas for next Release?

Please just leave a comment if you’re missing a feature.

Download

Feel free to use and download this Plugin. You can use it for privat and commercial projects.

  Kollermedia Slider Plugin with all Examples (473,1 KiB, 2.362 hits)


  kollermedia_slider.js (2,3 KiB, 1.826 hits)


  kollermedia_slider.min.js (1,4 KiB, 1.844 hits)

  1. what do you sprechen for a sprach? what is a jquery? and what a kamasutrastellung is:
    “top”, “right”, “bottom”, “left”, “topright”, “topleft”, “bottomright”, “bottomleft” ?

  2. Thank you for the slider, it fits perfectly my needs. There is only a little bug when initialising the gallery/ when loading the site: the first loop displays the images with a 30 pixels margin from the left.. the loops that come afterwards work all fine.

    again, thanks a lot!

  3. Thank you for this nice slider.

    I saw, that it’s not possible to use two or more sliders on one page. I want to do a gallery with categories. There are thumbnails and with a click on it, I would open your slider.

    Do you have a workaround for my problem or you know how I could solve this?

    Thanks.

  4. I already solved my problem.

    I’m using now a CSS-Class (not ID) for the Slider and certainly two lists with the images.

    $(‘.slider’).kollermedia_slider({ […] in Javascript

    […] in the HTML

    .slider li {position:absolute;} […] in CSS

    One little problem is that the animation effect is only on the active slider (can change when user click on other slider or manually changes picture). But I want to have this so.

  5. Hi,

    A client of ours also has pages with only one image in the slider (I know . . . ).

    Can you please update your code and wrap the startSlider with a:

    if ( items.length > 1) {
    }

    Cheers,

    Michiel

  6. Hallo Jürgen

    Ersten, herzlichen Dank für dein Plugin.

    Wir entwickeln Havalite CMS ( http://havalite.com ), das durch plugins und Widgets erweitert werden can und wir möchten dein Plugin dazu fügen.
    Ist es ok für dich?
    Selbstverständlich mit einem Link und icon zu deiner Seite

    Danke

  7. Many thanks for this script. It’s exactly what I needed… and as is usual for me, I found it accidentally when I was looking for something else!

Sag mir was du denkst

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>