JS and Cookies: Rotating Image Gallery

@spk1973Jan 08.2009

Hello,
OK I will be blunt…I am finishing up a JS course and my final assignment is a web page for a pet store that stores your number of visits and updates the images in a gallery so that you see a new image each visit.
Here’s the blunt part: I am so sick of this project I want to scream. I just want to be done, but each time I reload the page I keep getting the same image (pet bed). The code, admittedly, is ugly, as we were given prefab cookie functions to use in the assignment. So it’s a bit of stuff thrown here and there. This is not how I would normally want to approach a project, but like I said I don’t care anymore and just want the thing to work.
If you erase the cookies from your browser (they are user_name and counter), the image of the bird seed shows for your first visit, then it reverts to only showing the pet bed image.
Here’s the link for the page:

~~[url]~~http://jgmachineco.com/IT4285/assignment5_3.html[/url]

If it is easier I can post the html file inline here.
I have looked all over the web for the answer to this and I cannot find anything like this. And then if I find something close it won’t jibe with my existing code.
Also, the option to erase the cookies doesn’t work. If anyone can offer a quick solution to that that would be great, but at this point I’ll settle for the images to work correctly.
There are no errors in FF when I reload the page, so I’m lost.
Much thanks to anyone who can help me.

to post a comment

JavaScript

8 Comments(s) _↴

@mikemJan 08.2009 — #Hi, This may help...

[CODE]var num;
 
 function loadImage(num)
 {
 var pic; 
 switch(parseInt(num))
 {
 case 0 : pic="birdseed.gif"; break;
 case 1 : pic="another.gif";  break;
 case [B][COLOR="Red"]2[/COLOR][/B] : pic="onemore.gif";  break;
 [B][COLOR="SeaGreen"]// etc.[/COLOR][/B]
 }
 document.getElementById("pix").src=pic;
 }
 
 function getCookie()
 {
 if(document.cookie.match(new RegExp("Counter=([^;]+)"))) 
 {
 num=unescape(RegExp.$1); 
 if(num > [B][COLOR="Red"]2[/COLOR][/B] ) num=0 ; [B][COLOR="SeaGreen"]// If last image displayed restart at first image.[/COLOR][/B]
 }
 else{ num=0; }
 loadImage(num);
 }
 
 function setCookie()
 {
 var expiry=new Date();
 expiry.setTime( expiry.getTime() + (365*24*60*60*1000) );	[B][COLOR="SeaGreen"]// 1-Year Life.[/COLOR][/B]
 num++;
 document.cookie="Counter="+escape(num)+";expires="+expiry.toGMTString()+";";
 }
 
 onload=getCookie;
 onunload=setCookie;[/CODE]

[code=html]<img id="pix" width="204" height="204" alt="Graphic" src="">[/code] Mike ?

@spk1973authorJan 08.2009 — #Hi Mike,

Thanks for getting back to me so quickly.

Can you please tell me what I should do to modify my existing code to work with what you've contributed?

Do I need to overwrite any existing cookie functions?

Honestly, I am just looking for the quickest and easiest way to get the function to work.

Also, presently the only way to get the image to load at all is to include [FONT="Courier New"]onload="changeAd()"[/FONT] to the [FONT="Courier New"]<body>[/FONT] tag. Is this necessary/correct?

Thanks,

-Shawn

@mikemJan 08.2009 — #Hi again Shawn, I'd suggest you replace your code with my example...

1. Copy and paste the "Code" between <script type="text/javascript"> and </script> tags within the head section of your document.

2. Remove any onload attribute in the HTML <body> tag.

3. In the loadImage() function block you must modify the image file names with yours, adding further case lines according to how many images you have.

4. Change the number, marked in red in the getCookie() function. to match that of the final case line you have added in the loadImage() function.

5. Ensure that the <img> tag has an id="pix" attribute like that in my HTML code.

Mike ?

@spk1973authorJan 09.2009 — #Hi again Mike,

Thanks so much. That works just the way I want it to.

Here's my problem:

The existing page (the one I posted the link to) also includes other cookie functions, such as the visitor's name and how many times they've visited.

Can you please explain to me how to incorporate the code you wrote into my page as is without messing up the code that's already there?

Thanks again. You've been a real lifesaver with this.

-Shawn

@mikemJan 09.2009 — #Hi Shawn,

Change the cookie name and function names in my example, so they don't conflict with your previous ones, and call your changeAd() function from my function that handles the load event instead of from the HTML <body> tag...

[CODE]var num;
 
 function loadImage(num)
 {
 var pic; 
 switch(parseInt(num))
 {
 case 0 : pic="birdseed.gif"; break;
 case 1 : pic="another.gif";  break;
 case 2 : pic="onemore.gif";  break;
 // etc.
 }
 document.getElementById("pix").src=pic;
 }
 
 [COLOR="red"]function getMCookie()[/COLOR]
 {
 if(document.cookie.match(new RegExp("[COLOR="Red"]MCounter[/COLOR]=([^;]+)"))) 
 {
 num=unescape(RegExp.$1); 
 if(num > 2 ) num=0 ; // If last image displayed restart at first image.
 }
 else{ num=0; }
 
 [COLOR="Red"]changeAd();[/COLOR]
 
 loadImage(num);
 }
 
 [COLOR="red"]function setMCookie()[/COLOR]
 {
 var expiry=new Date();
 expiry.setTime( expiry.getTime() + (365*24*60*60*1000) );	// 1-Year Life.
 num++;
 document.cookie="[COLOR="red"]MCounter[/COLOR]="+escape(num)+";expires="+expiry.toGMTString()+";";
 }
 
 [COLOR="Red"]onload=getMCookie;
 onunload=setMCookie;[/COLOR][/CODE]

Mike ?

@spk1973authorJan 09.2009 — #Mike,

What can I say? YOU ROCK!!!!!

Exactly what I wanted. I'm so thrilled that it works. Can't possibly thank you enough.

OK, so maybe one more thing you can help me with, and then I am done. I have a link on the page to delete the user's browsing history, but it's not working. Any ideas?

Thankyouthankyouthankyou.?

-Shawn

@spk1973authorJan 09.2009 — #Oh, and the images don't display in FireFox. They do in Safari, however.

I'm not worried about it, but do you have any idea why this might be?

-Shawn

@mikemJan 09.2009 — #Hi Shawn,

You can delete cookies by setting their expiry date to a point in the past, for example the epoch point at the start of 1970, and you need to pass the actual cookie name to the erasing function, something like this...

[CODE]function eraseCookie(name) 
 {
 document.cookie=name+"= null; expires=Monday, 01-Jan-1970 00:00:00 GMT"; [COLOR="Green"]// Delete named cookie.[/COLOR]
 num=0; [COLOR="Green"]// Zero the counter variable.[/COLOR]
 loadImage(num); [COLOR="Green"]// Load first image.[/COLOR]
 }[/CODE]

[code=html]<a href="javascript:eraseCookie('MCounter')">Erase Counter Cookie</a>[/code]

Regarding images in FF I suggest you specify values to width and height attributes in the HTML <img> tag and ensure all images are of that size.

Mike ?

Also in #JavaScript _↴

Tick box energising 'submit' button [RESOLVED] Easy Javascript question - Change text based on user input input Password

Success!

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

Tweet This

JS and Cookies: Rotating Image Gallery

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

JS and Cookies: Rotating Image Gallery

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴