I think you need to call it with window onload.

<script language="javascript">
<!--
window.onload = showimage();
//-->
</script>

You can check out this thread from a while back to make sure you javascript is correct.

http://forums.shopify.com/categories/2/posts/10722

— Last edited 05:25PM, Aug 20, 2007

I don’t think you can embed liquid into a .js file like that.

If you want to use that, it would be better to put the script into one of the liquid templates.

That’s correct Matt.

I use this code to randomly show a customer feedback quote and all the code is inline in theme.liquid.

In other words, Siad is doing it incorrectly? I’m confused. I am trying to do the same as Siad without luck. If I cannot embed liquid into a .js file, then my .js file should look like this?

// JavaScript Document
var theImages = new Array()

//Random-loading images
theImages[0] = 'home_rotator1.jpg' // replace with names of images
theImages[1] = 'home_rotator2.jpg' // replace with names of images
theImages[2] = 'home_rotator3.jpg' // replace with names of images

var p = theImages.length;
var preBuffer = new Array()

for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));

function showImage(){
if(whichImage==0){
document.write('<a href ="/"><img src="'+theImages[whichImage]+'" border=5 width=363 height=260></a>');
}
else if(whichImage==1){
document.write('<a href ="/"><img src="'+theImages[whichImage]+'" border=0 width=363 height=260></a>');
}
else if(whichImage==2){
document.write('<a href ="/"><img src="'+theImages[whichImage]+'" border=0 width=363 height=260></a>');
}

}

And then I added DanW’s “showimage” code to the header div in the theme.liquid file. I’ve checked the previous post and the code looks the same.

Unfortunately, it doesn’t work. If anyone has any suggestions, please let me know?

Thanks,

— Last edited 12:38AM, Aug 22, 2007

What you want to do is drop the .js file, and put your functionality (with the liquid tags) into the header of your theme.liquid file as an inline script.

Try it like this. All inline where you want the image to show

<div id="randimage">
<a href=/"><img src="{{ 'default.jpg' | asset_url }}" /></a>

<script type="text/javascript">

   var imageCount = 3;

   function get_random() { 
      var ranNum= Math.floor(Math.random()* imageCount );
      return ranNum;
   }

   window.onload = function() {
      var whichImage=get_random();
      var image=new Array(imageCount)
         image[0] = "<a href=\"/\"><img src=\"{{ 'default.jpg' | asset_url }}\" /></a>";
         image[1] = "<a href=\"/\"><img src=\"{{ 'alternate1.jpg' | asset_url }}\" /></a>";
         image[2] = "<a href=\"/\"><img src=\"{{ 'alternate2.jpg' | asset_url }}\" /></a>";

      $('randimage').innerHTML = image[whichImage];
    }

</script>
</div>

— Last edited 01:57AM, Aug 23, 2007

Hi Dan,

I copied and pasted all your code and put it into the proper places but it still doesn’t work. I renamed the images to match your names and I added the default-image to the randimage div.

Here are my calls to the javascript files:

    {{ 'layout.css'    | asset_url | stylesheet_tag }}
    {{ 'mootools.js' | asset_url | script_tag }}
        {{ 'slimbox.js' | asset_url | script_tag }}
        {{ 'random.js' | asset_url | script_tag }}
    {{ content_for_header }}

and here is the code that I put where the image is suppose to show:

    <div  id="logo">
        <!-- Display Random Image -->
       <div id="randimage">
           <a href="/"><img src="{{ 'default.jpg' | asset_url }}"/></a>
       </div><!-- end random image -->
    </div><!--end of logo -->        

Can you see anything incorrect here? I’ve been trying all kinds of things included trying to make it all inline but nothings working, and I really appreciate everyones help.

— Last edited 11:04PM, Aug 22, 2007

Ok. I took a deeper look and the code I posted was way off. I used my test store and came up with the correct solution.

I couldn’t get it to work by calling it from a js file so I just put it inline. Works like a charm.

If you renamed your images to mimick my previous code, then you should be able to just copy and paste this in place of your randimage div tag and it should work.

I updated my post above with the updated code so no one would try use the old code.

— Last edited 02:08AM, Aug 23, 2007

Well it works for me – I think we can consider this case solved, MacGyver! And no duct tape in sight…

Thank you danW and Matt.

Sian

Copy, paste, refresh, and it works beautifully. Thanks guys for your help.

I could get your code to work no problem, but what I need is to randomly change out a background image. I can’t seem to get this working. Help! This is what I have:

<div id="randimage">

<script type="text/javascript">

   var imageCount = 3;

   function get_random() { 
      var ranNum= Math.floor(Math.random()* imageCount );
      return ranNum;
   }

   window.onload = function() {
      var whichImage=get_random();

      var image=new Array(imageCount)
         image[0] = "<img src=\"{{ 'bg_1.jpg' | asset_url }}\" />";
         image[1] = "<img src=\"{{ 'bg_2.jpg' | asset_url }}\" />";
         image[2] = "<img src=\"{{ 'bg_3.jpg' | asset_url }}\" />";

    var bgimage=image[whichImage];

      $('randimage').style.backgroundimage = "url('" + bgimage + "')";
    }

</script>

try this

var image=new Array(imageCount)
         image[0] = "{{ 'bg_1.jpg' | asset_url }}";
         image[1] = "{{ 'bg_2.jpg' | asset_url }}";
         image[2] = "{{ 'bg_3.jpg' | asset_url }}";

var bgimage=image[whichImage];

$('randimage').style.background-image = "url(bgimage)";

or

$('randimage').background = bgimage;

— Last edited 08:31PM, Sep 20, 2007

Nope, still no joy.
I also tried this

 var image=new Array(imageCount)
         image[0] = "url('{{ 'bg_1.jpg' | asset_url }}' )";
         image[1] = "url('{{ 'bg_2.jpg' | asset_url }}' )";
         image[2] = "url('{{ 'bg_3.jpg' | asset_url }}' )";

    var bgimage=image[whichImage];

      $('randimage').style.background-image = bgimage;

but that didn’t work either. Any more ideas?

Also.. maybe I should mention, I plan to change out the background image for the <body> of the page. I was hoping once I got the div working, it would also work giving the <body> tag the same id.

Sorry nadia I don’t. My javascript kung fu isn’t all that good. :(

Hey Nadia

I may be way off here, depending on your desired outcome, but you might be able to butcher this script from A List Apart which allows you to switch between alternate stylesheets.

It should be relatively straightforward to assign 3 css sheets (each of which only specify the body bg image) as possible ‘alternate’ stylesheets and load them in after your main css in the head. Then write a little js function called when the page loads which picks one of the bg stylesheets at random.

If you want the bg image to randomise on every page, you wouldn’t even have to worry about cookies.

Is that worth looking into?
M

— Last edited 02:52PM, Sep 27, 2007

Thankyou!! It was worth looking into .. and it worked!

I took out all the cookie stuff in the stylesheetswitcher.js, and replaced the window.onload with my get_random function. Worked perfectly.

I think I may be linking to the alternate stylesheets in a messy way – I have hard-coded the links because I didn’t know how to call an alternate stylesheet tag.

{{ 'binkie.css'     | asset_url | stylesheet_tag }}

<link rel="alternate stylesheet" type="text/css" href="/files/shops/random_number/assets/binkie_1.css" title="bg1" />
<link rel="alternate stylesheet" type="text/css" href="/files/shops/random_number/assets/binkie_2.css"  title="bg2" />
<link rel="alternate stylesheet" type="text/css" href="/files/shops/random_number/assets/binkie_3.css"  title="bg3" />

But oh well, as long as it works!

Great! glad it worked. I’ve used the technique to switch stylesheets on browser resize, so I was pretty hopeful.

You should be able to use asset_url, which would be a little more future-proof if JP switch their servers around in the future:

<link rel="alternate stylesheet" type="text/css" href="{{ 'binkie_1.css' | asset_url }}"  title="bg1" />
<link rel="alternate stylesheet" type="text/css" href="{{ 'binkie_2.css' | asset_url }}"  title="bg2" />
<link rel="alternate stylesheet" type="text/css" href="{{ 'binkie_3.css' | asset_url }}"  title="bg3" />

— Last edited 12:31PM, Sep 28, 2007