Jump to content

Recommended Posts

Posted

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.

Posted

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

Posted

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.

Posted

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

Posted

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.

Posted

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>

×
×
  • Create New...