Help With Swiss Army Image Slideshow

[Elbee]

1) Script Title: Swiss Army Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/index.htm


Partial script:
var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["photo1.jpg", "Kissing Fools"];
slides[1] = ["photo2.jpg", "Seated Woman"];
slides[2] = ["photo3.jpg", "The Dog Lovers"];
slides[3] = ["photo4.jpg", "Standing Woman"];
slides[4] = ["photo5.jpg", "John, Mary and Jesus"];
//above slide show uses only the defaults


3) Describe problem:

I really like this particular type of slideshow with the Play and Stop options.
I need to know how to include hyperlinks to the images and I don't want the descriptions (Kissing Fools, Seated Woman, etc.). I notice when I remove them, "undefined" appears.

I would appreciate your help.

Thank you.

[yannickjeh]

Can you eleborate more please?

You want this script with ONLY the play and stop button, or do you want the << and >> buttons too?

Welcome to the forums by the way

[Elbee]

Can you eleborate more please?

You want this script with ONLY the play and stop button, or do you want the << and >> buttons too?

Welcome to the forums by the way

I want all the options << PLAY >>.
My problem is that I need each image to link to a different page on my website and I don't want the little titles/descriptions under the images.

Thanks for your help

[Elbee]

I want all the options << PLAY >>.
My problem is that I need each image to link to a different page on my website and I don't want the little titles/descriptions under the images.

Thanks for your help

[jscheuer1]

The description field must remain, even if it is empty. To be on the safe side, use the no_descriptions directive as well. Links may follow the description field:

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions (if any) to your own, links for slides may follow descriptions. 
slides[0] = ["photo1.jpg", "", "http://www.whatever.com/"];
slides[1] = ["photo2.jpg", "", "http://www.whatever.com/"];
slides[2] = ["photo3.jpg", "", "http://www.whatever.com/"];
slides[3] = ["photo4.jpg", "", "http://www.whatever.com/"];
slides[4] = ["photo5.jpg", "", "http://www.whatever.com/"];
slides.no_descriptions=1; //use for no descriptions displayed

The links can be whatever you like, they can each be different, they can just be to pages on your site relative to the page with this script on it (like an ordinary link href). If you want to target, that would be in the next field, ex (for a new window or tab):

slides[0] = ["photo1.jpg", "", "mypage.htm", "_blank"];

This and much more is all covered in the documentation. But I know it's a lot to take in. See the //THIRD SLIDESHOW example from the Step1 code block on the demo page.

[Elbee]

All the code worked beautifully; however, I want the slideshow to appear on the far right side of my home page. I haven't been successful at accomplishing that. I tried <div class="right"> which didn't work..unless I'm not placing it in the correct area.

My code in the head:

<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}

div#show1 {
width:476px;
height:312px;
}


</style>


<div class="right">
<script type="text/javascript">

var preload_ctrl_images=true;

//And configure the image buttons' images here:
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["http://jpl.coj.net/pics/nav/home2/main_image0.jpg", "", "http://jaxpubliclibrary.org/awareness/awareness-campaign-2009.html"];
slides[1] = ["http://jpl.coj.net/pics/nav/home2/main_image1.jpg", "", "http://jaxpubliclibrary.org/res/dlmedia.html"];
slides[2] = ["http://jpl.coj.net/pics/nav/home2/main_image2.jpg", "", "http://jaxpubliclibrary.org/res/sites/index.html"];
slides[3] = ["http://jpl.coj.net/pics/nav/home2/paula-deen.jpg", "", "http://jaxpubliclibrary.org/res/readers.html"];
slides[4] = ["http://jpl.coj.net/pics/nav/home2/retirement.jpg", "", "http://jaxpubliclibrary.org/coll/index.html"];
slides.no_descriptions=1; //use for no descriptions displayed
//above slide show uses only the defaults

</script></div>

<script src="/common/javascripts/swissarmy.js" type="text/javascript">

/***********************************************
* Swiss Army Image slide show script - © John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>



My code in the body:

<p>
<script type="text/javascript">
new inter_slide(slides)
</script>
</p>

I appreciate any help you can give me. Thank you.

[jscheuer1]

Putting a div in the head is technically invalid and won't usually do anything in a case like this.

To really know how to advise you on that, I would probably need to see the page. But try this - get rid of that div in the head, and in the body, instead of:

<p>
<script type="text/javascript">
new inter_slide(slides)
</script>
</p>

use:

<div style="float: right; width: 476px; height: 312px;">
<script type="text/javascript">
new inter_slide(slides)
</script>
</div>

Make sure the width and height reflect the width of the widest image and the height of the tallest image.

But, as I say, this depends upon the rest of your page, so if you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[Elbee]

Hi John,
The code you gave me did move it to the right successfully; however, only the top half of the buttons appeared and the fonts on all the menus became larger.

This is the page I started trying to incorporate the Swiss Army Image Slideshow into:

http://jaxpubliclibrary.org/welcome-dynamic.html

This is what happened when I added the last code you sent:
http://jaxpubliclibrary.org/welcome-new.html


Thanks for your expert help!

[Elbee]

I figured it out John! It was my style sheets. Once I adjusted some of that information, it now looks good.

Thanks for all your help, Elbee (really Linda but that was taken)