vBulletin Mods

The Official vBulletin Modifications Site
https://www.vbulletin.org/forum/showthread.php?t=115701

vBulletin Attachment Lightbox
by Ntfu2
15 May 2006 22:45

4 Attachment(s)
//////////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/
****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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Save and close

2. Next open postbit_attachmentthumbnail find <a after add

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Save and close

3. Next Open the headinclude template Find

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace with

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Thank You

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

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Save and close

Next open the postbit_attachmentthumbnail

After <a add

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Save, and close.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Enjoy it.

Ntfu2 15 May 2006 22:46

To Have This LightBox Effect for anything using the [attach]id[/attach] code please do the following file edit:

Open includes/class_bbcode.php, find (around line 1767)

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace that with this

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


DEMO: Same as above link, post #14
*Tested on 3.5.4 Only So Far*


Add File Name Caption:
postbit_attachmentthumbnail, after

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Add This after For filename, filesize and times Downloaded

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Other Variables to put in for a nice effect:
Not sure how to do it with the img code. If you can figure it out please share,

Kihon Kata 15 May 2006 23:14

whoa, friggen way PiMp! installs

Ahsin1 15 May 2006 23:17

Kool should be HTM

Ntfu2 15 May 2006 23:26

Quote:

Originally Posted by Kihon Kata
whoa, friggen way PiMp! installs


Dont forget to click install, and vote hack of the month.

Also i think i fixed the permissions to let guests view, if not let me know :D

ryancooper 15 May 2006 23:32

2 Attachment(s)
Very Cool.

A warning to firefox users it will not show. I spent 10 min. Lookign at the site and thinking wht the heck does this do? Noting looks different to me. Then I went to IE and Wa La it was there. Be-U-Ti-Ful :banana:

Check screen

It does not watermark it by any chance does it. . . ;)


EDIT: I jsut tried it in firefox and it worked! Strange.

Anyway Nice Work!

Kihon Kata 15 May 2006 23:32

we don't allow guests so no biggie.

The Next/previous images aren't showing up for me

Ntfu2 15 May 2006 23:34

Quote:

Originally Posted by ryancooper
Very Cool.

A warning to firefox users it will not show. I spent 10 min. Lookign at the site and thinking wht the heck does this do? Noting looks different to me. Then I went to IE and Wa La it was there. Be-U-Ti-Ful :banana:

Check screen

It does not watermark it by any chance does it. . . ;)


EDIT: I jsut tried it in firefox and it worked! Strange.

Anyway Nice Work!

No for watermark, search for the watermark hack released here by me.

Im using latest version of FireFox, and its all working fine,, not sure of the problem, i'll start investigating and see what i can turn up :D


Also thanks for the screen caps :D

Dr.Viggy 15 May 2006 23:38

works for me in FF with no problem but not in IE7 beta2.

as for the prev and next buttons, i couldn't find them initially either but if you move your mouse onto the pic you'll get the prev or next depending on which side of the image you're on.

Ntfu2 15 May 2006 23:38

Quote:

Originally Posted by Kihon Kata
we don't allow guests so no biggie.

The Next/previous images aren't showing up for me


make sure you move the mouse over toward the left or right side. images should be placed in the forum images directory like so http://www.yousite.com/forums/images/lightboximages.jpg

hope that does it

Ahsin1 15 May 2006 23:39

not working for me

Mr Chad 15 May 2006 23:39

Holy Shit :)

Kihon Kata 15 May 2006 23:41

Quote:

Originally Posted by Ntfu2
make sure you move the mouse over toward the left or right side. images should be placed in the forum images directory like so http://www.yousite.com/forums/images/lightboximages.jpg

hope that does it

I checked your zip and there is no image called lightboximages.jpg

EDIT: Sorry I see what you mean. I have the images in my forums/images directory. Still not next/prev images

ryancooper 15 May 2006 23:43

WOW Everything works like a charm but no next and prev images either...

Dr.Viggy 15 May 2006 23:51

ie7 takes a minute to load the js files but works. this is awesome. nice work


All times are GMT. The time now is 08:08.

Powered by vBulletin® Version 3.8.12
Copyright © 2019, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright ©2001 - , vbulletin.org. All rights reserved.