CODEWITHSUNDEEP
javascriptjquery
DextrousDave
DextrousDave

Reputation: 6793

Slider Plugin to use Single Image instead of several

I want to implement the following slider into my website: http://simplewpthemes.com/demo/theme/?wptheme=MahasoliTribune

Now, as you can see, the slider consists of 5 images. I want to use a single image, but the image should be divided into 5 parts when displaying the non-hover state, so that the very left 'image' should focus on the left side of the image, the 2nd 'image' should show the next part of the image, but this is all part of one image, almost like a sprite effect, where the preview (non-hover minimized state) is basically a specific part of the single original large image.

Can anyone help me on this one?

Thank you

Upvotes: 0

Views: 240

Answers (1)

Dave Loepr
Dave Loepr

Reputation: 956

Why don't you just split your big image in 5 ? You may need a custom function that would move your image rather than sliders thought and built for multi images purposes.

EDIT : as requested here is the custom js function to slide ONE image :

http://jsfiddle.net/ktNxN/ (click on the button)

Most of the magic happens here :

var slideView = $('.bigImage');
var slideWidth = parseInt(slideView.css('width'));
var slideStep = slideWidth/5;

SECOND EDIT : I realize just now what you want to achieve. Can't you just try to put divs for each panel with a different background position (where the background would be your large image)

to do this :

HTML

 <img src="transparent_png_1x1.png">

CSS

 img {
 /* to be sure the png covers the whole area */
 width:100%;height:100%;
 /* put your big image as the css background */
 background-image:url(bigImage.jpg);
 }

 img:nth-of-type(1) {background-position:0px 0px;}
 img:nth-of-type(2) {background-position:100px 0px;}

.. and so on, will need some adaptation to fill your need

Upvotes: 1

Related Questions