[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 203
  • Last Modified:

need to update slideshow javascript so that target attribute can be specified for links

I have the following slideshow javascript code (see attached).  

How would I update the script so that target attributes can be specified for each of the links?  

For example, . some of the links are to PDF files, .. in which case I'd like to specify target="_blank".

Please advise.

Thanks!
- Yvan
var slideShowSpeed = 4000

var crossFadeDuration = 3

var Pic = [
		   
['slideshow/add_small_holidaycookbooks.jpg','successstories/BookCompany2011_Holiday_cookbooks.pdf'],	   

['slideshow/ad_small_top1015.jpg','successstories/BookCompany2011_Under$16GiftBooks.pdf'],

['slideshow/ad_small_top1020.jpg','successstories/BookCompany2011_CoffeeTableBooks.pdf']];

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i][0];
}

function runSlideShow1(){

   if (document.all){
      document.images.SlideShow1.style.filter="blendTrans(duration=2)"
      document.images.SlideShow1.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow1.filters.blendTrans.Apply()
   }
   document.images.SlideShow1.src = preLoad[j].src
   document.images.SlideShow1.link = Pic[j][1];
   document.images.SlideShow1.onclick = function(){location=this.link};
   if (document.all){
      document.images.SlideShow1.filters.blendTrans.Play()
   }
   j = j + 1;
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow1()', slideShowSpeed)
}




var slideShowSpeedB = 5000

var crossFadeDurationB = 3

var PicB = [
		   
['slideshow/ad_small_custjourn.jpg','custom.cfm'],  

['slideshow/ad_small_michelin_custom_atlas.jpg','michelin.cfm'], 
		   
['slideshow/ad_small_custsudoku.jpg','sudoku.cfm'],

['slideshow/ad_small_custpapers.jpg','newspapers.cfm']];

var tB
var jB = 0
var pB = PicB.length

var preLoadB = new Array()
for (iB = 0; iB < pB; iB++){
   preLoadB[iB] = new Image()
   preLoadB[iB].src = PicB[iB][0];
}

function runSlideShow2(){

   if (document.all){
      document.images.SlideShow2.style.filter="blendTrans(duration=2)"
      document.images.SlideShow2.style.filter="blendTrans(duration=crossFadeDurationB)"
      document.images.SlideShow2.filters.blendTrans.Apply()
   }
   document.images.SlideShow2.src = preLoadB[jB].src
   document.images.SlideShow2.link = PicB[jB][1];
   document.images.SlideShow2.onclick = function(){location=this.link};
   if (document.all){
      document.images.SlideShow2.filters.blendTrans.Play()
   }
   jB = jB + 1;
   if (jB > (pB-1)) jB=0
   tB = setTimeout('runSlideShow2()', slideShowSpeedB)
}








var slideShowSpeedC = 6000

var crossFadeDurationC = 3

var PicC = [
		   
['slideshow/ad_small_frames.jpg','frames.cfm']];

var tC
var jC = 0
var pC = PicC.length

var preLoadC = new Array()
for (iC = 0; iC < pC; iC++){
   preLoadC[iC] = new Image()
   preLoadC[iC].src = PicC[iC][0];
}

function runSlideShow3(){

   if (document.all){
      document.images.SlideShow3.style.filter="blendTrans(duration=2)"
      document.images.SlideShow3.style.filter="blendTrans(duration=crossFadeDurationC)"
      document.images.SlideShow3.filters.blendTrans.Apply()
   }
   document.images.SlideShow3.src = preLoadC[jC].src
   document.images.SlideShow3.link = PicC[jC][1];
   document.images.SlideShow3.onclick = function(){location=this.link};
   if (document.all){
      document.images.SlideShow3.filters.blendTrans.Play()
   }
   jC = jC + 1;
   if (jC > (pC-1)) jC=0
   tC = setTimeout('runSlideShow3()', slideShowSpeedC)
}

function runSlideShows(){
	runSlideShow1();
	runSlideShow2();
	runSlideShow3();
}

Open in new window

0
egoselfaxis
Asked:
egoselfaxis
  • 10
  • 6
  • 5
2 Solutions
 
Gurvinder Pal SinghCommented:
you can make PicB array as
var Pic = [
               
['slideshow/add_small_holidaycookbooks.jpg','successstories/BookCompany2011_Holiday_cookbooks.pdf', "blank"],         

['slideshow/ad_small_top1015.jpg','successstories/BookCompany2011_Under$16GiftBooks.pdf', "blank"],

['slideshow/ad_small_top1020.jpg','successstories/BookCompany2011_CoffeeTableBooks.pdf', "blank"]];

and update line 31-32 as

document.images.SlideShow1.onclick = function(){window.open(Pic[j][1])};
0
 
hieloCommented:
try:
var slideShowSpeed = 4000

var crossFadeDuration = 3

var Pic = [
		   
['slideshow/add_small_holidaycookbooks.jpg','successstories/BookCompany2011_Holiday_cookbooks.pdf*_blank'],	   

['slideshow/ad_small_top1015.jpg','successstories/BookCompany2011_Under$16GiftBooks.pdf*_blank'],

['slideshow/ad_small_top1020.jpg','successstories/BookCompany2011_CoffeeTableBooks.pdf*_blank']];

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (var i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i][0];
}

function runSlideShow1(){

   if (document.all){
      document.images.SlideShow1.style.filter="blendTrans(duration=2)"
      document.images.SlideShow1.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow1.filters.blendTrans.Apply()
   }
   document.images.SlideShow1.src = preLoad[j].src
   document.images.SlideShow1.link = Pic[j][1];
   document.images.SlideShow1.onclick = function(){
		var temp=this.link.split('*');
		if(temp.length>1)
		{
			window.open(temp[0],temp[1],'width=600,height=400');
		}
		else
 	 		location=this.link;
		};
   if (document.all){
      document.images.SlideShow1.filters.blendTrans.Play()
   }
   j = j + 1;
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow1()', slideShowSpeed)
}




var slideShowSpeedB = 5000

var crossFadeDurationB = 3

var PicB = [
		   
['slideshow/ad_small_custjourn.jpg','custom.cfm'],  

['slideshow/ad_small_michelin_custom_atlas.jpg','michelin.cfm'], 
		   
['slideshow/ad_small_custsudoku.jpg','sudoku.cfm'],

['slideshow/ad_small_custpapers.jpg','newspapers.cfm']];

var tB
var jB = 0
var pB = PicB.length

var preLoadB = new Array()
for (iB = 0; iB < pB; iB++){
   preLoadB[iB] = new Image()
   preLoadB[iB].src = PicB[iB][0];
}

function runSlideShow2(){

   if (document.all){
      document.images.SlideShow2.style.filter="blendTrans(duration=2)"
      document.images.SlideShow2.style.filter="blendTrans(duration=crossFadeDurationB)"
      document.images.SlideShow2.filters.blendTrans.Apply()
   }
   document.images.SlideShow2.src = preLoadB[jB].src
   document.images.SlideShow2.link = PicB[jB][1];
   document.images.SlideShow2.onclick = function(){
		var temp=this.link.split('*');
		if(temp.length>1)
		{
			window.open(temp[0],temp[1],'width=600,height=400');
		}
		else
 	 		location=this.link;
   };
   if (document.all){
      document.images.SlideShow2.filters.blendTrans.Play()
   }
   jB = jB + 1;
   if (jB > (pB-1)) jB=0
   tB = setTimeout('runSlideShow2()', slideShowSpeedB)
}








var slideShowSpeedC = 6000

var crossFadeDurationC = 3

var PicC = [
		   
['slideshow/ad_small_frames.jpg','frames.cfm']];

var tC
var jC = 0
var pC = PicC.length

var preLoadC = new Array()
for (iC = 0; iC < pC; iC++){
   preLoadC[iC] = new Image()
   preLoadC[iC].src = PicC[iC][0];
}

function runSlideShow3(){

   if (document.all){
      document.images.SlideShow3.style.filter="blendTrans(duration=2)"
      document.images.SlideShow3.style.filter="blendTrans(duration=crossFadeDurationC)"
      document.images.SlideShow3.filters.blendTrans.Apply()
   }
   document.images.SlideShow3.src = preLoadC[jC].src
   document.images.SlideShow3.link = PicC[jC][1];
   document.images.SlideShow3.onclick = function(){location=this.link};
   if (document.all){
      document.images.SlideShow3.filters.blendTrans.Play()
   }
   jC = jC + 1;
   if (jC > (pC-1)) jC=0
   tC = setTimeout('runSlideShow3()', slideShowSpeedC)
}

function runSlideShows(){
	runSlideShow1();
	runSlideShow2();
	runSlideShow3();
}

Open in new window

0
 
hieloCommented:
>> in which case I'd like to specify target="_blank".
FYI: the target attribute is not supported by <img> elements, which is what your code uses.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
hieloCommented:
Here's another implementation:
var slideShowSpeed = 4000

var crossFadeDuration = 3

var Pic = [
		   
['slideshow/add_small_holidaycookbooks.jpg','successstories/BookCompany2011_Holiday_cookbooks.pdf','_blank'],	   

['slideshow/ad_small_top1015.jpg','successstories/BookCompany2011_Under$16GiftBooks.pdf','_blank'],

['slideshow/ad_small_top1020.jpg','successstories/BookCompany2011_CoffeeTableBooks.pdf','_blank']];

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (var i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i][0];
}

function runSlideShow1(){

   if (document.all){
      document.images.SlideShow1.style.filter="blendTrans(duration=2)"
      document.images.SlideShow1.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow1.filters.blendTrans.Apply()
   }
   document.images.SlideShow1.src = preLoad[j].src
   document.images.SlideShow1.link = Pic[j][1];
   document.images.SlideShow1.onclick = (function(link,target){
   			return function(){
   			if(target)
				window.open(link,target,'width=600,height=400');
			else
	 	 		location=link;
			}
		})(Pic[j][1],Pic[j][2]);
   if (document.all){
      document.images.SlideShow1.filters.blendTrans.Play()
   }
   j = j + 1;
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow1()', slideShowSpeed)
}




var slideShowSpeedB = 5000

var crossFadeDurationB = 3

var PicB = [
		   
['slideshow/ad_small_custjourn.jpg','custom.cfm'],  

['slideshow/ad_small_michelin_custom_atlas.jpg','michelin.cfm'], 
		   
['slideshow/ad_small_custsudoku.jpg','sudoku.cfm'],

['slideshow/ad_small_custpapers.jpg','newspapers.cfm']];

var tB
var jB = 0
var pB = PicB.length

var preLoadB = new Array()
for (iB = 0; iB < pB; iB++){
   preLoadB[iB] = new Image()
   preLoadB[iB].src = PicB[iB][0];
}

function runSlideShow2(){

   if (document.all){
      document.images.SlideShow2.style.filter="blendTrans(duration=2)"
      document.images.SlideShow2.style.filter="blendTrans(duration=crossFadeDurationB)"
      document.images.SlideShow2.filters.blendTrans.Apply()
   }
   document.images.SlideShow2.src = preLoadB[jB].src
   document.images.SlideShow2.link = PicB[jB][1];

   document.images.SlideShow2.onclick = (function(link,target){
   			return function(){
   			if(target)
				window.open(link,target,'width=600,height=400');
			else
	 	 		location=link;
			}
		})(PicB[jB][1],PicB[jB][2]);


   if (document.all){
      document.images.SlideShow2.filters.blendTrans.Play()
   }
   jB = jB + 1;
   if (jB > (pB-1)) jB=0
   tB = setTimeout('runSlideShow2()', slideShowSpeedB)
}








var slideShowSpeedC = 6000

var crossFadeDurationC = 3

var PicC = [
		   
['slideshow/ad_small_frames.jpg','frames.cfm']];

var tC
var jC = 0
var pC = PicC.length

var preLoadC = new Array()
for (iC = 0; iC < pC; iC++){
   preLoadC[iC] = new Image()
   preLoadC[iC].src = PicC[iC][0];
}

function runSlideShow3(){

   if (document.all){
      document.images.SlideShow3.style.filter="blendTrans(duration=2)"
      document.images.SlideShow3.style.filter="blendTrans(duration=crossFadeDurationC)"
      document.images.SlideShow3.filters.blendTrans.Apply()
   }
   document.images.SlideShow3.src = preLoadC[jC].src
   document.images.SlideShow3.link = PicC[jC][1];
   document.images.SlideShow3.onclick = function(){location=this.link};
   if (document.all){
      document.images.SlideShow3.filters.blendTrans.Play()
   }
   jC = jC + 1;
   if (jC > (pC-1)) jC=0
   tC = setTimeout('runSlideShow3()', slideShowSpeedC)
}

function runSlideShows(){
	runSlideShow1();
	runSlideShow2();
	runSlideShow3();
}

Open in new window

0
 
egoselfaxisAuthor Commented:
Hielo -- both of your implementations work for me (thank you) --- but are you saying that it's not possible for me to specify target="_blank" ?  ( I was hoping that I'd be able to get the PDFs to open in a new tab ... instead of in a popup window )

- Yvan
0
 
hieloCommented:
>>Hielo -- both of your implementations work for me
:)

>> (thank you)
You are welcome.

>>but are you saying that it's not possible for me to specify target="_blank"
Correct. Currently you are NOT using links -ex:
<a href="" target="_blank">...</a>

Instead, this:
 document.images

is a collection of <img> elements, which does not support "target".  

On my code, try replacing:
window.open(link,target,'width=600,height=400');

with:
window[target].location.href=link;

to see it it "simulates" the "target" functionality.
0
 
hieloCommented:
>>to see it it...
I meant to write:
to see if it...
0
 
Gurvinder Pal SinghCommented:
what about my suggestion? did it worked?
0
 
hieloCommented:
>>what about my suggestion?
You are opening the link in a new window "indiscriminately", making the point of having "blank" moot.  He wants to be able to have the flexibility of specifying the target for "some" links.
0
 
Gurvinder Pal SinghCommented:
As per his original question, only target he wants to specify is 'blank'
0
 
egoselfaxisAuthor Commented:
gurvinder372 - although the PDFs are opening in a new tab, --- the wrong PDF file is being opened.  In fact, I'm not really sure where it's coming from, as it appears to be random.

I suspect that the problem is with this line:

document.images.SlideShow1.onclick = function(){window.open(Pic[j][1])};

- Yvan
0
 
hieloCommented:
>>I suspect that the problem is with this line:
Bingo! He needed a closure!
0
 
Gurvinder Pal SinghCommented:
Okay replace that by

document.images.SlideShow1.link = Pic[j][1];
document.images.SlideShow1.onclick = function(){window.open(this.link)};
0
 
egoselfaxisAuthor Commented:
Actually - I think the PDF links just aren't matching up with their slides. They seem to be off by 1.

http://thebookco.com/

- yg
0
 
egoselfaxisAuthor Commented:
(It's the leftmost small ad at the bottom)
0
 
hieloCommented:
>>As per his original question, only target he wants to specify is 'blank'
OK, then what's the point of having  ...,file.pdf','blank'); if you are always going to do window.open?  You are not using the third element in the array for anything!
0
 
Gurvinder Pal SinghCommented:
True, that element is not required
0
 
egoselfaxisAuthor Commented:
Yep - that did it!  Thanks gurvinder372!

- Yvan
0
 
hieloCommented:
Yvan,
The solution you accepted uses window.open which I CORRECTLY implemented it first ID:36505238 and ID:36505295.

So, what's with the grading done here?
0
 
egoselfaxisAuthor Commented:
I used gurvinder372's solution ... which opens the pdfs in a new tab like I wanted. (Both your versions spawned new browser windows)  The points I awarded you were not a "grade".  I hope you didn't take offense.  (Is it possible for me to go back and change the points distribution?)

- Yvan
0
 
hieloCommented:
>>Is it possible for me to go back and change the points distribution
You would need to ask for the question to be reopened for re-grading. Don't worry about it.

I just wanted to understand your rationale.  Since you stated "Hielo -- both of your implementations work for me (thank you) " earlier on, I was expecting at least 50/50 split.  You obviously cannot use two solutions at once for the same problem, but the accepted solution does not necessarily have to take the majority of points but "Both your versions spawned new browser windows " makes a difference.


Regards,
Hielo
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 10
  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now