Re: How to create a scrolling slideshow
First improvement. Replace the line
Code:
slideElem.style.marginLeft=(-(curSlide*slideWidth+curSlidePos))+"px";
with these three lines
Code:
var curWidth=slideWidth*((curSlidePos>0)?slideCount-slidesVisible:1);
var offset=Math.sign(curSlidePos)*(1-Math.cos(curSlidePos/curWidth*Math.PI))/2*curWidth;
slideElem.style.marginLeft=(-(curSlide*slideWidth+offset))+"px";
for a kind of ease-in/out movement.
Compare here
Re: How to create a scrolling slideshow
Hi siran, when I click the Compare here link in your last post (#11) I get a static image, no scrolling.
Ciao
Roly
Re: How to create a scrolling slideshow
Sorry for the inconvenience. Guess you are using IE. It doesn't support Math.sign :o I should have tested that before uploading...
So the code to use would be:
Code:
var curWidth=slideWidth*((curSlidePos>0)?slideCount-slidesVisible:1);
var offset=((curSlidePos<0)?-1:1)*(1-Math.cos(curSlidePos/curWidth*Math.PI))/2*curWidth;
slideElem.style.marginLeft=(-(curSlide*slideWidth+offset))+"px";
I have updated the file. Please check again and hit CTRL + F5 to clear the browser cache.
Re: How to create a scrolling slideshow
Hi siran, works just nice, thank you.
Ciao
Roly
1 Attachment(s)
Re: How to create a scrolling slideshow
Here is another version. It allows multiple sliders on the same page.
Moved the code to page head code.
The placeholder code is now much smaller.
The placeholder height has to match the height of the content page.
Example placeholder code:
Code:
createSlider: slideshow.htm, 200, 12, 4, 250, 3, 15
The first part "createSlider:" may not be changed. It is needed to identify the placeholder.
The rest of the code are parameters separated by commas:
1. (slideshow.htm): filename of the sub-site to include in the slider
2. (200): width of a single slide
3. (12): number of slides (it is important that this matches the the real number of slides in the included sub-site)
4. (4) number of slides visible at a time (optional, the code will try to calculate this if only 3 parameters are given)
5. (250) time (in unit of ten milliseconds) between sliding (optional, default is 400)
6. (3) step right value (defines the speed of the slide to the next position) (optional, default 2)
7. (15) step left value (defines the speed of the slide back to start) (optional, default 10)
See online here.
Re: How to create a scrolling slideshow
Hi Siran,
Many thanks for posting this.
I'm not sure where to export the "slides".htm file to. I created a folder called "slide test" and exported the slider there.
Many thanks,
Mike
1 Attachment(s)
Re: How to create a scrolling slideshow
Hi Mike,
depending on what you file structure is you will have to change the first parameter if you are using the file from post 15 or the src="..." value if you are using the previous example.
So if your structure looks like this:
Attachment 113817
which assumes your main site is uploaded to the root and named index.htm and the slides are uploaded to the slidetest subfolder and the file is named slides.htm
you will have to change to src="slidetest/slides.htm" in the previous example
or the placehoder code to 'createSlider: slidetest/slides.htm, ..., ..., ..., ..., ..., ...' (without the quotes) in the example of post 15
I'd recommend to avoid spaces in path or file names.
Re: How to create a scrolling slideshow