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.

[SN]

ok thanks, but i am not very good with coding. do you know what code i add and which file i add it to?

[G6Cad]

Did you read the topic from the start ?   it's all there..

http://www.tinyportal.net/index.php/topic,12708.msg105736.html#msg105736

[SN]

Yes of course i read it all, did you read it all? like isaid i have got the slide show working i just want different font size

There are 4 Css files - html.css, jd.slideshow.css, layout.css & Print.css.

I don't know which file i need to edit to change the font size and even if i picked the right file, i don't know which part of the code changes the font size. like i said before im not very good with coding.

i just need someone to point out to me what i would be looking for in the css

[ZarPrime]

SN,

If you want to post a link to your site showing the slideshow, and point out which font you are trying to change, I'll take a look at it for you.

ZarPrime

[SN]

Its ok Now thank you, i went through all the css files and found it.

it was in jd.slideshow.css and this is where i edited

Code Select Expand

.jdSlideshow .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 55px; // [b]changed the height of the title bar here because of the bigger font now[/b]
background: #333;
color: #fff;
text-indent: 0;
}

.jdSlideshow .slideInfoZone h2
{
padding: 0;
font-size: 100%; // [b]This was the title Font, i changed it to 100% before it was lower[/b]
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: inherit;
}

.jdSlideshow .slideInfoZone p
{
padding: 0;
font-size: 80%; // [b]This was the Font Underneath the title[/b]
margin: 2px 5px;
color: #eee;

i just mess around with the percentages with the ones i marked and iits ok now... Thanks for the help with it looks great now

my site is not finished yet i will post i when its complete

[ZarPrime]

Great.  I'm glad you got it worked out. :up:

ZarPrime

[G6Cad]

Yes of course i read it all, did you read it all? like isaid i have got the slide show working i just want different font size

There are 4 Css files - html.css, jd.slideshow.css, layout.css & Print.css.

I don't know which file i need to edit to change the font size and even if i picked the right file, i don't know which part of the code changes the font size. like i said before im not very good with coding.

i just need someone to point out to me what i would be looking for in the css

The very reason i asked you to read and add in the info from the posting guide we ask for is a link to your site, With a link we can check it right away on your site instead of guessing our way forward.

[Reko]

is there a updated version of the code for this?

[gezdirici]

Demos page doesn't working

/scripts/mootools.release.83.js   ,

/scripts/timed.slideshow.js

/css/jd.slideshow.css

where is this page. 

[ZarPrime]

It appears that the site that had this code available and was posted in the OP of this topic has been closed down, along with it's associated demos.  Since the code is no longer available, this topic will now be locked.

gezdirici, if you want some sort of slideshow on your site, you will have to use one of the other block code snippets that still work, or post a topic in our Requests board (http://www.tinyportal.net/index.php?board=133.0) stating exactly what you are looking for.

Sorry for the inconvenience.

ZarPrime