Open deeplinks in a lightbox

During a discussion about deep linking to my photos from google+ collections to my website it was mentioned that the user experience wasn’t optimal. When you click on a photo which is uploaded to google+ it opens in a nice lightbox. But external links, and as such my deeplinks, just open a browser with a page.
So I want to share a  simple technique to fix this and open deeplinks  in a lightbox.

On my site I use the Responsive Lightbox by dFactory with  the swipebox  lightbox together with the Alizee theme. I assume you know how to deal with a child theme if you want to do things the decent way..

First of all sorted out which template was used to show my post with featured image. I use the later to show my photo and as such this is the photo which has to go into the lightbox.
In my case this is the content-single.php file. Here I looked for where the image was shown:

<?php if ( (has_post_thumbnail()) && ( get_theme_mod( 'alizee_post_img' )) ) : ?>
 <div class="single-thumb">
 <?php the_post_thumbnail('alizee-thumb'); ?>
 </div> 
 <?php endif; ?>

The first step is to add a link around the image.:

<?php if ( (has_post_thumbnail()) && ( get_theme_mod( 'alizee_post_img' )) ) : ?>
 <div class="single-thumb">
 <a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id() );?>" 
id="deeplink-click" data-rel="lightbox-gallery-1">
 <?php the_post_thumbnail('alizee-thumb'); ?>
 </a>
 </div> 
 <?php endif; ?>

This link points to the full thumbnail, adds an ID and a data-rel. The value for the later I found in a  gallery.

At the top of the page I added;

<?php 
$deeplink = (parse_url ($_SERVER['HTTP_REFERER'],PHP_URL_HOST)  !== $_SERVER['HTTP_HOST']);
if ($deeplink || $argc>0): ?>
<script>
jQuery(window).load(function() { 
 jQuery('#deeplink-click').trigger('click'); 
});
</script>
<?php endif; ?>

The deeplink checks if the referer is from an other site, if so or when there’s a parameter (for testing) it adds a little javascript.
The jQuery(window).load() makes sure the page AND the images are loaded befire it calls a trigger(‘click’) on the link which I added around the image.

And that’s it.

I’m sure there’s a a lot to improve, but as a basic  technique it seems to work. And if not, there’s a fall back to the normal page.

Leave a Reply

Your email address will not be published. Required fields are marked *