random banner with individual link on shopify

Ajay_Singh1
Tourist
12 0 1

Below I have code that shows one of the preset banner randomly.

However I want to have individual link for each of the banner.

As you can see in the code, currently it only has one same link for every banner.


Can anyone advice how to insert separate link for each of the images in the code ?

 

<script type="text/javascript">
  var imageCount = 4;
  $(function(){ 
    var whichImage=get_random();
    var image=new Array(imageCount)
    image[0] = "<img src=\"{{ 'HADER-AO-UNTUK-DI-BI-5.jpg' | asset_url }}\" />";
    image[1] = "<img src=\"{{ 'HADER-AO-UNTUK-DI-BI-6.jpg' | asset_url }}\" />";
    image[2] = "<img src=\"{{ 'HADER-AO-UNTUK-DI-BI-7.jpg' | asset_url }}\" />";
    image[3] = "<img src=\"{{ 'HADER-AO-UNTUK-DI-BI-8.jpg' | asset_url }}\" />";  
    function get_random() { 
      var ranNum= Math.floor(Math.random()* imageCount );
      return ranNum;
    }
    $('#randimage p a').prepend(image[whichImage]);
  });
</script>

<div id="randimage" align="center"><p><a href="https://alatolahraga.id"></a></p></div>

 

 

Kevin0214
New Member
2 0 0

I also have the same problem. Hope someone can assist

0 Likes
Digitaal
Excursionist
10 3 4

Hello,

So you need to add the link from the image variable declaration and replace the existing a tag, see below:

<script type="text/javascript">
  var imageCount = 4;
  $(function(){ 
    var whichImage=get_random();
    var image=new Array(imageCount)
// Add the link for each picture here
    image[0] = "<a href="https://customLink1"><img src=\"{{ 'HADER-AO-UNTUK-DI-BI-5.jpg' | asset_url }}\" /></a>";
    image[1] = "<a href="https://customLink2"><img src=\"{{ 'HADER-AO-UNTUK-DI-BI-6.jpg' | asset_url }}\" /></a>";
    image[2] = "<a href="https://customLink3"><img src=\"{{ 'HADER-AO-UNTUK-DI-BI-7.jpg' | asset_url }}\" /></a>";
    image[3] = "<a href="https://customLink4"><img src=\"{{ 'HADER-AO-UNTUK-DI-BI-8.jpg' | asset_url }}\" /></a>";  
    function get_random() { 
      var ranNum= Math.floor(Math.random()* imageCount );
      return ranNum;
    }
// Replace the html in the p tag with your random link + picture html 
    $('#randimage p').html(image[whichImage]);
  });
</script>

<div id="randimage" align="center"><p><a href="https://alatolahraga.id"></a></p></div>