adding unique link to each timed banner

@mattgolfsNov 10.2013

~~[COLOR=#000000]~~Hello,[/COLOR]~~[COLOR=#ff0000]~~
[/COLOR]
I snarfed a java script online that did as advertised: Allowed pics to be displayed in a rotating manner based on a time
value you set in the script. I don’t know if I can attach the script (this is my first time trying) so I will paste it here. It’s fairly
short. I’ve done a little bit of C and PHP programming, but I am a weekend warrior. Looking for a pro to help out. Here goes:

~~[COLOR=#0000cd]~~var bannerImg = new Array();
// Enter the names of the images below
bannerImg[0]=”/images/cover one.png”;
bannerImg[1]=”/images/cover two.png”;
bannerImg[2]=”/images/cover three.png”;

var newBanner = 0;
var totalBan = bannerImg.length;[/COLOR]

~~[COLOR=#0000cd]~~function cycleBan() {
newBanner++;
if (newBanner == totalBan) {
newBanner = 0;
}
document.banner.src=bannerImg[newBanner];
// set the time below for length of image display
// i.e., “4*1000″ is 4 seconds
setTimeout(“cycleBan()”, 4*1000);
}
window.onload=cycleBan;[/COLOR]

Most of it seems pretty straight forward:

1) create an array then stuff your pics in it.
2) set a couple of variables, one that equals 0 and the other the length of the array
3) create a function and begin it with ‘For Loop’ with a counter so you don’t count past the length of the array (all very C’ish so far)

The next line starts to get a little weird for someone who doesn’t work with javascript. It’s assigning ~~[COLOR=#0000cd]~~document.banner.src [/COLOR]~~[COLOR=#000000]~~equal to what’s in the zero position of the array. Then it wait’s for 4 seconds and exits the function. Then the line ~~[COLOR=#0000cd]~~window.onload=cycleBan; [/COLOR]not sure what that means. I can only deduce that since it has .onload in it, that it loads up the pic and displays it? Then the script counts through and displays all the pics.

But what really weirds me out is what I have to put in the cell to make it all work:

[/COLOR]~~[COLOR=#0000cd]~~<TD width=342 height=410 border=0 valign=top align=center><img src=”image_jss.gif” name=”banner”border=0><TD>[/COLOR]~~[COLOR=#000000]~~

Img src=”image_jss.gif” what’s that all about? I mean, it works and all, put my pics are .png and you have to have name=banner too or it won’t work. Anyway, Is there a way that when one of the pics is displayed on the webpage a link can be assigned to it? then when the pic changes, a different link can be assigned? And so on? I could have asked all this without going through the code, but I thought it would be a good chance to learn a little more about how javascript works.

much appreciated,
Matt
[/COLOR]~~[COLOR=#000000]~~[/COLOR]~~[COLOR=#000000]~~[/COLOR]

to post a comment

JavaScript

5 Comments(s) _↴

@rootNov 10.2013 — #I would use an array of objects.

[CODE]YourArrayData = [{src:"/images/cover one.png",href:"link1.html",duration:4000},
 {src:"/images/cover two.png",href:"link2.html",duration:8000}, ...];[/CODE]

You then have to rotate the array rather than keep count and save on a variable.

[CODE]var tmp = YourArrayData.shift(); // remove first element
 YourArrayData.push( tmp ); // put back on array[/CODE]

your tmp variable is now an object containing the data you need...

tmp.src can be used to set the src element of an image tag <img

tmp.href can be used directly to set the href tag of the link <a

tmp.duration can be used to set the time out fir the display allowing you to have different timings for each banner.

So you would need something like

[CODE]<a id="bannerLink" href="#"><img id="bannerImg" src="image_jss.gif" name="banner" border=0></a> 
 
 bImg = document.getElementById("bannerImg");
 bLink = document.getElementById("bannerLink");
 
 bImh.src = tmp.src;
 bLink.href = tmp.href;
 
 setTimeout("nextBannerRotationFunctionCall()",tmp.duration);
 [/CODE]

You get the picture...

You can add other information in the object data and apply it to the <a and <img tags such as title and even functions.

@mattgolfsauthorNov 11.2013 — #Whoa, looks like this is a little bit above my pay grade. I may have to stare at it for a few days.

thanks,

Matt

@rootNov 11.2013 — #Its fairly simple when you look at what the data is.

1. You have an array

2. The array has "Objects" which is a fancy array that allows you to name stuff

3. you don't have a loop counter and no checking of the array length to contend with because you are not moving a "pointer", you are moving the data while grabbing a copy of the current data from the array, that data is the object.

4. you access the data by its "property" .src and .href

5. the objects in the array can contain more elements that describe other items you want to have set like the image tags title.

6. you then set a timer function to call the update routine that starts the whole process of grabbing an object from the array, stuffing it back in to the array...

@rootNov 11.2013 — #If it helps... you could use something like this which is out of my head and untested but in theory would work if you changed the names of target elements...

[CODE]
 banner = {
 img:[],
 init:function(){
 if(this.img.length){
 clearInterval(banner.auto);
 this.targetImg = document.getElementById("theTargetImage");
 this.targetLnk = document.getElementById("theTargetLink");
 }
 this.update();
 },
 addData:function(dataObj){
 this.img.push(dataObj);
 },
 rotateArray = function(){
 var tmp = this.img.shift();
 this.img.push( tmp );
 return tmp;
 },
 update:function(){
 var i = this.rotateArray();
 this.targetImg.src = i.src;
 this.targetLnk.href = "/images/"+i.href;
 this.auto = setTimeout("banner.update();",i.duration);
 },
 auto:setInterval("banner.init()",2000)
 }
 // now add some data
 banner.addData({src:"cover one.png", href:"link1.html", duration:4000});
 banner.addData({src:"cover two.png", href:"link2.html", duration:8000});
 banner.addData({src:"cover three.png", href:"link3.html", duration:5000});
 [/CODE]

@rootNov 12.2013 — #Maybe it would help to explain so you understand the function.

banner is a JSON variable that contains functions and variables.

When the script is loaded, the value of banner.auto is set and that is a setInterval timer that is called every 2 seconds and the function that is called is banner.init()

the init() function is set to check if the array that holds the images has any data, if it has then it cleared the interval timer and grabs the identity of the two elements you will be setting with the image and link data. The function calls the function update() which should be inside the if(){} conditional but typo made if outside of it...

Once the update function is called the data in the array is obtained, these are objects.

The array removes the first element in the array in to a variable tmp then pushes it on to the back of the array and then returns an object, eg {src:"cover one.png", href:"link1.html", duration:4000}

This is returned to the variable i, this means that I now has properties that can be accessed by using the property name like i.src which is the value in that returned object.

The target properties are now set with this information, your image chages and the link values of the click link also change.

The process is then called again by a setTimeout event which has its duration set by the current object and the whole process starts again and runs while you have an array with images in.

IMHO a routine like this is better because you can add features, extend the object data to include other elements.

Also in #JavaScript _↴

OnmouseOver event call with some interval Textbox and Querystring - Please Help This isnt working and i cant figure out why

Success!

Help @mattgolfs spread the word by sharing this article on Twitter...

Tweet This

adding unique link to each timed banner

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

adding unique link to each timed banner

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴