You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.
Customers are inherently lazy. That is why I like to deliver important information to them without using annoying popups and within the content of what they are doing. I do it by to rotating an image on my storefont when customers visit.
Here is a quick script that allows you to display a number of images on your storefront to engage the customer. Everytime the page refreshes, the next image is displayed, We use this to tell our customers about new products randomly when they come to our site.
I use it in CCP5, but Tiki should be the same. I installed in in my Page, but you can put it anywhere.
Copy this javascript code to your element:
################################################
## Below is where you will edit the paths to your images to be rotated
## You can add as many as you wish providing you follow the images[x]
## protocol.
################################################
################################################
# End Edit
################################################</span>
Calling Your Images
Insert this code into your element where you want it called:
That's it. This simple script does not offer image control for size or links, but it is an effective way to engage your customers and can be extended if you so require.
Enjoy!
Kevin
Offline
Can you give us a link to an example of this mod?
Thanks!
Offline
Thanks for this little script Kevin. I have implemented it on my splash page here . Is there anyway to edit this script to display in order of "images[$]" listed rather than randomly?
Thanks again,
TheKiko
Offline
Hi Thekiko:
Your site looks great - nice job and glad to see the script works well for you.
Regarding a "progressive" image display, there are probably many other ways to do it but the one thing you must do is to store the last image name from the array image[x], or even $ that was displayed in order to increment properly on the user's computer or in local memory. The script is independent of storage which is why I went random.
To store image[x], or $ for that matter, I would write a cookie to the user's system to track the last image displayed and call and read that cookie everytime the display refreshes to keep track, depending on your application.
Now Nick undoubtedly would have a suggestion here - he always does. I am far more limited in javascript.
BTW: What application did you have in mind? There may be another way to accomplish it if it does not require a refresh.
Thanks,
Kevin
Offline
For us Java impaired peeps, what do I need to do so the images stay random, but they fade out and change images without having to refresh the page. Basically make it a slideshow. Great for advertising logos of the brands I carry.
Offline
Sgreiner...
Here is a quick script that displays images, links and comments. I did not add the Border and Size tags, but they are simply HTML code in the image strings.
This one does not fade in and out, but it does rotate images using an interval specified by you in milliseconds. Watch your syntax here. Hope this helps.
The way this is coded you should be able to paste it into FP or whaever HTML editor you have and give it a try.
Hope this helps,
Kevin
*******************************************************************
<html>
<head>
<title>Test Page 1</title>
<!-- PUT THIS IN THE HEAD OF YOUR DOCUMENT -->
<script language="JavaScript"><!--
function rand_number(n)
{
var x;
x=Math.round(Math.random()*100);
x%=n;
return x;
}
function rotate_images()
{
var i;
<!-- INTERVAL IN MILLISECONDS. 5000 = 5 SECONDS... -->
var interval=5000;
var img=new Array();
<!-- IMAGES AND LINKS HERE - ALL HTML OK-->
img[0]='<a href="http://www.riverbendresearch.com/cgi-bin/cp-app.cgi?pg=cat&ref=RBRDSS"><img src="http://www.riverbendresearch.com/media/images/store/xwelcome2.jpg" alt="Welcome to image 1"></a>';
img[1]='<a href="http://www.riverbendresearch.com/cgi-bin/cp-app.cgi?pg=cat&ref=OCEANIS"><img src="http://www.riverbendresearch.com/media/images/store/xwelcome1.jpg" alt="Welcome to image 2"></a>';
img[2]='<a href="http://www.riverbendresearch.com/cgi-bin/cp-app.cgi?pg=cat&ref=RBRDSS"><img src="http://www.riverbendresearch.com/media/images/store/xwelcome3.jpg" alt="Welcome to image 3"></a>';
<!-- HOW MANY IMAGES? -->
var total_images=3;
var i=rand_number(total_images);
rotate.innerHTML=img[i];
setTimeout("rotate_images()",interval);
}
//-->
</script>
</head>
<!-- CHANGE YOUR BODY TAG HERE... -->
<body onLoad="rotate_images();">
<!-- In the your body of your page wherever you want to rotate a banner...-->
<!-- Replace your body tag with <body> ...-->
<!-- Place this in your body where you want to place your image...-->
<div id="rotate"></div>
</body>
</html>
Offline
Thanks. Works like a champ on my test site. Thanks for all the comments in the code... that is extremely helpful. Now for another question... I may want to change it from being random to an ordered display. This question was asked earlier in this thread but I cant work your answer into this example. Is this something you can do?
Offline
Got it!
OK, here is the code. It allows you to specify the number of milliseconds between image refreshes (no page refresh required). It rotates images in a SEQUENTIAL manner - NOT RANDOM.
Here is the rub on transitions. I could write a MSIE transition to blend, but it would not work on NS. Since I do not desire to learn the NS code (sorry, am IE bigot, I know), this is all that is left to be done to make this code perfect. However, I think it is pretty good as is.
I have noted the code below for clarity and the images and links are good for my site so you can run it in FrontPage, or whatever editor you have as long as you are online.
Hope this helps,
Kevin
############ CODE FOLLOWS ##########################
<html>
<head>
<title>Test Page 1</title>
</head>
</body>
</html>
Offline
Does anyone have this mod (either progressive or random) active on their site splash page? I'd love to see your code to see where you put what.
I've tried inserting the code on mine and have had no luck with the ways I've tried to do it. I only have basic knowledge, but can usually figure out how to apply mods. This one's got me though.
If anyone would want to suggest what goes where based on my site's layout, the site is wwwsweetestsentiments.com
Thanks!
Jeremy
Offline
Hi Jeremy ,
Sorry to hear your having troble with this hack, I tried a few of these as we, in the end i just decided to use the built-in banner rotator within CCP5.1, i just pasted the following into where i wanted to show and rotate the banners;
(CGIGET TYPE="SUB" VALUE="ste_exec_banner" PARAMS="1")
Hope that helps any..... ;-)
Cheers
Steve
Offline