Link to home
Start Free TrialLog in
Avatar of egoselfaxis
egoselfaxis

asked on

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

Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

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])};
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

>> 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.
SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of egoselfaxis
egoselfaxis

ASKER

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
>>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.
>>to see it it...
I meant to write:
to see if it...
what about my suggestion? did it worked?
>>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.
As per his original question, only target he wants to specify is 'blank'
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
>>I suspect that the problem is with this line:
Bingo! He needed a closure!
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
(It's the leftmost small ad at the bottom)
>>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!
True, that element is not required
Yep - that did it!  Thanks gurvinder372!

- Yvan
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?
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
>>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