Random image Javascript

New Member
2 0 0
Hi there, I'm quite new to Javascript and even newer to Shopify so here goes!.... I simply need to call up a random image on refresh on my page.theme using javascript. These will be illustrative images (hard coded, I guess), rather than (dynamic) product images. I've done this on a standard HTML page before but I know I'm doing something wrong when it comes to liquid templates. At the moment I've linked to {{ 'randomimage.js' | asset_url | script_tag }} in the <head> tag of theme.liquid, which contains the following:




<script language="JavaScript">

var theImages = new Array() 

theImages[0] = '{{'page_image_01.jpg' | asset_url}}'
theImages[1] = '{{'page_image_02.jpg' | asset_url}}'
theImages[2] = '{{'page_image_03.jpg' | asset_url}}'


var j = 0
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(){
document.write(+{{'theImages[whichImage]' | asset_url}}+);
}


</script>

And on page.liquid I've added:

<script language="JavaScript">
<!--showImage();//-->
</script>
to call up the js function in the right place. _But_ I know somewhere I'm going really wrong, either on the js file itself (where i reference the images) or the the page template (do I need to enclose the script in special characters?)... I know the solution is probably very obvious I'm really stuck here! I'd be very grateful for any help. Thanks, Sian
http://www.sianjones.net http://maddialexander.myshopify.com
0 Likes
Excursionist
1027 0 8

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

Dan - http://www.xtremechargers.com
0 Likes
Shopify Expert
139 0 1

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.

Matt Beck, CouldBe Studios | Portland, OR | http://www.couldbestudios.com : http://deals.couldbestudios.com
0 Likes
Excursionist
1027 0 8

That’s correct Matt.

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

Dan - http://www.xtremechargers.com
0 Likes
New Member
8 0 0

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>');
}

}

Is this correct so far?

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,

0 Likes
Shopify Expert
139 0 1

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.

Matt Beck, CouldBe Studios | Portland, OR | http://www.couldbestudios.com : http://deals.couldbestudios.com
0 Likes
Excursionist
1027 0 8

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>

Dan - http://www.xtremechargers.com
0 Likes
New Member
8 0 0

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.

0 Likes
Excursionist
1027 0 8

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.

Dan - http://www.xtremechargers.com
0 Likes
New Member
2 0 0

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

http://www.sianjones.net http://maddialexander.myshopify.com
0 Likes