PDA

View Full Version : Need URL to open in new window



superbeetle
04-01-2014, 01:44 AM
Hello,

I finally found a slideshow script for my VW website that works with Apple and windows. The problem is I need the URLs to open in a new window. Can this be added to this script? Thanks in advance.


<script language="JavaScript1.2">

//Presentational Slideshow Script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for legal use

var slideshow_width='468px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='60px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=4000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
var slidebgcolor="white"

var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="images/ahp.jpg"
dropimages[1]="images/aac.jpg"
dropimages[2]="images/cip.jpg"
dropimages[3]="images/mam.jpg"
dropimages[4]="images/tlp.jpg"

var droplinks=new Array()
//SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
droplinks[0]="http://www.airheadparts.com/"
droplinks[1]="http://www.allaircooled.com/"
droplinks[2]="https://www2.cip1.com/?Click=140639"
droplinks[3]="http://www.mamotorworks.com/vw/?KC=892"
droplinks[4]="http://toplineparts.com/"


////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else
document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

var curpos=parseInt(slideshow_width)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=linkindex=0
var nextimageindex=1


function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{

clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function rotatelink(){
if (droplinks[linkindex]!="")
window.location=droplinks[linkindex]
}

function resetit(what){
curpos=parseInt(slideshow_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>

Beverleyh
04-01-2014, 05:49 AM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

The script looks quite old so you should look at more robust, modern alternatives, but have you tried adding the usual target attribute (with value of "_blank") to the anchor tags? http://www.w3schools.com/tags/att_a_target.asp

superbeetle
04-01-2014, 10:32 AM
This was my first post and I didn't know the format for posting issues with DD scripts. I have posted my question in the DD scripts section properly. I did try adding the _blank to the URL but wasn't quite sure how to add it to the code. Thanks for your help.

vwphillips
04-01-2014, 11:12 AM
with the target="_Blank"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<script type="text/javascript">
//Presentational Slideshow Script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for legal use

var slideshow_width='200px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='200px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=4000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
var slidebgcolor="white"

var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="http://www.vicsjavascripts.org/StdImages/1.gif"
dropimages[1]="http://www.vicsjavascripts.org/StdImages/2.gif"
dropimages[2]="http://www.vicsjavascripts.org/StdImages/3.gif"
dropimages[3]="http://www.vicsjavascripts.org/StdImages/4.gif"
dropimages[4]="http://www.vicsjavascripts.org/StdImages/5.gif"

var droplinks=new Array()
//SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
droplinks[0]="http://www.airheadparts.com/"
droplinks[1]="http://www.allaircooled.com/"
droplinks[2]="https://www2.cip1.com/?Click=140639"
droplinks[3]="http://www.mamotorworks.com/vw/?KC=892"
droplinks[4]="http://toplineparts.com/"


////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else
document.write('<a href="javascript:rotatelink();" target="_Blank" ><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

var curpos=parseInt(slideshow_width)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=linkindex=0
var nextimageindex=1


function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{

clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'" target="_Blank" >'+slideimage+'</a>' : slideimage
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function rotatelink(){
if (droplinks[linkindex]!="")
window.location=droplinks[linkindex]
}

function resetit(what){
curpos=parseInt(slideshow_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'" target="_Blank" ><img src="'+dropimages[curimageindex]+'" border=0></a>'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>
</body>

</html>

vwphillips
04-01-2014, 11:13 AM
a modern version




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#parent {
position:absolute;left:100px;top:100px;width:350px;height:263px;border:solid red 1px;
}

#parent .slide {
width:350px;height:263px;border-Width:0px;
}

/* Pagination */

#pagination {
position:absolute;z-Index:10;left:0px;top:240px;width:350px;
}

#pagination .page {
position:relative;left:140px;top:4px;width:16px;height:16px;float:left;margin-Right:5px;background-Color:red;text-Align:center;font-Size:12px;cursor:pointer;
}


#pagination .current {
background-Color:green;
}

/*]]>*/
</style></head>

<body>
<input type="button" name="" value="Next" onclick="zxcSlideSlideShow.Next('parent',1);"/>
<input type="button" name="" value="Back" onclick="zxcSlideSlideShow.Next('parent',11);"/>
<input type="button" name="" value="Auto" onclick="zxcSlideSlideShow.Auto('parent');"/>
<input type="button" name="" value="Pause" onclick="zxcSlideSlideShow.Pause('parent');"/>
<input type="button" name="" value="GoTo 0" onclick="zxcSlideSlideShow.GoTo('parent',0);"/>
<input type="button" name="" value="GoTo 1" onclick="zxcSlideSlideShow.GoTo('parent',1);"/>
<input type="button" name="" value="GoTo 2" onclick="zxcSlideSlideShow.GoTo('parent',2);"/>

<div id="parent" >
<div id="pagination" >
<div class="page" ></div>
</div>

</div>

<script type="text/javascript">
/*<![CDATA[*/
// Slide Slide Show. (01-April-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/


var zxcSlideSlideShow={

Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
this.rotate(o,o.n+ud,false);
}
},

GoTo:function(id,n){
var o=this['zxc'+id];
if (o&&o.a[n]&&n!=o.n){
o.ud=n>o.n?1:-1;
this.rotate(o,n,false);
}
},

Auto:function(id,ms){
var o=this['zxc'+id],oop=this;
if (o){
o.to=setTimeout(function(){ oop.rotate(o,o.n,true); },ms||200);
}
},

Pause:function(id){
var o=this['zxc'+id],z2=0;
if (o){
clearTimeout(o.to);
o.auto=false;
}
},

init:function(o){
var id=o.ParentID,ia=o.ImageArray,m=o.Mode,add=o.AddEvents,f=o.FadeIn,days=o.Persistence,ms=o.Animation,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),ss= p?this.bycls('slide',p):[],pag=document.getElementById(o.PaginateID),ps=pag?this.bycls('page',pag):null,a,i,z0=0;
if (p&&ia instanceof Array){
for (;z0<ia.length;z0++){
if (ia[z0]&&ia[z0][0]){
a=document.createElement('A');
i=document.createElement('IMG');
i.src=ia[z0][0];
i.className='slide';
ia[z0][1]?a.href=ia[z0][1]:null;
ia[z0][2]?a.target=ia[z0][2]:null;
a.appendChild(i);
p.appendChild(a);
}
}
o.ImageArray=null;
this.init(o);
}
else if (ss[0]){
var m=typeof(m)=='string'?m.charAt(0).toUpperCase():'H',days=(typeof(days)=='number'&&days>0)||days=='session'?days:-1,n=days!=-1?this.cookie(id)*1:0,w=p.offsetWidth,h=p.offsetHeight,pge=ps[0]?ps[0]:document.createElement('DIV'),add=typeof(add)=='object'&&add.constructor==Array?add:[],t,z0=0,z1=0,z2=0;
var m=m=='V'?['top','left',h]:['left','top',w]
p.style.overflow='hidden';
o.a=[];
pge.className='page';
for (;z0<ss.length;z0++){
ss[z0].style.position='absolute';
ss[z0].style.zIndex='0';
ss[z0].style[m[0]]='0px';
ss[z0].style[m[1]]=(z0!=n?-3000:0)+'px';
ss[z0].style.width=w+'px';
ss[z0].style.height=h+'px';
pge=ps[z0]?ps[z0]:pge.cloneNode(false);
if (pag&&!ps[z0]){
pag.appendChild(pge);
}
o.a[z0]=[ss[z0],m[0],pge,pge.className];
}
for (;z1<ss.length;z1++){
this.addevt(o.a[z1][2],'mouseup','GoTo',id,z1);
}
for (;z2<add.length;z2++){
if (add[z2]&&this[add[z2][2]]&&document.getElementById(add[z2][0])){
t=add[z2][1];
this.addevt(document.getElementById(add[z2][0]),t=='mouseover'||t=='mouseout'||t=='click'?t:'mouseup',add[z2][2],id,add[z2][3]);
}
}
o.a[n][2].className=o.a[n][3]+' current';
o.id=id;
o.m=m;
o.so=o.SlideOut!==false;
o.n=n;
o.lgth=z0-1;
o.sz=m[2];
o.ud=1;
o.days=days;
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.h=typeof(h)=='number'&&h>20?ms:ms*4;
o.f=typeof(f)=='number'&&f>0?f:null;
this['zxc'+id]=o;
typeof(s)=='number'&&s>0?this.Auto(id,s):null;
}
},

rotate:function (o,n,a){
this.Pause(o.id);
o.auto=a===true;
o.auto?n=n+o.ud:null;
n=n>o.lgth?0:n<0?o.lgth:n;
o.a[o.n][0].style.zIndex='0';
o.a[n][0].style.zIndex='1';
o.a[o.n][2].className=o.a[o.n][3];
o.a[n][2].className=o.a[n][3]+' current';
o.f?this.opc(o.a[n][0],o.f):null;
o.so?this.animate(o,o.a[o.n],0,o.sz*o.ud,new Date(),o.ms,o.n):null;
this.animate(o,o.a[n],o.sz*-o.ud,0,new Date(),o.ms,o.n);
o.a[n][0].style[o.m[1]]='0px';
document.cookie=o.id+'='+n+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/;':';');
o.n=n;
},

animate:function(o,a,f,t,srt,mS,m){
clearTimeout(a[5]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[0].style[a[1]]=n+'px';
}
if (ms<mS){
a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,m); },10);
}
else {
a[0].style[a[1]]=t+'px';
t==0?o.a[m][0].style[o.m[1]]='-3000px':null;
o.f?this.opc(a[0],100):null;
o.auto?oop.Auto(o.id,o.h):null;
}
},

opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},

cookie:function(nme){
var re=new RegExp(nme+'=[^;]+','i');
return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:0;
},

addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
},

bycls:function (n,o,t){
for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){
if((' '+c[z0].className+' ').match(' '+n+' ')){
a.push(c[z0]);
}
}
return a;
}

}

// N.B. all sides must have a class name including the keyword 'slide'.
zxcSlideSlideShow.init({
ParentID:'parent', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the mode of execution, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
SlideOut:false, //(optional) false = slideout is disabled . (boolean, default = true = slideout is enabled)
ImageArray:[ //(optional) the animation duration in milli seconds. (array, default = inline HTML elements)
// field 0 = the image SRC.
// field 1 = (optional) the image link HREF.
// field 2 = (optional) the image link HREF target.
['http://www.vicsjavascripts.org/StdImages/1.gif','http://www.vicsjavascripts.org/','_Blank'],
['http://www.vicsjavascripts.org/StdImages/2.gif','http://www.vicsjavascripts.org/','_Blank'],
['http://www.vicsjavascripts.org/StdImages/3.gif','http://www.vicsjavascripts.org/','_Blank'],
],
Animation:1000, //(optional) the animation duration in milli seconds. (number, default = 1000)
AutoHold:3000, //(optional) the auto rotation hold delay in milli seconds. (number, default = Animation*4)
AutoStart:1000, //(optional) the delay before starting auto rotation in milli seconds. (number, default = no auto start)
FadeIn:70, //(optional) the fade in opacity(0 to 100). (number, default = no fade in)
PaginateID:'pagination', //(optional) the unique ID name of the pagination parent DIV. (string, default = no pagination)
AddEvents:[ //(optional) an array of arrays defining the event calls to add. (array, default = inline event calls)
// field 0 = the unique ID name of the object to add the call to.
// field 1 = the event type, 'mouseover', mouseout, mouseup', mousedown' or 'click'.
// field 2 = the script function to call.
// field 3 = the parameter to pass to the script function.
['parent','mouseover','Pause'],
['parent','mouseout','Auto']
],
Persistence:1 //(optional) the number of days to restore the last display. (number, default = -1)
//(optional) 'session' = restore the last display for the browser session. (number, default = -1 days)
});

/*]]>*/
</script>
</body>

</html>

superbeetle
04-01-2014, 06:31 PM
I can't thank you enough!! Cheers!