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.

[hnjco]

thanks imranbaig saab

Hope this can be sorted soon and we can use.

[radarhunter]

workin` now thankx

[shadow smith]

Hey guys, before I install this, does it work with quick editting? I thought I'd ask before I went tinkering.

Thanks,
Steve

[Natalie@Club]

Great hack, I can confirm it works in Firefox and Safari

[Noctavia]

Originally Posted by Oddjob

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

Same, where exactly do we upload the CSS, Images and JS folders to?

[Funky Diver]

Originally Posted by Noctavia

Same, where exactly do we upload the CSS, Images and JS folders to?

You upload them to the folder where your forum sits.

e.g. /www/forum or if your forum sits on your www/ (or public_html) then put them in there.


On a seperate entity, this really is a sweet hack... IF it would work properly.

I have the greyed out loading thing... that works fine. No problems editing attachments... BUT when I do click on the image, it doesn't appear in the box, it goes through the loading thing, looks very nice... then new page with the image, aligned to the left. This ONLY happens in Firefox... it works fine in IE. What have I done wrong, because I just cannot figure it out?

[Noctavia]

Originally Posted by Funky Diver

You upload them to the folder where your forum sits.

e.g. /www/forum or if your forum sits on your www/ (or public_html) then put them in there.

Thankyou very much, I thought that might have been it, but wasn't 100% sure because I couldn't get it to work properly.

Originally Posted by Funky Diver

No problems editing attachments... BUT when I do click on the image, it doesn't appear in the box, it goes through the loading thing, looks very nice... then new page with the image, aligned to the left. This ONLY happens in Firefox... it works fine in IE. What have I done wrong, because I just cannot figure it out?

I am having this problem as well, although mine doesn't work in Explorer ><

[PixelFx]

the only issue I'm having with this after applying it is that, if I do a quick edit of a post, it won't save. Unless I'm in advanced mode.

Other than that, using the conditionals above, fixed all problems I had before when I tried this hack.

[Atachi]

it's the prototype.js, btw.
it's conflicting with vbulletin's own JS-framework.

tried doing the same a few days ago (didn't know there were already hacks) and ran into the same problem.

[PixelFx]

anyone found fix for this? and thanks