Using jQuery Lightbox for Your Images in Movable Type

In yet another example of just how flexible Movable Type can be, I have assembled this simple tutorial which can help you make more compelling and interesting pop-ups for the images you insert into your blog posts. This simple recipe calls for the following ingredients:

Instructions:

  1. Install jQuery and the Lightbox jQuery Plugin into the HTML head of your blog. When you are finished, you should have HTML very similar to the following in between the <head> and </head> tags of every page of your web site.

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.lightbox-0.5.min.js"></script>
    <link rel="stylesheet" href="/css/jquery.lightbox-0.5.css" type="text/css" />
    
  2. Insert the following Javascript code into the HTML head of your web site as well. This is the magic that will convert any inserted asset into a lightbox image:

    <script type="text/javascript">
    $(document).ready(function() { $('a[@rel*=lightbox]').lightBox(); });
    </script>
    
  3. Create a template module called "Asset Insertion" per the instructions that come with Assetylene. Insert the following contents into that module:

    <mt:Asset id="$asset_id">
    <mt:if tag="AssetType" eq="image">
    <MTSetVarBlock name="width" trim="1"><MTAssetProperty property="image_width"></MTSetVarBlock>
    <mt:if name="width" gt="640">
    <mt:setvarblock name="href"><mt:AssetThumbnailURL width="640"></mt:setvarblock>
    </mt:if>
    <mt:unless name="href"><mt:setvarblock name="href"><mt:var name="a_href"></mt:setvarblock></mt:unless>
    <mt:var name="form_tag"><div style="text-align: <mt:var name="align">"><a rel="lightbox" href="<mt:var name="href">" title="<mt:var name="label" escape="html">"><mt:var name="img_tag"></a></div><mt:if name="enclose"></form></mt:if>
    <mt:else>
    <mt:var name="upload_html">
    </mt:if>
    </mt:Asset>
    

One of the things that nice about the sample code above is that it ensure that the image you link to is of a reasonable size, regardless of how large the original image is. In the event for example that you upload a 3MB 4000x6000 pixel image, the photo that will appear in the lightbox will be at most 640 pixels wide.

And that's it. Demo time.

Demo


Harper and his BFF

Recommended Entries

22 Comments

Wow this is just what I was looking for. I'll be using this! Thank you!

I want to add that the key to making the images appear is passing in the right arguments. Here is some updated javascript to help with that:

$(document).ready(function() { 
  $('a[@rel*=lightbox]').lightBox({
    imageLoading:'/images/lightbox-ico-loading.gif',
    imageBtnPrev:'/images/lightbox-btn-prev.gif',
    imageBtnNext:'/images/lightbox-btn-next.gif',
    imageBtnClose:'/images/lightbox-btn-close.gif',
    imageBlank:'/images/lightbox-blank.gif',
  });
});

Hi Byrne,

I'm kinda new at this.

When you say install jQuery and the Lightbox jQuery Plugin, does it mean that I have to upload this file into my server right? Because I Uploaded the file jquery.lightbox-0.5.js, jquery.js and jquery.js to my site. I followed your instruction and nothing happens. What am I doing wrong?

Mike

When you say install jQuery and the Lightbox jQuery Plugin, does it mean that I have to upload this file into my server right?

Yes. You need to place these files in a "web accessible directory." In other words, put them somewhere so that you can view them in your browser. When you have done that you will need to load them using <script src=""> tags and a <link> tag for the javascript and css respectively. Look to the HTML source of this page for guidance on what that should look like. Also keep in mind that the lightbox plugin for jquery also has images associated with it that you will need to put on your web server as well.

Because I Uploaded the file jquery.lightbox-0.5.js and jquery.js to my site. I followed your instruction and nothing happens. What am I doing wrong?

What is the URL to your web site where this is not working?

That photo is amazing! haha.

HI Byrne,

My url: michaelmontesa.com/pixelatedcontext/blog

This is what I did.

I uploaded the jquery.min.js and jquery-lightbox-0 folder in public_html/pixelatedcontext. I also installed Assetylene-1.0 in my plugin in MT. Then, I place the script in the head of my blog (index.html of pixelatedcontext/blog). - is that where I'm supposed to place it? Everytime I publish my blog, the scripts goes away. Is there any other html codes where I'm supposed to put it?

@Michael - Are you editing the raw HTML files on your server, or are you editing your site's templates within Movable Type? Be sure to edit your templates - they govern the HTML of your site.

HI Byrne,

I did what you told me to and it still doesn't work or probably I'm not getting it.

Mike

Alternative to Assetylene is the Better File Uploader plugin. For me, since I am already using BFU, I just cut out Assetylene as BFU has a Lightbox option. Just needed the jQuery Lightbox lib.

Byrne, did you ever try my Custom Asset Markup plugin? It apparently does at least some if not all of the same things that Assetylene (which was created by Brad because he wasn't paying attention when I released mine) does and I'd like to merge the two. I'm wondering if you happen to know the difference.

If not, I'll find out. It's stupid to have two plugins that have such a big overlap in functionality.

I never did, but I do realize that your plugin and Brad's were very similar. I don't know why I went with Brad's - just because I was perhaps more familiar with it I guess.

Merging them would make total sense for sure. If there is one thing bloggers DON'T ever need is having to choose between two plugins that do the same thing!

Very nice! This seems to collect all the images on a given page into a LightBox viewer. This can be many images on an index page for a blog that may contain many posts.

Is there any way to constrain this to only the images within a single post? That is, each post brings up its own lighbox that page through only the images from that particular post. Is that something that can be done using the jQuery selectors alone?

Ramon

I am certain their is a way to do something like that, but I have not researched how exactly. You would need to instantiate a lightbox for each grouping of photos. That would require:

  • giving each lightbox set a unique class name shared between all assets in that post.
  • building a list of all of the above class names and then instantiating a lightbox for each of them.

At least I would think that would work...

Hi Byrne,

Like Michael, I followed your instructions and wasn't able to get the lightbox working. I followed your steps to the letter, but when I click the photo in a blog entry, it opens in the browser window, not in a lightbox.

Any idea what I might be doing wrong?

Thanks.

Can you send me a link to an example post in which an embedded image is not properly spawning the lightbox? If I can view the source of the page I think I can help point you in the right direction.

A quick scan of the page shows that your <script> tag for jQuery is malformed. Check your syntax and make sure your tags are closed properly.

Hi Byrne,

Thanks again for answering. I hate to be a pest, but I'm not exactly sure what you mean when you say the script tag for jQuery is malformed. I copied and pasted it directly from the code snippet you provided above. Can you tell me what I should be looking for?

Never mind - I took a look at your source code (since we're using the same theme) and decided to delete the first jQuery script tag in my HTML head template. Once I did that, it worked like a charm.

Thanks again!

Byrne, Thanks for ideas with MT - they have helped me in the past, and I have a questions about this jquery system. I have this implemented at MT4.25 with Assetylene and jquery, and I'd like the system to NOT place a lightbox reference and anchor tag when an image is just inline, and not a thumbnail.

I had a scriptaculous system with lightbox doing this before, but sometimes the script would break in IE. Here's what part of the anchor tag looks like when I upload or embed an image that is not a thumbnail - the symptom is that the linked image opens a non-loading lightbox window indefinitely. Any ideas? Thanks!

[a rel="lightbox" href="editor-content.html?cs=utf-8" title=""]

Could I use a mt:If statement within the Head template around the javascript to control how the code is presented to the entry?

For the comment above, you can see the example at http://robotsandspiders.com

Thanks!!

Leave a comment

what will you say?


Recent Comments

Close