PDA

View Full Version : Forum Display Enhancements - Lightbox v2 for image attachments


Mitchee
08 Aug 2008, 00:56
Overview:

This is based on imranbiag's 3.6 mod using Lightbox v1 which is found here. (http://www.vbulletin.org/forum/showthread.php?t=123235) I have tested it, and it works fine in vB 3.7.2 using Lightbox v2.04.

Lightbox v2 is made by Lokesh Dhakar (http://www.lokeshdhakar.com/) and is released under Creative Commons License. If you like his script, please donate to him. (http://www.lokeshdhakar.com/projects/lightbox2/#donate)

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. (http://www.lokeshdhakar.com/projects/lightbox2/#download) (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
08 Aug 2008, 16:30
3.6.10 here... did u test on it?

got installed this http://www.vbulletin.org/forum/showthread.php?t=139167&highlight=highslide
and now is in the graveyard :mad:

Jezlad
10 Aug 2008, 15:59
Seems interesting.

If it works on 3.6.10 i'll use it. :)

ATVTorture
30 Sep 2008, 02:29
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
24 Mar 2009, 01:11
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
24 Mar 2009, 13:49
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
24 Mar 2009, 15:39
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 :D.

crazlunatic
26 Mar 2009, 04:36
Well, I got the code to not display if user was using IE. Works fine now :) Sorry IE users!

BigJohnny
29 Mar 2009, 15:08
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.

http://www.vbulletin.org/forum/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
30 Mar 2009, 12:57
So what do we have to do to make it work on ours then?

Thanks for looking into it!

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