CODEWITHSUNDEEP
jquerycolorboximage-gallery
Arash
Arash

Reputation: 143

How can I use Color box jQuery plugin For direct <img> elements?

I've created a media gallery where I want to show the images with a colorbox.
The HTML structure that I try to use colorbox on it, is like below:

<div class="image-gallary">
  <img src="/patch_to_image/image_1.png">
  <img src="/patch_to_image/image_2.png">
  <img src="/patch_to_image/image_3.png">
  <img src="/patch_to_image/image_4.png">
</div>

and jQuery intialazation is:

  $('div.image-gallary>img').colorbox({
    rel:'images',
    transition:"fade",
    opacity:0.5 ,
    rel:'group1'
  });

When I click on images the clorbox load and popup's show up but images not load (not display, still loading image).

screenshot

Upvotes: 1

Views: 3758

Answers (1)

Terry
Terry

Reputation: 66103

That is because Colorbox depends on the href attribute on the anchor element in order to load the page correctly. The easy solution is to simply wrap each <img src="/path/to/image"> element with a corresponding <a href="/path/to/image">, and you are good to go.

The reasoning behind this is simple: from a UI perspective, the images are meant to be clicked on, so intuitively they should be wrapped in an interactable element (<a> will be your to-go element). Imagine if JS does not work on the page: that will mean that the images remain clickable ;) that is good UI!

$(function() {
  $('div.image-gallary>a').colorbox({
    rel: 'images',
    transition: "fade",
    opacity: 0.5,
    rel: 'group1'
  });
});
img {
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

<div class="image-gallary">
  <a href="http://i.imgur.com/YzuqChn.gif"><img src="http://i.imgur.com/YzuqChn.gif"></a>
  <a href="http://i.imgur.com/Am3foce.gif"><img src="http://i.imgur.com/Am3foce.gif"></a>
</div>

If you do not want to modify the markup, there is an alternative solution: you can simply use the href option of the plugin to specify the URL. Note that in this case, you will need to iterate through all the images (instead of passing a collection to the .colorbox() method, because you will need pointers to each of their src attribute individually:

$(function() {
  $('div.image-gallary>img').each(function() {
    // Iterate through individual images...
    // because we need access to their 'src' attribute
    $(this).colorbox({
      rel: 'images',
      transition: "fade",
      opacity: 0.5,
      rel: 'group1',
      href: $(this).attr('src')
    });
  });
});
img {
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

<div class="image-gallary">
  <img src="http://i.imgur.com/YzuqChn.gif" />
  <img src="http://i.imgur.com/Am3foce.gif" />
</div>

Upvotes: 2

Related Questions