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.

[Kihon Kata]

bump! any fixes?

[nul7]

This mod has caused me many headaches. lol The actual mod worked great... attachments opened with lightbox, but for the last few days we've had this problem:



It was like that in both the font selector and the size selector. I've been hunting the cause relentlessly trying to figure out wtf is causing it. Then I remembered this mod and "uninstalled" it. Now it's back to normal. Good idea... poorly executed.

[vietConnecting]

Originally Posted by nul7

This mod has caused me many headaches. lol The actual mod worked great... attachments opened with lightbox, but for the last few days we've had this problem:



It was like that in both the font selector and the size selector. I've been hunting the cause relentlessly trying to figure out wtf is causing it. Then I remembered this mod and "uninstalled" it. Now it's back to normal. Good idea... poorly executed.

Aha, you need clear in headinclude:

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

Open Main CSS and paste to below of Additional CSS Definitions box:

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

End!

[Lord Kirken Mor]

Whats the reasoning why someone would add this? The demo link shows something else.

[imranbaig]

The Demo site went through lots of upgrades and changes.
Probably I will update this with slimbox.

[honestdave]

i think about 20% of our members can't see the attachments. so we will probably try to make this an additional option that members can switch on.

[MR.BOSS]

i need help please! royal_spirits@hotmail.com

[Land]

Lovely mod! Installed. :up:

[Land]

Originally Posted by Sean S

Here is what you guys have to do to get rid of those errors that you have been getting, put an if condition around the script,

<if condition="THIS_SCRIPT == 'showthread'">
<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" /></if>

This fixed editor wysiwyg problems! :up:

[Land]

I found new issues... unistalled.
It's a pity, it could be a nice mod.