Solved

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

Posted on 2011-09-08
21
193 Views
Last Modified: 2012-08-13
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
Comment
Question by:egoselfaxis
  • 10
  • 6
  • 5
21 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36505205
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
 
LVL 82

Expert Comment

by:hielo
ID: 36505238
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
 
LVL 82

Expert Comment

by:hielo
ID: 36505259
>> 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
 
LVL 82

Assisted Solution

by:hielo
hielo earned 100 total points
ID: 36505295
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
 

Author Comment

by:egoselfaxis
ID: 36505371
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
 
LVL 82

Expert Comment

by:hielo
ID: 36505542
>>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
 
LVL 82

Expert Comment

by:hielo
ID: 36505555
>>to see it it...
I meant to write:
to see if it...
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36505561
what about my suggestion? did it worked?
0
 
LVL 82

Expert Comment

by:hielo
ID: 36505624
>>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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36505688
As per his original question, only target he wants to specify is 'blank'
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:egoselfaxis
ID: 36505707
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
 
LVL 82

Expert Comment

by:hielo
ID: 36505729
>>I suspect that the problem is with this line:
Bingo! He needed a closure!
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 400 total points
ID: 36505730
Okay replace that by

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

Author Comment

by:egoselfaxis
ID: 36505738
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
 

Author Comment

by:egoselfaxis
ID: 36505747
(It's the leftmost small ad at the bottom)
0
 
LVL 82

Expert Comment

by:hielo
ID: 36505753
>>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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36505760
True, that element is not required
0
 

Author Comment

by:egoselfaxis
ID: 36505762
Yep - that did it!  Thanks gurvinder372!

- Yvan
0
 
LVL 82

Expert Comment

by:hielo
ID: 36505874
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
 

Author Comment

by:egoselfaxis
ID: 36505937
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
 
LVL 82

Expert Comment

by:hielo
ID: 36506067
>>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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now