Question

I need some jQuery assistance. I’m using https://github.com/jbutz/bootstrap-lightbox for my lightbox, basically what I want to do is use what’s inside the rel element to add and to the lightbox div.

<ul class="photo">
  <li>
    <a href="#demoLightbox" class="image" data-toggle="lightbox" rel="/image/photo1.jpg">
      <img src="/image/photo1_thumb.jpg">
    </a>
  </li>
  <li>
    <a href="#demoLightbox" class="image" data-toggle="lightbox" rel="/image/photo2.jpg">
      <img src="/image//photo2_thumb.jpg">
    </a>
  </li>
</ul>

<div class="lightbox fade" id="demoLightbox">
  <div class='lightbox-content'>
  # Javascript will insert image src <img> depending on which link is click
  </div>
</div>

From the Javascript file, I added the following code in the bootstrap lightbox.js data api

  $('.lightbox-content').html('<img src="' + $(this).attr("rel") + '"/>');

So it looks like this

 /* LIGHTBOX DATA-API
  * ============== */

  $(function () {
    $('body').on('click.lightbox.data-api', '[data-toggle="lightbox"]', function ( e ) {
      var $this = $(this), href
        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
        , option = $target.data('lightbox') ? 'toggle' : $.extend({}, $target.data(), $this.data())
      e.preventDefault()
      $target.lightbox(option);
      $('.lightbox-content').html('<img src="' + $(this).attr("rel") + '"/>');
    })
  })

I’m not use if I’m doing this correct, it is adding the image tag inside the .lightbox-content class but unfortunately, when I click on an image it loads but the image and lightbox div frame isn’t centered. I’m presuming it’s not accepting the width and height values from the image.

Any insights is much appreciated. Thanks so much.

Answer 1

I ended up going with Jack Moore’s Colorobox, http://www.jacklmoore.com/colorbox/guide

Nice and simple 🙂