Jump to content

Random image/banner on page refresh


Matt Ceaser

Recommended Posts

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.

Link to comment
Share on other sites

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]);"

Link to comment
Share on other sites

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-->

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

×
×
  • Create New...