PDA

View Full Version : Display Link to Rotating Image in New Window



Elbee
06-30-2011, 01:40 PM
1) Script Title: Dynamic Drive DHTML Scripts- Swiss Army Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/swissarmy/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
07-29-2011, 04:39 PM
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
07-29-2011, 04:58 PM
Praise the Lord and John Scheuer!!!!

It works great. Thanks, John