Kollermedia Slider – A simple jQuery Gallery Slider Plugin

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.

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


zip  kollermedia_slider.js (2,3 KiB, 710 hits)


zip  kollermedia_slider.min.js (1,4 KiB, 676 hits)


11 Kommentare

  1. blue 10. August 2011 um 15:08

    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. Carina 2. November 2011 um 12:19

    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. Swiss 7. Dezember 2011 um 15:57

    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. Swiss 7. Dezember 2011 um 16:27

    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. Will Knot B. Reveale 9. März 2012 um 12:13

    Re. Downloads: "File does not exist." :(

    Great script thought :)

  6. Jürgen Koller 9. März 2012 um 12:39

    Oh thank you, i'll fix it (moved to a new server!)

  7. Don 9. Juli 2012 um 8:47

    Is there a way that it can detect, when only one image is used, that it will not do a transition/effect ?

  8. Michiel Roos 20. Juli 2012 um 8:40

    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

  9. geo3 7. August 2012 um 9:33

    it is error on Kollermedia Slider Plugin with all Examples (473,1 KiB, 598 hits)

    plz update

  10. Teryaki 7. August 2012 um 10:15

    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

  11. John 14. Juni 2013 um 15:31

    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!

Kommentar verfassen


 
Produced and © by Koller Jürgen | Impressum | Love and Joy to everyone