Images too small? Try this Lightbox!

December 4, 2015 Uberflip Customer Success

You've probably seen this effect before - you're on a blog post that has an image you'd like a better look at, so you click and voila! A box (lightbox) shows up with the image enlarged.

Check it out! Click the image to see lightbox in action!

We've included some code below that you can use to create this effect in your Hub. Feel free to make any modifications necessary! 

For this, it's best to start with a blog post that already has an image inside. You'll need the URL for that image, so do a Ctrl (or Command) + C and put it somewhere safe.

  1. Open your blog post in '<> Source' format.
  2. Put <a> tags around the image you choose. 
  3. Put a class of "lightbox_trigger" on the <a> tag.
  4. Put the URL for your image on the href in your <a> tag.

The HTML should look something like this:

Now that your post is prepared, it's time to add the code to your CSS and JavaScript sections.

Put this in the CSS section of the Custom Code for the Item (ie. NOT the Hub Custom Code section):

#lightbox {
    background: rgba(0, 0, 0, 0.75);
    z-index: 70000;
    padding: 8em 0;

.little_lightbox {
    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;

Then put this in the JavaScript section (again, for the Item - not your Hub!):

And that's it! Full disclosure: we based this tutorial on another one, found here.

Previous Article
Force Link CTAs to Open in the Same Window
Force Link CTAs to Open in the Same Window

Use this code to force links clicked in a Link CTA to open in the same window.

Next Article
CSS TIP: How to center a <div> with a variable width
CSS TIP: How to center a <div> with a variable width

Conventional wisdom has it that if you want to center a container such as a div, your best bet is to define...