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
- Example 1 – Standard without any options
- Example 2 – with Thumbnail navigation
- Example 3 – Clean without any navigations
- Example 4 – left Descriptiontext and 10 Elements
- 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.381 hits)
kollermedia_slider.js (2,3 KiB, 1.846 hits)
kollermedia_slider.min.js (1,4 KiB, 1.863 hits)
blue schreibt:
what do you sprechen for a sprach? what is a jquery? and what a kamasutrastellung is:
“top”, “right”, “bottom”, “left”, “topright”, “topleft”, “bottomright”, “bottomleft” ?
Carina schreibt:
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!
Swiss schreibt:
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.
Swiss schreibt:
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.
Will Knot B. Revealed Snr. schreibt:
Re. Downloads: “File does not exist.” 🙁
Great script thought 🙂
Jürgen Koller schreibt:
Oh thank you, i’ll fix it (moved to a new server!)
Don schreibt:
Is there a way that it can detect, when only one image is used, that it will not do a transition/effect ?
Michiel Roos schreibt:
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
geo3 schreibt:
it is error on Kollermedia Slider Plugin with all Examples (473,1 KiB, 598 hits)
plz update
Teryaki schreibt:
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
John schreibt:
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!