Lightbox v2 For Image Attachments

MobileHacks

New Member
Overview:
vB 3.7.2 using Lightbox v2.04.

Lightbox v2 is released under Creative Commons License.

version of vB Lightbox, and if an image takes a while to load it looks broken. Lightbox v2 has a loading ticker, and nicely resizes smoothly to the users screen size. Overall its a much nicer experience.

Installation:

Very simple and straight-forward.

1. Download lightbox v2 from here. (currently v2.04) Or at the end of this post.

2. Upload the contents of the package to your forum root directory.

3. Turn off your forums in AdminCP > vBulletin Options > Turn Your vBulletin On and Off.
You will be editing some templates which will affect users experience if they access them whilst being edited. Best to be safe

4. Disable the built-in vB Lightbox in AdminCP > vBulletin Options > Message Attachment Options > Use Image Lightbox.
We want to turn this off so we can replace the vB function with our own.

5. Edit the headinclude template for any active styles on your forum in AdminCP > Styles & Templates > Style Manager.
Insert this anywhere appropriate:



PHP:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

6. Now we are going to edit the postbit_attachmentthumbnail template.
Replace the contents of this template with this:



PHP:
<a rel="lightbox" href="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&d=$attachment[dateline]"<if condition="$show['newwindow']"> target="_blank"</if>><img class="thumbnail" src="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&stc=1&thumb=1&d=$attachment[thumbnail_dateline]" border="0" alt="<phrase 1="$attachment[filename]" 2="$attachment[counter]" 3="$attachment[filesize]" 4="$attachment[attachmentid]">$vbphrase[image_larger_version_x_y_z]</phrase>" /></a>
&nbsp;<if condition="$show['br']"><br /><br /></if>

7. Re-enable your forums and everything should work!


Notes:
Like in the original thread for vB 3.6, the page must finish loading for this script to work.
 
Back
Top