Our blog, keeping you up-to-date on our latest news.

 

Corporattica Theme: How to Enable Lightbox in Post

August 6, 2011 at 3:59 am | Blog | 4 comments

 

Corporattica theme has already embodied with Lightbox feature by Fancyzoom. For example, images in the bit sections in the home page and portfolio page.

But, how to enable the lightbox feature in your own post too? Here is the demo http://demo.pengbos.com/corporattica/?p=13

First, let’s look at the javascript, which enables the fancyZoom, in the header.php

		$(document).ready(function() {
			$('div.photo a').fancyZoom();
                }

This will add the Zoom Effect to any a tag in the div tag classed with photo, and will show content relating to the id referenced in the href of the a tag.

As, the javascript has already been there in the header.php, you have to write html in your post follow the pattern as described above.

<div class="photo">    
       <a href="#yourcontentid">
           <!--please add you img tag or text content here -->
       </a>
</div>    
<div id="yourcontentid">
            <!--please add you img tag or text content here -->
</div>

This is an html template that follows the javascript for enabling fancyzoom in your post. For a template, you can not change some predefined tags, but you can add your own content.
Here are the rules that used by the javascript to enable the fancyzoom, so you should not change:
1. the structure of the html cannot be changed.
2. the class name “photo” for the first div tag cannot be changed.

But, you can change:
1. you can change the href value, but it must be consistent to the id of the second div.
2. add your content to the a tag, and div tag.

as fancyZoom can add Zoom effect to both images and text. So you can put img tag or text to the above template.

Here is an example on how to add thumbnail image to the post, and popup a lightbox with a full sized image on click.

<div class="photo">    
      <a href="#image1">
           <img src="http://demo.pengbos.com/corporattica/wp-content/uploads/2011/03/portfolio-150x150.jpg" alt="" title="portfolio" width="150" height="150" class="aligncenter size-thumbnail wp-image-37" />
      </a>
</div>    
<div id="image1">
       <img src="http://demo.pengbos.com/corporattica/wp-content/uploads/2011/03/portfolio.jpg" alt="" title="portfolio" width="492" height="280" class="aligncenter size-full wp-image-37" />
</div>

see the final effect from the demo here http://demo.pengbos.com/corporattica/?p=13

<< Back to Blog Discuss this post

 

4 Comments to “Corporattica Theme: How to Enable Lightbox in Post”

  1. Tomas says:

    Is there a way to integrate this into the php template?
    If I’d be adding ten or more pictures it would be kinda tedious to write this for each picture. I’m looking for a way to generate this automatically when I upload and insert a picture.

    admin Reply:

    Hi Tomas,

    Yes, I think there might be some plugins. please search for plugins.

    Tomas Reply:

    Well, there is. It’s Lytebox 😀
    But it doesn’t work.
    The thing is I concluded that it would be more practical if thumbnails for bits and portfolio items would become links and the pictures inserted into posts and pages would be popping up with the Zoom Effect.
    I’m just looking for the right place in the theme code to change it.

    Gerard Reply:

    Hi Tomas;

    I would like to do this that you comment. Is it possible to change de code and thumbnails for bits and portfolio items would become links and the pictures inserted into posts and pages would be popping up with the Zoom Effect?

    Please if you know how to do that tell me it please?