Adding Lightbox to Attachment thumbs

Adding Lightbox to Attachment thumbs
Overview
Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

-This hack allows you to add the famous lightbox to attachment thumbnails.

- This makes users see attached images easilly, without having to open another page.

- It can be completly customised, to fit into your skin design, from css.

Installation - Very easy.

Download and upload the contents of upload folder into your forum root.

Template Edits.

Step1: Open headinclude, and insert this inside <heade></head>

<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" />

click Save.

Step2: Now Open postbit_attachmentthumbnail

Find:

<a href="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;d=$attachment[dateline]"<if condition="$show['newwindow']"> target="_blank"</if>><img class="thumbnail" src="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;stc=1&amp;thumb=1&amp;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>

Replace With:

 <a rel="lightbox" href="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;d=$attachment[dateline]"<if condition="$show['newwindow']"> target="_blank"</if>><img class="thumbnail" src="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;stc=1&amp;thumb=1&amp;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>

Thats it Enjoy The hack.

Demo: http://forums.winkeyfinder.com/showthread.php?p=1502

Note: It doesn't work if I click an image link before the page has finished loading.
The script is activated only after the page has finished loading.
Thank you!

All the Credit goes to huddletogether.com, for devloping such a beautifull script.

[Terminatoronly]

installed its really good i love it

[Benj]

wicked i will be installing

[Oddjob]

Where exactly are you supposed to put that in the headinclude template? At the very top?

Im also a little confused where the files are uploaded to.....

[effectica]

Thanks for this. I installed it, it's great.

When I installed it though, it didn't work.
I think that the second edit should be

<a rel="lightbox" ....

Note the lightbOx

instead of

<a rel="lightbpx" ....

[effectica]

Originally Posted by Oddjob

Where exactly are you supposed to put that in the headinclude template? At the very top?

Im also a little confused where the files are uploaded to.....

EDIT: imranbaig has a better solution

[imranbaig]

Sorry for that typo error.
In the headinclude template Paste it below this.

<!-- CSS Stylesheet -->
$style[css]
<if condition="is_browser('opera') AND !is_browser('opera', '8.0.1')">
<style type="text/css">
ul, ol { padding-left:20px; }
</style>
</if>
<!-- / CSS Stylesheet -->

[effectica]

Thanks imranbaig.

One question. As with the other lightbox mods that can be found on this site, also yours gives the problem that the quick edit does not work. It saves the data but it doesn't close the quick edit box. Would you happen to know how to fix this?

[imranbaig]

Well this is due the the script, I think the author of the scriipt has few tips for Collision of scripts, Here is the link = http://www.huddletogether.com/projects/lightbox2/ Look into support part.

Also If you want to have it like gallery where it shows Next and Prev Links in lightbox, just change rel="lightbox" to rel="lightbox[whatever]"

[Holidazed]

Well, I followed the instructions to the letter, yet it does not work. I uploaded all the files and made the edits. When I click on the thumbnail in my forums, it just displays it like it always did b4.

See for yourself.
http://www.pcinfoman.com/vbb350/show...?p=193#post193
Username: testing
Password: testing

Ideas?