Bootstrap carousel that opens lightbox on click

JavaScript
1

I have a bootstrap carousel on my page and I need to have it open the images in a lightbox carousel when user clicks on any of the images. I have found a bunch of lightbox solutions on bootply.com, but they don’t work for exactly what I need. The problem I’m having is that I had to make the carousel slide images background images so that they would fill the “frame” (see page) and all the example I have found use the IMG tag inside of the carousel.

Here is a demo:
http://aaronhaas.com/smallman/

any suggestions?

here is the html inside of my carousel:

<div class="carousel-inner" role="listbox">
      
      <div class="item active" style="background-image: url(assets/img/gallery/smallman-1.jpg);">
      </div><!-- close item -->

      <div class="item" style="background-image: url('assets/img/gallery/smallman-2.jpg');">
      </div><!-- close item -->

      <div class="item" style="background-image: url('assets/img/gallery/smallman-3.jpg');">
      </div><!-- close item -->

      <div class="item" style="background-image: url('assets/img/gallery/smallman-4.jpg');">
      </div><!-- close item -->

      <div class="item" style="background-image: url('assets/img/gallery/smallman-5.jpg');">
      </div><!-- close item -->

      <div class="item" style="background-image: url('assets/img/gallery/smallman-6.jpg');">
      </div><!-- close item -->
   
    </div><!-- close carousel-inner -->

here is a lighbox I found on bootply:

$(document).ready(function() {
            var $lightbox = $('#lightbox');
            
            $('[data-target="#lightbox"]').on('click', function(event) {
                var $img = $(this).find('img'), 
                    src = $img.attr('src'),
                    alt = $img.attr('alt'),
                    css = {
                        'maxWidth': $(window).width() - 100,
                        'maxHeight': $(window).height() - 100
                    };
            
                $lightbox.find('.close').addClass('hidden');
                $lightbox.find('img').attr('src', src);
                $lightbox.find('img').attr('alt', alt);
                $lightbox.find('img').css(css);
            });
            
            $lightbox.on('shown.bs.modal', function (e) {
                var $img = $lightbox.find('img');
                    
                $lightbox.find('.modal-dialog').css({'width': $img.width()});
                $lightbox.find('.close').removeClass('hidden');
            });
        });
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.