Image is not displayed when parent image is clicked

Question

Functionality:

When user enters the first page, the primary images are randomised and displayed. Therefore, when user clicks on the primary image (1st image), a secondary image (a 2nd image) will be displayed.

The secondary image is an extension to the 1st image, therefore, for e.g, when a user clicks on the 1st image of an apple, the second image of a worm is displayed.

What I have done:

I have set both the 1st images and 2nd images into a set of an array. Secondly, the array of 1st image is randomised, hence, I have set the 2nd array of image to append to the 1st randomised image.

I have attached the following code for your perusal:

//Brand Array
var BrandNameArray = ["http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all"];
//Corresponding Image Array
var OfferArray = ["http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all"];

$(function() {

  //Auto populate into brand container once randomised for each Brand image
  var BrandNameArrayBackup = JSON.parse(JSON.stringify(BrandNameArray));
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    BrandNameArray.splice(random_BrandIndex, 1);
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
  BrandNameArray = BrandNameArrayBackup; //re-assigning values back to array
});

//Choose Brand with popUp
function selectBrand(index) {

  $('#BrandDescription').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $("#All").hide();
  $("#Back").hide();
  $("#Beauty").hide();
  $("#Choose").hide();
  $("#Fashion").hide();

  var chosenBrandIndex = OfferArray[BrandNameArray];
  //Set option clicked to CSS change 
  $('#Description').attr('src', chosenBrandIndex);
  $('#Description').show();
}

function BrandDescription() {
  idleTime = 0;

  $("#border_page").fadeOut(function() {
    $("#BrandDescription").fadeIn();
  });
}

.menu {
  background-color: #FFFFFF;
  filter: alpha(opacity=90);
  opacity: 0.98;
}
.Container {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 600px;
  width: 1260px;
  overflow-y: scroll;
}
.innerScroll {
  position: relative;
  width: 1250px;
  height: 600px;
  font-size: 25px;
  color: #8d8989 !important;
  overflow: scroll;
}

<div id="ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=3; top:0px; left:0px;">
  <img id="Main" src="lib/img/PAGE03/Background.png" />
  <input type="text" id="SearchField" style="position:absolute; top:190px; left:660px; height:40px; width:600px; outline=0px; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent; z-index=4;" autofocus src="lib/img/transparent.png">
  <div class="Container">
    <div id="list" class="innerScroll">
      <!--1st Row-->
      <img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
      <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
      <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" onclick="selectBrand('3');">
      <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" onclick="selectBrand('4');">

      <!--2nd Row-->
      <img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');">
      <img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');">
      <img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');">
      <img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');">

      <!--3rd Row-->
      <img id="Brand_9" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
      <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
      <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
      <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">
    </div>
  </div>
</div>

<div id="BrandDescription" class="menu" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; top:0px; left:0px; z-index=4;">

  <img id="Description" style="position:absolute; top:124px; left:534px;z-index=5;">

</div>

Issue:

There is the main issue that I am currently facing at the moment

**When I clicked on the primary image, the secondary image is not being displayed at all. Therefore, none of the secondary array image is appended to the first randomised image. hence, the secondary image is not displayed.

I am lost at what could have possibly gone wrong or missing. Please help.

Your help is much much appreciated.

I didn't see a link to your fiddle, so I made one myself. See my answer. — Tim Ogilvy, Mar 29 '16 at 05:07

Tim Ogilvy · Answer 1 · 2016-03-29T05:06:39.630

It looks like you have a number of problems going on here, one is using inline click handlers which is just bad practice, the other is that you are using different function scopes, and declaring functions on the window scope out of sequence. Having said that, here's some things which worked:

Rather than binding your javascript inline, try this:

Use a data tag on your dom element like data-brand="1":

<img id="Brand_1" data-brand="1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px">

Bind your jQuery to the whole list in one move:

$('#list img').on('click', function(){
    var brandId = $(this).data('brand'));
    selectBrand(brandId);
})

Also move your function definitions to the top of your script block, so they are defined before the 'dom ready' function, since you are declaring them on the window namespace as globals. Defining selectBrand as window.selectBrand, and calling it as window.selectBrand may also work.

Subsequently I encountered a 'slideDuration is not a function' error, but that's out of the scope of this question.

This is the jsFiddle I made to play with the problem: https://jsfiddle.net/TimOgilvy/n1L9ja7m/

But this doesnt really append to the randomised first image. How would it know which secondary image to call from the array that will append to the first image that it is being displayed? — Luke, Mar 29 '16 at 06:02

Rajesh Jangid · Answer 2 · 2016-03-30T06:01:10.093

0

I could figure out some problems in your code here

you are using $('#Vivo_BrandDescription') but Vivo_BrandDiscription is not valid id, i think it should be BrandDiscription

In function selectBrand(index) in the following code

$('#BrandDescription').fadeIn({
   duration: slideDuration, // <= this here slideDuration is undefined
   queue: false
});

inline onclick="selectBrand('3');" in image tags, I don't know why but its not working for me so what I did is
```
$('#list').find('img').on('click', function(){
   return selectBrand(this.id.split('_')[1]);
});
```

after making these changes here is the fiddle

I have updated the fiddle to get the images properly may be this is what you wanted.

edited Mar 30 '16 at 06:01

answered Mar 29 '16 at 12:31

Rajesh Jangid

724
6
13

alright, but the image that is in popup still does not correspond with the primary image. What I meant was, when i clicked image A, it is supposed to call image A(b), but at this moment, it is still calling other images like image C(b), etc. The first 2 error that you have mentioned. thank you, first one was a typo error, second was that I didn't include that var in the mentioned code. – Luke Mar 30 '16 at 01:08
why should there be a need for +new Date().getTime()+(++ran)?? – Luke Mar 30 '16 at 09:06
@Luke because the image gets stored in cache after first request hence for further requests it loads the same image instead of looking new one. you can see it here http://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url – Rajesh Jangid Mar 30 '16 at 09:35

Image is not displayed when parent image is clicked

2 Answers2

Linked