Hub Hack: Enlarge Small Blog Post Images in a Lightbox


Use this Custom Code snippet to allow users to enlarge small images on blog posts with a lightbox effect.


Hub Hacks are not official Uberflip features.

Hub Hacks may not work on all Hubs, or may cause unexpected behavior. If you experience issues with a Hub Hack, available support is limited to helping you disable the Hub Hack only.


Hub Hacks are not compatible with Front End V2 Hubs.

If you are not sure if your Hub uses Front End V2, see this article for help.


  • Type: CSS, JavaScript
  • Placement: Head (CSS), Body Bottom (JavaScript)
  • Notes: Must be placed at the Item level - not in the Hub's Custom Code section.



You'll also have to do the following for each Item on which you want the hover effect to work:

  1. Log in to Uberflip and navigate to an Item on your Hub on which you want to enable the lightbox effect. This should be an item that contains an image.
  2. First, open the Item and grab the URL for the image that you want to enable the effect on.
  3. Now, return to the Stream view and click on Edit Item.
  4. In the Edit Article view, go to the Editor tab and click on the <>Source button in the menu bar.

  5. This will open the HTML view of the post. Locate the image, and wrap it within <a> tags.
  6. Put a class of lightbox_trigger on the <a> tag.
  7. Lastly, put the URL for your image on the href in your <a> tag.
  8. Here's an example of what this might look like:
    <a class="lightbox_trigger" href="YOUR IMAGE SRC GOES HERE">
    <img alt="" class="image_edit" src="YOUR IMAGE SRC GOES HERE" />
  9. Now, click on the Custom Code tab.
    • This has to be the Custom Code tab on the Item - not Custom Code for your Hub!
  10. Add the code snippets below to your Item's Custom Code.




#lightbox { position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0, 0, 0, 0.75); text-align:center; z-index: 70000; padding: 8em 0; } .little_lightbox { display:inline-block; background: black; color: white; text-transform: uppercase; padding: 1em; position: absolute; right: 0; } #lightbox img { box-shadow:0 0 25px #111; -webkit-box-shadow:0 0 25px #111; -moz-box-shadow:0 0 25px #111; max-width:940px; }



jQuery(document).ready(function($) { $('.lightbox_trigger').click(function(e) { e.preventDefault(); var image_href = $(this).attr("href"); var lightbox = '<div id="lightbox">' + '<p class="little_lightbox">Click box to close</p>' + '<div id="content">' + '<img src="' + image_href +'" />' + '</div>' + '</div>'; //insert lightbox HTML into page $('body').append(lightbox); }); $('body').on('click', '#lightbox', function() { $('#lightbox').detach(); }); $(document).on("click", ".dialog", function(e) { e.stopPropagation(); return false; }); });,
0 out of 0 found this helpful



Please sign in to leave a comment.