Implementing a lightbox with Rails and Bootstrap

As I write this, I am hard at work implementing a marketing page for a new Rails project (more information to come).  The marketing page has 5 pictures on it and I think that a lightbox approach would be a really nice way to display these pictures.

As a reminder, a lightbox is a modal window that pops out with the image that the user has just clicked. Lightboxes allow you to place smaller image on your web page but to display them in their full glory when a user clicks on them.

Bootstrap does not offer this functionality out of the box, but supports the basic component necessary to build one: the modal window.

Here’s how I implemented it.

First, I created a partial (_lightbox.html.haml). This partial contains the standard Bootstrap template of what a modal dialog is. The only particular thing is that it does not set the src attribute of the image tag.

%div#lightboxmodal.modal.fade{ :tabindex => '-1', :role => 'dialog', :aria => { :hidden => 'true' } }

  .modal-dialog

    .modal-content

      .modal-body

        %button.close{ :type => 'button', :data => { :dismiss => 'modal' } }
          %span{ :aria => { :hidden => 'true' } } ×
          %span.sr-only Close

        %img.lightbox_content{ :src => '', :style=> 'width: 100%;' }

Next, I defined a Coffeescript snippet that allows for the populating of this src attribute. The script reads the clicked element’s src attribute and assigns it to the modal window’s image. It then renders the modal.

$ ->
  $('.lightbox_trigger').on('click', (e) ->
    $('.lightbox_content').attr('src', $(e.currentTarget).find('img').attr('src'))
    $('#lightboxmodal').modal('show'))

To have this working you simply need to wrap your image with the lightbox_trigger class and make sure that you have the lightbox partial defined at the top of this post.

#main_page
  %h1.title Page title

    .body

      .images
        %a.lightbox_trigger{ :href => 'javascript: void(0)' }
          = image_tag('marketing/public_profile.png', :class => 'img-responsive')

    = render :partial => 'shared/base/lightbox'

This works great. It’s an acceptable solution to my current problem. That being said, there’s a few refinements that could be made. First, it would be nice to truly support a high res picture and a low res picture. The high res picture could be provided as a data attribute of the anchor tag or on the image tag. Another possible modification (in Rails anyways) is to extract the lightbox_trigger code and push it in a helper method (or at least in another partial).

For the moment though, this will do… Probably will raise a github issue internally (design change) on it.

Note that this solution was inspired by a Stackoverflow question that can be found here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s