Image gallery function seems to be called twice

Question

I've got an image gallery with a main image and 5 thumbnails under it, when you click on a thumbnail the image changes and this works fine but I have also put in two arrows either side to scroll through the images as well and it kind of works but it's skipping every second image. I tried putting in alerts to see what is going on and they're being fired twice.

My HTML is as follows:

<tr id="product_main_image">
    <td colspan="5">
        <img src="product_images/catalog.png" id="1">
        <span id="image_left" style="bottom: 233px;"><img src="web/left_arrow.png"></span>
        <span id="image_right" style="bottom: 233px;"><img src="web/right_arrow.png"></span>
    </td>
</tr>

<tr id="product_thumbnail">
    <td><img src="product_images/catalog.png" id="1"></td>
    <td><img src="product_images/config.png" id="2"></td>
    <td><img src="product_images/customers.png" id="3"></td>
    <td><img src="product_images/marketing.png" id="4"></td>
    <td><img src="product_images/sales.png" id="5"></td>
</tr>

My JS is as follows:

$("#product_thumbnail img").on({
    mouseover: function(){
        $(this).css({'cursor': 'pointer'});
    },
    mouseout: function(){
        $(this).css({'cursor': 'default'});
    },
    click: function(){
        var imageURL = $(this).attr('src');
        var imageID = $(this).attr('id');
        $("#product_main_image > td > img").attr('src', imageURL);
        $("#product_main_image > td > img").attr('id', imageID);
    }
});

$("#image_left").on({
    mouseover: function(){
        $(this).css({'cursor': 'pointer'});
    },
    mouseout: function(){
        $(this).css({'cursor': 'default'});
    },
    click: function(){
        var curImageID = $("#product_main_image img").attr('id');
        curImageID--;
        var imageURL = $("#"+curImageID).attr('src');
        alert (imageURL);
        $("#product_main_image > td > img").attr('src', imageURL);
        $("#product_main_image > td > img").attr('id', curImageID);
    }
});
    
$("#image_right").on({
    mouseover: function(){
        $(this).css({'cursor': 'pointer'});
    },
    mouseout: function(){
        $(this).css({'cursor': 'default'});
    },
    click: function(){
        var curImageID = $("#product_main_image img").attr('id');
        curImageID++;
        var imageURL = $("#"+curImageID).attr('src');
        alert (imageURL);
        $("#product_main_image > td > img").attr('src', imageURL);
        $("#product_main_image > td > img").attr('id', curImageID);
    }
});

Edit

How my HTML is being generated from php

$sql = mysqli_query($con, "SELECT * FROM product_images WHERE product='$product_id'");
$imageCount = mysqli_num_rows($sql);
if ($imageCount > 0) {
    $i = 0;
    while($row = mysqli_fetch_array($sql)){
        $image = $row["image"];
        $i++;
        $gallery .= "<td><img src='product_images/$image' data-id='$i'></td>";
    }
}
$sql = mysqli_query($con, "SELECT * FROM product_images WHERE product='$product_id' LIMIT 1");
$imageCount = mysqli_num_rows($sql);
if ($imageCount > 0) {
    while($row = mysqli_fetch_array($sql)){
        $first_image = $row['image'];
        $main_image .= "<img src='product_images/$first_image' data-id='1'>";
    }
}

My actual HTML

<table id="gallery">
    <tr id="product_main_image">
    <td colspan='5'>
    <?php echo $main_image; ?>
    <span id="image_left"><img src="web/left_arrow.png"></span>
    <span id="image_right"><img src="web/right_arrow.png"></span>
    </td>
    </tr>
    <tr id="product_thumbnail">
    <?php echo $gallery; ?>
    </tr>
</table>

score 0 · Answer 1 · answered Feb 28 '18 at 16:06

You are using id which aren't unique. They should be.

Instead rather use data-id.

Here is a solution:

$("#product_thumbnail img").on({
  click: function() {
    var imageURL = $(this).attr('src');
    var imageID = $(this).attr('data-id');
    $("#product_main_image > td > img").attr('src', imageURL);
    $("#product_main_image > td > img").attr('data-id', imageID);
  }
});

$("#image_left").on({
  click: function() {
    var curImageID = $("#product_main_image img").attr('data-id');
    curImageID--;
    if( curImageID > 0) {
      var imageURL = $("#product_thumbnail img[data-id=" + curImageID + "]").attr('src');
      $("#product_main_image > td > img").attr('src', imageURL);
      $("#product_main_image > td > img").attr('data-id', curImageID);
    }
  }
});

$("#image_right").on({
  click: function() {
    var curImageID = $("#product_main_image img").attr('data-id');
    curImageID++;
    if( curImageID <= $('#product_thumbnail img').length) {
      var imageURL = $("#product_thumbnail img[data-id=" + curImageID + "]").attr('src');
      $("#product_main_image > td > img").attr('src', imageURL);
      $("#product_main_image > td > img").attr('data-id', curImageID);
    }
  }
});

#product_thumbnail img:hover,
#image_left,
#image_right{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="product_main_image">
  <td colspan="5">
    <img src="http://via.placeholder.com/100x100" data-id="1"><br />
    <span id="image_left" style="bottom: 233px;">
      <!--img src="web/left_arrow.png"-->
      left
    </span>
    <span id="image_right" style="bottom: 233px;">
      <!--img src="web/right_arrow.png"-->
      right
    </span>
  </td>
</tr>

<tr id="product_thumbnail">
  <td><img src="http://via.placeholder.com/100x100" data-id="1"></td>
  <td><img src="http://via.placeholder.com/110x100" data-id="2"></td>
  <td><img src="http://via.placeholder.com/120x100" data-id="3"></td>
  <td><img src="http://via.placeholder.com/130x100" data-id="4"></td>
  <td><img src="http://via.placeholder.com/140x100" data-id="5"></td>
</tr>
</table>

thanks for this all my html is being generated from php so hadn't copped the ID's were different. I've edited this now but still getting the same issue. I think there must be something else on my page causing it. — Paddy Hallihan, Feb 28 '18 at 16:36
Generated by PHP is not the problem... on the page you get the HTML source. My code works... maybe you didn't copy all of it? — GreyRoofPigeon, Mar 02 '18 at 11:43

score 0 · Accepted Answer · answered Mar 06 '18 at 10:08

Ok I figured out what I could do to fix this by looking at this https://stackoverflow.com/a/15353226

Here is my updated code allowing for looping back to the start if you reach the end of the images:

I still haven't figured out why this was happening or what was causing it but this works.

I left out the CSS and mouseover/mouseout stuff so it's just the basic image gallery.

$("#product_thumbnail img").on({
   click: function(){
   var imageURL = $(this).attr('src');
   var imageID = $(this).attr('data-id');
   $("#product_main_image > td > img").attr('src', imageURL);
   $("#product_main_image > td > img").attr('data-id', imageID);
  }
 });
 
 $("#image_left").unbind("click").bind("click", function(){
  var curImageID = $("#product_main_image img").attr('data-id');
  curImageID--;
  if(curImageID == 0){
   curImageID = $('#product_thumbnail img').length;
  }
  var imageURL = $("#product_thumbnail img[data-id=" + curImageID + "]").attr('src');
  $("#product_main_image > td > img").attr('src', imageURL);
  $("#product_main_image > td > img").attr('data-id', curImageID);
 });
 
 $("#image_right").unbind("click").bind("click", function(){
  var curImageID = $("#product_main_image img").attr('data-id');
  curImageID++;
  if(curImageID > $('#product_thumbnail img').length){
   curImageID = 1;
  }
  var imageURL = $("#product_thumbnail img[data-id=" + curImageID + "]").attr('src');
  $("#product_main_image > td > img").attr('src', imageURL);
  $("#product_main_image > td > img").attr('data-id', curImageID);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr id="product_main_image">
  <td colspan="5">
    <img src="http://via.placeholder.com/100x100" data-id="1"><br />
    <span id="image_left" style="bottom: 233px;">
      <!--img src="web/left_arrow.png"-->
      left
    </span>
    <span id="image_right" style="bottom: 233px;">
      <!--img src="web/right_arrow.png"-->
      right
    </span>
  </td>
</tr>

<tr id="product_thumbnail">
  <td><img src="http://via.placeholder.com/100x100" data-id="1"></td>
  <td><img src="http://via.placeholder.com/110x100" data-id="2"></td>
  <td><img src="http://via.placeholder.com/120x100" data-id="3"></td>
  <td><img src="http://via.placeholder.com/130x100" data-id="4"></td>
  <td><img src="http://via.placeholder.com/140x100" data-id="5"></td>
</tr>
</table>

Image gallery function seems to be called twice

Edit

2 Answers2