Hub Hack: Enlarge Small Blog Post Images in a Lightbox

Follow

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


 

Details

  • 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.

 

Setup

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.

    Hubs___Edit_Article_-_Uberflip.png
  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" />
    </a>
  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.

 

Code

CSS

<style>
#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; }
</style>

 

JavaScript

<script>
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; }); });,
</script>
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.