The Arcive of Official vBulletin Modifications Site.

vBulletin Attachment Lightbox · **Released**: 05-14-2006

//////////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\/
****LightBox for vBulletin Attachments By: Dave @ FightRice.com****
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\/
//////////////////////////////////////////////////////////////////\
Ogrinal Version: ALl credit should go there, I Simply ported to vBulletin by myself

View Second Post In Thread for more modifications:

What this hack does is add a nice CSS and Javascript lightbox effect
to your forums attachments. Attachments must be set to shown as thumb-
nails and not inline. Attachments can not be posted using the [attach]
id[/attach] bbCode at this time.

Working Demo(s): (Send me your URL once you get it working) http://www.fightrice.com/forums/showthread.php?t=124

Now Lets Get Started

1. Open your adminCP - Styles and Templates - Template Manager - Postbit
Templates - postbit OR postbit_legacy (only edit both if you use both)
At The Very Top Add

Code:

<!--LightBox By Dave At FightRice -->
<if condition="$show['thumbnailattachment']">
<script type="text/javascript" src="clientscript/prototype.js"></script>
<script type="text/javascript" src="clientscript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="clientscript/lightbox.js"></script>
<!-- / Light Box -->
<else />
<!-- Nothing To Load Here-->
</if>
<!-- /LightBox -->

Save and close

2. Next open postbit_attachmentthumbnail find <a after add

Code:

rel="lightbox[attachment]"

Save and close

3. Next Open the headinclude template Find

Code:

<!-- / CSS Stylesheet -->

Replace with

Code:

<link rel="stylesheet" href="clientscript/vbulletin_css/lightbox.css" type="text/css" media="screen" />
<!-- / CSS Stylesheet -->

Save and close

Thats all for template edits:
Now upload the contents of the clientscript into your forums. You should end up with this structure
/forums/clientscript/vbulletin_css/lightbox.css
/forums/clientscript/ - All the .js files go inside this folder

Next Upload the images into the webroot.ex
http://www.yoursite.com/images/lightboximages.gif (note this isnt an actual image, its an example)

Thats all there should be

User Configuration Options below If you do not feel comfortable doing this, dont
its not neccasary. if you come up with a cool effect please share it.
|||||||||||||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||||||||||||
-------------------------------------------------------------------------------
In the clientscript/lightbox.js file these lines you can config to suite your needs
__________________________________________________ _________________________________

Code:

var fileLoadingImage = "/images/loading.gif";		
var fileBottomNavCloseImage = "/images/closelabel.gif";

var resizeSpeed = 7;	// controls the speed of the image resizing (1=slowest and 10=fastest)

var borderSize = 10;	//if you adjust the padding in the CSS, you will need to update this variable

__________________________________________________ _________________________________
clientscript/vbulletin_css/lightbox.css

Of Course can also be edited to make it unique to your needs.

Thats All, Make sure you click install, and nominate for Hack Of The Month!

If you like and wish to see other cool releases please donate via paypal, marcia@secondhomekennel.com
or a simple link back will rock as well

Code:

<a href="http://www.FightRice.com" target="_blank">Fight Rice</a>

Thank You

CLICK INSTALL TO GET SUPPORT! also a nomination for hack of the month wouldnt hurt

THIS IS FOR THE IMAGE RESIZE VERSION - USE lightboxresize.zip DO NOT USE BOTH!

/////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\/
Dynamic Lightbox auto resize - and image overlay.
/////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\/

If using a previous version of this hack, please remove all instances, delete all old files
and undo any templae edits. easy way is to simply follow the old instructions, and simply remove
things instead of add.

This lightbox will automatically resize images to your screen, and all for full size viewing.
Feel free to edit as you see fit.

First Step. open lightbox_plus.js at the very end find

Code:

// === PLEASE EDIT TO MATCH YOUR SITE ===
addEvent(window,"load",function() {
	var lightbox = new LightBox({
		loadingimg:'http://www.YOURSITE.com/images/loading.gif',
		expandimg:'http://www.YOURSITE.com/images/expand.gif',
		shrinkimg:'http://www.YOURSITE.com/images/shrink.gif',
		effectimg:'http://www.YOURSITE.com/images/zzoop.gif',
		effectpos:{x:-40,y:-20},
		effectclass:'effects',
		closeimg:'http://www.YOURSITE.com/images/close.gif'
	});
});

Replace all YOURSITE.com with the actual address you will keep everything. pretty simple.
Save and close.

Create the zzoop.gif image to match your site,

Upload lightbox_plus.js to the /yourforumlocation/clientscript folder

Upload lightbox.css into /yourforumlocation/clientscript/vbulletin_css folder

Upload all images into http://www.YOURSITE.com/images

*MAKE SURE ALL PREVIOUS INSTALLATIONS ARE REMOVED AT THIS POINT*
Login to AdminCP -> Styles Templates -> headinclude template

add at the very end.

Code:

<link rel="stylesheet" href="clientscript/vbulletin_css/lightbox.css" type="text/css" media="screen,tv" />

Save and close

Next open the postbit_attachmentthumbnail

After <a add

Code:

rel="lightbox"

If you want the image overlay, also add (or if you changed the effectclass in lightbox_plus.js use what you changed it to)

Code:

class="effects"

Save, and close.

in the postbit_legacy or postbit, place this code at the very top

Code:

<script type="text/javascript" src="clientscript/lightbox_plus.js"></script>

This should produce similar results to the last one, there is no next or previous buttons though.

Enjoy it.

SkyCatcher · #**132** 05-18-2006, 07:01 PM

Well I can't can't figure it out right now, same thing happens anywhere within the postbit template, perhaps I can add it to one of the header templates to make it work properly.

BTW - the only complaint I've received from users is that the images do not resize. If someone adds a 2048x2048 pic and users click the thumbnail, they have to scroll all over the place and can't really make anything out because the original size is just too big. Normally a browsers automatic image resizing takes care of this but it seems to be disabled when using your hack. Any plans to get this working again somehow?

Overall it's a beautiful hack and I'll continue to use it once the images can be automatically resized or the image resizing for browsers works

Ntfu2 · #**133** 05-18-2006, 07:15 PM

I have a version coming that resizes images automatically, but sadly the next and previous buttons do not work at the same time with it. because there is the option to view the image in full size.

When adding the javascript into the headinclude template it calls them every time the page is loaded and can have an effect on performance sometimes.

Lady Divus · #**134** 05-18-2006, 08:55 PM

Quote:

Originally Posted by Ntfu2

Maybe one day though, im just a n00b

If you are just a n00b, i cant wait to see what you produce when you are an oldie

Very nice work. Thank you for your reply, and thank you for looking into the resize issue. Be well -

Lady Divus

Ntfu2 · #**135** 05-18-2006, 09:55 PM

Updated first post to include instructions for image resize and a overlay.

here is a demo: http://www.fightrice.com/forums/site...-test-197.html

My sites running like poo right now, if you go there and its down, just check back

Quick edit also seems to work fine in this version, someone else will need to confirm that for me please

Lady Divus · #**136** 05-19-2006, 03:11 AM

Ntfu2, i did everything you said to do for this new resize release, but for the life me i cant get it to work. It just stopped working altogether and opens the images in a seperate window with a white background, (vB Default view)...

I undid all the previous template edits, i deleted all the previous files from my server, i edited the new js file to point to my site images, i did the new template edits, i uploaded all the new files to my server. Am i doing something wrong? Thank you for any help in advance -

Lady Divus

Ntfu2 · #**137** 05-19-2006, 03:19 AM

did you change the rel="lightbox[attachment]" to simply rel="lightbox" ?

Lady Divus · #**138** 05-19-2006, 03:35 AM

Quote:

Originally Posted by Ntfu2

did you change the rel="lightbox[attachment]" to simply rel="lightbox" ?

Yes i did.

Tulsa · #**139** 05-20-2006, 08:05 PM

When I load up the three pics on your demo site I simply get the pic with a nice border around it and a small x in the upper right hand corner. Anywhere I click on the pic once it's loaded, it goes away. No prev or next. The name size and number of times loaded shows as a tooltip and that's it.

Now on my site I get the annoying prev/next with a flashing line right in the middle of the pic where each click side is separated. I get the animation of the box and the sliding down with the name,size and loaded times but only on the pics without bbcode [attach].

I love the way the demo site works, clean and simple. Load the pic, close the pic, click on the next pic to see it.

What is different about your demo site and the instructions you have provided here?

Also I do have it loaded the bbcode pics on 3.5.3 since you said you'd only tested in 3.5.4.

Ntfu2 · #**140** 05-20-2006, 11:07 PM

The demo site is now running the 2nd version "lightboxresize.zip"

Simply undo all template edits from previous version, and follow instructions in the second part of the first post -
/////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\/
Dynamic Lightbox auto resize - and image overlay.
/////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\/

From there down to get the same version as on demo site now.q

Tulsa · #**141** 05-21-2006, 06:28 AM

Perfect!

Are you adding the bbcode support to the second one?

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04767 seconds Memory Usage 2,328KB Queries Executed 25 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (11)bbcode_code (2)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (6)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (1)pagenav_pagelinkrel (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!