vBulletin Attachment Lightbox

//////////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\/
****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

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

rel="lightbox[attachment]"

Save and close

3. Next Open the headinclude template Find

<!-- / CSS Stylesheet -->

Replace with

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

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

<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

// === 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.

<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

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)

class="effects"

Save, and close.

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

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

[Ntfu2]

Originally Posted by Gizmo5h1t3

Shame The Prev And Next Buttons Cant Be Got To Work Properly, That Would Just Set It Off Nicely....


Hack Is Excellent Btw...

check the second post

[bashy]

Hi

Since installing this, when i submit a quick reply it posts the reply but gives a blank screen, I have to click back then refresh to see it

Any ideas please?

[bashy]

Hi again...

Its deffo this hack, As soon as i removed

<!--Light Box By Dave At FightRice -->
<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 -->

From the postbit_ip the quick reply is perfect again, is this 100% correct postbit_ip and not just postbit?

[Ntfu2]

Bashy,

Do you have any other mods that do a template edit to the postbit?

[Lady Divus]

Originally Posted by Barakat

this is the same hack with a small changes....
to resize the picture to a small view and after pressing on it it will open in its original size >

u can increase or decrease the size pic code

PHP Code:

if($NLP[0] > 500) 


make it 800 or 400 and it will work perfect .

and about the picture u can do like it and write inside it


press here to view the picture in its original size or what ever u want to wirte inside it <>

you will save you style in a nice way

Interesting, i was going to ask how to make the image open in a smaller size. I need to know, exactly where does this little piece of code go?

PHP Code:

if($NLP[0] > 500) 


Which template and where? Also, i need to know if you are referring to resizing the image, not the thumbnail?

For instance: My thumbnails are set at 100x100, this is just how i want them, but when i click the thumb, the hack works perfectly, but the image is showing in its original size of 1024x740. I want the image to show as 624x340 and then have an option inside there to view original size. Is this what your code change does? Please inform, and if not, how can i make it do the way i want? Thank you for your help.

Ntfu2, this is indeed the best hack thus far i have seen. I will be voting for it. Thank you -

Lady Divus

[Ntfu2]

Originally Posted by bashy

Hi

Since installing this, when i submit a quick reply it posts the reply but gives a blank screen, I have to click back then refresh to see it

Any ideas please?

You should be all fixed up right now.

I've found small bug in instructions, and will be updating them tonight when i get home

[bashy]

Thank you very much for ya help m8...

Just a small note, I did do the instructions in the 2nd post yet in that admin thread in my place your images did not show the other buttons?

Is this actually not working yet?

[Dr.Viggy]

i have the prev and next buttons working fine

[bashy]

oh...perhaps me missed sommat then...best go check me thinks

[Ntfu2]

I have to update the first post and install instructions, This became a mess when it got some what popular.

If you cant get it working, check back later tonight when i have time i'm going to tidy everything up