Smooth Slideshow Help

[whoesa]

Hi all,

In my search for a slideshow i have found this great script: http://smoothslideshow.jondesign.net/

As you can see there, you have 2 options to choose from: Timed mode and Change by hand mode.

Demo's:
Timed Mode Example
Change By Hand Example

Now im not much of a coder and i was wondering if it is possible to get this script working on a SMF - TP site and how? It would be great if i could use this script in a center block and i was hoping someone could point me in the right direction. 

Any help would be much appreciated!   

[Lesmond]

I have had a play with this and got it working so far,
you will need to download the file from JonDesign's near the bottom of the page you will see "Where can I get it ?"
upload these folders and one file to your forum root..

css
images
scripts
.project

then copy this code to a center or front page script block

Code Select Expand

<script src="scripts/mootools.release.83.js" type="text/javascript"></script>

<script src="scripts/timed.slideshow.js" type="text/javascript"></script>


<link rel="stylesheet" href="css/jd.slideshow.css" type="text/css" media="screen" />


<center><div class="timedSlideshow jdSlideshow" id="mySlideshow"></div>
                        <script type="text/javascript">
countArticle = 0;
var mySlideData = new Array();
mySlideData[countArticle++] = new Array(
'images/test/1.jpg',
'#',
'Item 1 Title',
'Item 1 Description'
);
mySlideData[countArticle++] = new Array(
'images/test/2.jpg',
'#',
'Item 2 Title',
'Item 2 Description'
);
mySlideData[countArticle++] = new Array(
'images/test/3-cropped.jpg',
'#',
'Item 3 Title',
'Item 3 Description'
);
mySlideData[countArticle++] = new Array(
'images/test/4.jpg',
'#',
'Item 4 Title',
'Item 4 Description'
);
</script>
<script type="text/javascript">
function startSlideshow() {
var slideshow = new timedSlideShow($('mySlideshow'), mySlideData);
}

addLoadEvent(startSlideshow);
</script>
</center>


[knat]

Hey thats a nice find.. looks very cool

Thanks 

[whoesa]

Thanks a lot Lesmond for taking a look at this!  :up:

Just tried it out and it seem to work just fine... 

[houston]

What file do you place into the root folder?

[Lesmond]

If you look at my post above you will see what files/folders to put in your root dont forget you must change the paths in the code if you need to

[SN]

thanks for the code

any idea on how to change the size of the sideshow.

i need it to be 480x240

[JPDeni]

It looks like the size is determined by the css. A quote from the author's page:

   1.   The final step, set the slideshow size in your stylesheets like this (the default size is 320x240):

Code Select Expand


      #mySlideShow
      {
      width: 400px !important;
      height: 200px !important;
      }


[SN]

Thanks!!!

everything is working now

just one more thing, how do i change the font size? it is so small at the moment

[JPDeni]

Add a text size the css class. You'll have to do some experimenting to figure out what works.