Random image/banner on page refresh

[Matt Ceaser]

Does anyone know how I can generate a new image on page refresh. We have a client who would like a banner, but would like it to show a different image on page reload/refresh.

 

I am relatively new to Marcom, so excuse my ignorance.

 

What I am trying:

Made a js page with the below js:

 

var image = new Array ();

image[0] = "https://files.marcomcentral.app.pti.com/jtd/shared/Images/fpo/jobdirect.jpg";

image[1] = "https://files.marcomcentral.app.pti.com/jtd/shared/Images/fpo/expressions.jpg";

image[2] = "https://files.marcomcentral.app.pti.com/jtd/shared/Images/fpo/fb1_mainbanner.png";

var size = image.length

var x = Math.floor(size*Math.random())

 

$('#randombanner').attr('src',image[x]);

 

 

Added this to the Custom content=>Home Page

<img id='randombanner'/>

 

 

 

Nothing happens, please tell me what I am doing wrong.

[Printing Partners]

Matt,

Will your script run locally on your computer?

Does it fail only once uploaded to Marcom?

 

Depending on what you are trying to run, Marcom does shutdown some scripting, they run a "no conflict" script. They do this so there isn't any conflicts between your script and theirs. If you are using JQuery you need to add a "j" after the "$".

 

Try changing "$('#randombanner').attr('src',image[x]);" to "$j('#randombanner').attr('src',image[x]);"

[Matt Ceaser]

No, I am not getting it to work. Found script online and added our images. Tried several scripts, from online resources. Cannot get any to work?

 

Also tried adding the j after $, also did not work.

[kjacobson]

Take a look at the jquery cycle and jquery cycle 2 plugins.

http://jquery.malsup.com/cycle/

http://jquery.malsup.com/cycle2/

 

Here's sample code that I use to use a random image

This is the jquery. Make sure you link to your cycle plugin script.

<script type="text/javascript"><!--
jQuery.noConflict();
   jQuery('.slideshow').cycle({ 
       timeout: 6000, 
       speed:   1000,
       fx: 'fade',
       random: 1, //triggers the random image
       fastOnEvent: 1,
});

   jQuery('.slideshow').mouseenter(function() { 
       jQuery('.slideshow').cycle('pause'); 
   });        
   jQuery('.slideshow').mouseleave(function() { 
       jQuery('.slideshow').cycle('resume'); 
   });


//--></script>

Here's snippet of the html code that goes with the script.

   <!--Slideshow-->           
       <div class="slideshow">

           <!--Slide_1-->
           <div class="slide">
               <img src="image path">
           </div>
           <!--/Slide_1-->

           <!--Slide_2-->
           <div class="slide">
               <img src="image path">
           </div>
           <!--/Slide_2-->

           <!--Slide_3-->
           <div class="slide">
               <img src="image path">
           </div>
           <!--/Slide_3-->

           <!--Slide_4-->
           <div class="slide">
               <img src="image path">
           </div>
           <!--/Slide_4-->

           <!--Slide_5-->
           <div class="slide">
               <img src="image path">
           </div>
           <!--/Slide_5-->

           <!--Slide_6-->
           <div class="slide">
               <img src="image path">
           </div>
           <!--/Slide_6-->
       </div>
       <!--/Slideshow-->

[Printing Partners]

Matt,

The JQuery script is a good solution. But if that won't work for you a good resource for simple scripts with instructions is JavaScript Kit. Not the most advanced scripts, but they do work, link below.

 

Just remember they Marcom is running the NoConflict script on their site. Good Luck!

 

http://www.javascriptkit.com/script/cut118.shtml

[Matt Ceaser]

All I can say, you guys are awesome. Got it working with:

 

<script language="JavaScript">

<!--

 

function random_imglink(){

var myimages=new Array()

//specify random images below. You can have as many as you wish

myimages[1]="Image1"

myimages[2]="Image2"

myimages[3]="Image3"

 

var ry=Math.floor(Math.random()*myimages.length)

if (ry==0)

ry=1

document.write('<img src="'+myimages[ry]+'" border=0>')

}

random_imglink()

//-->

</script>

 

 

Added it to the custom content page, and wallah, it works!

 

Thank you all for your help. Now to make images link to hrefs.

[Matt Ceaser]

Got the links also, thanks again for everyones help!

 

<script language="JavaScript">

<!--

 

function random_imglink(){

var myimages=new Array()

//specify random images below. You can have as many as you wish

myimages[1]="Image1"

myimages[2]="Image2"

myimages[3]="Image3"

 

//specify corresponding links below

var imagelinks=new Array()

imagelinks[1]="Link1"

imagelinks[2]="Link2"

imagelinks[3]="Link3"

 

var ry=Math.floor(Math.random()*myimages.length)

if (ry==0)

ry=1

document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')

}

random_imglink()

//-->

</script>