CODEWITHSUNDEEP
javascript
user2901382
user2901382

Reputation: 11

Cannot display multiple instances of Java/CSS image gallery on single HTML page

JavaScript - I am aware that this is where I need to add something to enable multiple instances to run, however I really have no idea of how to code this correctly.

<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
    $('#images_thumbnails a').click(function () {
        var newImageSrc = $(this).attr('href');
        $('#images_full img').attr({
            'src': newImageSrc
        });
        return false;
    });
</script>

CSS - This was simple enough

#images_full img, 
#images_thumbnails img {
    padding: 3px;
    border: 1px solid #CCC;
}

#images_thumbnails img {
    margin: 4px;
    width: 40px;
    height: 40px;
}

HTML - Finally the HTML elements

<div id="images_full">
    <img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>

<div id="images_thumbnails">
    <a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
        <img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
    </a>
    <a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
        <img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
    </a>
    <a href="kuttinew/images/full_image/kuttison-complete-set03.jpg">
        <img src="kuttinew/images/thumbnail/kuttison-complete-set03.jpg" />
    </a>
</div>

It works perfectly fine until I add a second instance on same HTML page, the second set just open in own window like they have almost by-passed the Java commands.

Upvotes: 1

Views: 153

Answers (1)

Jared Gotte
Jared Gotte

Reputation: 472

I'm going to take a stab in the dark and say that your problem is that you are just using ids (#) instead of classes (.) to represent your multiple photo galleries. If you want similar behavior among multiple "instances," your jQuery script should be acting upon a class instead of an id. For example:

http://jsbin.com/otiTOyU/1/edit?html,css,js,output

Script:

<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('.images_thumbnails a').click(function () {
  var newImageSrc = $(this).attr('href');
  // Traverse the DOM to change this's respective '.images_full img'
  $(this).parent().prev().children().first().attr('src', newImageSrc);
  return false;
});
</script>

CSS:

.images_full img, 
.images_thumbnails img {
  padding: 3px;
  border: 1px solid #CCC;
}

.images_thumbnails img {
  margin: 4px;
  width: 40px;
  height: 40px;
}

HTML:

<div id="gallery1">
  <div class="images_full">
    <img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
  </div>

  <div class="images_thumbnails">
    <a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
      <img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
    </a>
    <a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
      <img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
    </a>
  </div>
</div>
<div id="gallery2">
  <div class="images_full">
    <img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
  </div>

  <div class="images_thumbnails">
    <a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
      <img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
    </a>
    <a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
      <img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
    </a>
  </div>
</div>

There are different ways you could go about optimizing the code. However, I'll leave that to you as an exercise. Be sure to check out the link I gave near the beginning of my post for a live demo.

Upvotes: 2

Related Questions