Forum Display Enhancements - Lightbox v2 for image attachments

Overview:

This is based on imranbiag's 3.6 mod using Lightbox v1 which is found here. I have tested it, and it works fine in vB 3.7.2 using Lightbox v2.04.

Lightbox v2 is made by Lokesh Dhakar and is released under Creative Commons License. If you like his script, please donate to him.

I dont really like the included 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 I feel 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:

<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:

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

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. Ive only had this script fail by purposely trying to click an attachment while the page is loading. Not a real concern for me.

[iogames]

3.6.10 here... did u test on it?

got installed this https://vborg.vbsupport.ru/showthrea...ight=highslide
and now is in the graveyard

[Jezlad]

Seems interesting.

If it works on 3.6.10 i'll use it.

[ATVTorture]

I have tried this multiple times. Ever time I turn it on and have standard or enhanced text editors enabled, Internet Explorer gets an "operation aborted" when you try to edit or create a new post. It works fine in the basic text editor. If I have standard or enhanced editors enabled, and enable the code referencing the js and css files in "headinclude", IE blows up for all of my users. Something I also noticed was that your line for scriptaculous.js doesn't have "load=effects,builder" on it. Without builder, there's a JS error that builder is not defined. If I put ",builder" on the end as the creator of lightbox says to do, IE blows up with an "operation aborted" error. And yes, I am turning the VB built-in lightbox function off.

I then tried to add a line in headinclude for "<script type="text/javascript" src="js/builder.js"></script>" and get the same results.

Do you ahve any ideas as to why the builder function is making IE barf? I'm running VB 3.7.3.

Thanks!
Buster

[crazlunatic]

Originally Posted by ATVTorture

I have tried this multiple times. Ever time I turn it on and have standard or enhanced text editors enabled, Internet Explorer gets an "operation aborted" when you try to edit or create a new post. It works fine in the basic text editor. If I have standard or enhanced editors enabled, and enable the code referencing the js and css files in "headinclude", IE blows up for all of my users. Something I also noticed was that your line for scriptaculous.js doesn't have "load=effects,builder" on it. Without builder, there's a JS error that builder is not defined. If I put ",builder" on the end as the creator of lightbox says to do, IE blows up with an "operation aborted" error. And yes, I am turning the VB built-in lightbox function off.

I then tried to add a line in headinclude for "<script type="text/javascript" src="js/builder.js"></script>" and get the same results.

Do you ahve any ideas as to why the builder function is making IE barf? I'm running VB 3.7.3.

Thanks!
Buster

I'm getting same problem. Please help!

[ATVTorture]

I wouldn't expect help. If you notice, my last post was back in September and I got no help. If someone provides it now, I would be surprised. I still haven't found a solution.

[TheLastSuperman]

Originally Posted by ATVTorture

I wouldn't expect help. If you notice, my last post was back in September and I got no help. If someone provides it now, I would be surprised. I still haven't found a solution.

Just wait for someone nice to come along eh?

I'll test this WHEN I have time on a 3.6 board as I only have access to 3.6 and 3.8 boards, I stay busy so please send me a reminder PM this weekend if you see nothing well simply because I'm absent minded on occasion .

[crazlunatic]

Well, I got the code to not display if user was using IE. Works fine now Sorry IE users!

[BigJohnny]

there is this for highslide, which personally i REALLY like because it has more options... you can even drag the images around with highslide.

I'm using highslide with a bbcode right now as well.

https://vborg.vbsupport.ru/showthread.php?t=197901

and this one is easy, basically you add the stuff to the headinclude, and you can use class="highslide" onclick="return hs.expand(this)" anywhere there is an img tag.

[ATVTorture]

So what do we have to do to make it work on ours then?

Thanks for looking into it!

Originally Posted by crazlunatic

Well, I got the code to not display if user was using IE. Works fine now Sorry IE users!