Display Link to Rotating Image in New Window

[Elbee]

1) Script Title: Dynamic Drive DHTML Scripts- Swiss Army Image Slideshow

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

3) Describe problem:
I use the first demo example of the three shown. Is there a way of having the link for the rotating image display in a new window?

Thank you for your help.

[jscheuer1]

It depends upon how much control you want to exert over the new window. The easiest and least control would be to simply specify a target for the slide group:

<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] = ["/pics/nav/home2/music-club_manatella.jpg", "", "/progs/main/manatella.pdf"];
 slides[1] = ["/pics/nav/home2/teen-read-week2011.jpg", "", "/teens/teen-read-week2011.pdf"];
 slides[2] = ["/pics/nav/home2/oceanway-express.jpg", "", "/lib/branches/OWY.html"];
 slides[3] = ["/pics/nav/home2/jea-green.jpg", "", "/progs/jpl/home-energy-evaluation.html"];
 slides[4] = ["/pics/nav/home2/childrens-summer-reading.jpg", "", "/kids/kids-summer-reading2011.pdf"];
 slides[5] = ["/pics/nav/home2/teen-summer-reading.jpg", "", "/teens/teens-summer-reading2011.pdf"];
 slides[6] = ["/pics/nav/home2/internet-safety.jpg", "", "/Training/Internet-Safety/internet-safety.html"];
 slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed
slides.target='_new';
 </script>

You can also specify specs, this will usually force a new window, as opposed to a (possibly, depends upon the browser, most now do new tabs if there are no specs) new tab:

<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] = ["/pics/nav/home2/music-club_manatella.jpg", "", "/progs/main/manatella.pdf"];
 slides[1] = ["/pics/nav/home2/teen-read-week2011.jpg", "", "/teens/teen-read-week2011.pdf"];
 slides[2] = ["/pics/nav/home2/oceanway-express.jpg", "", "/lib/branches/OWY.html"];
 slides[3] = ["/pics/nav/home2/jea-green.jpg", "", "/progs/jpl/home-energy-evaluation.html"];
 slides[4] = ["/pics/nav/home2/childrens-summer-reading.jpg", "", "/kids/kids-summer-reading2011.pdf"];
 slides[5] = ["/pics/nav/home2/teen-summer-reading.jpg", "", "/teens/teens-summer-reading2011.pdf"];
 slides[6] = ["/pics/nav/home2/internet-safety.jpg", "", "/Training/Internet-Safety/internet-safety.html"];
 slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed
slides.target='_new';
slides.specs='width=300, height=250, top=150, left=200, scrollbars, resizable, location'
 </script>

You can even specify targets and/or specs for individual entries in the array. From the demo page:

• target='_new' - Set a target for a slide group, will be overridden by array_name[#][3], if present
  
  
• specs='width=300, height=250, top=150, left=200, scrollbars, resizable, location' - Set new window specifications for a slide group, will be overridden by array_name[#][4], if present

So you could do like:

<script type="text/javascript">
 var preload_ctrl_images=false;

 var slides=[]; //FIRST SLIDESHOW
 //configure the below images and descriptions to your own.
 slides[0] = ["/pics/nav/home2/music-club_manatella.jpg", "", "/progs/main/manatella.pdf"];
 slides[1] = ["/pics/nav/home2/teen-read-week2011.jpg", "", "/teens/teen-read-week2011.pdf"];
 slides[2] = ["/pics/nav/home2/oceanway-express.jpg", "", "/lib/branches/OWY.html", "_blank", "width=600, height=500, top=100, left=100, scrollbars, resizable, location"];
 slides[3] = ["/pics/nav/home2/jea-green.jpg", "", "/progs/jpl/home-energy-evaluation.html"];
 slides[4] = ["/pics/nav/home2/childrens-summer-reading.jpg", "", "/kids/kids-summer-reading2011.pdf"];
 slides[5] = ["/pics/nav/home2/teen-summer-reading.jpg", "", "/teens/teens-summer-reading2011.pdf"];
 slides[6] = ["/pics/nav/home2/internet-safety.jpg", "", "/Training/Internet-Safety/internet-safety.html"];
 slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed
slides.target='_new';
slides.specs='width=300, height=250, top=150, left=200, scrollbars, resizable, location'
 </script>

And all of them would open in _new with those specs, except slides[2], which has a target of _blank and different specs.



Unrelated - If you're not using image buttons change this part:

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';

to (like I just did in the last example):

var preload_ctrl_images=false;

Oh, I see you're not using image buttons, just checked the page, so make the change.

[Elbee]

Praise the Lord and John Scheuer!!!!

It works great. Thanks, John