The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
![]() |
|||||||||||||||||||||||||
//////////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\/ ****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 --> 2. Next open postbit_attachmentthumbnail find <a after add Code:
rel="lightbox[attachment]" 3. Next Open the headinclude template Find Code:
<!-- / CSS Stylesheet --> Code:
<link rel="stylesheet" href="clientscript/vbulletin_css/lightbox.css" type="text/css" media="screen" /> <!-- / CSS Stylesheet --> 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> 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' }); }); 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" /> Next open the postbit_attachmentthumbnail After <a add Code:
rel="lightbox" Code:
class="effects" in the postbit_legacy or postbit, place this code at the very top Code:
<script type="text/javascript" src="clientscript/lightbox_plus.js"></script> Enjoy it. Show Your Support
|
Comments |
#152
|
|||
|
|||
![]()
this thing is beautiful....great work...
Peace |
#153
|
||||
|
||||
![]()
Cool, I was wondering when this would get ported to vB.
![]() [high]* DirectPixel installs.[/high] You might want to give some credit to the guy who actually wrote the lightbox script. ![]() |
#154
|
|||
|
|||
![]() Quote:
updated ![]() forgot to put it back in when i updated it with another version ![]() |
#155
|
||||
|
||||
![]()
Awesome works great - http://digitalet.net/forum/showthrea...newpost&t=2681
|
#156
|
|||
|
|||
![]()
I changed one part on this script. I change the rel="lightbox[attachment] to rel="lightbox[attachment$post[postid]]" that way if you have a bunch of attachments in a post it wont cycle through the entire topic of attachments, only the ones in THAT post.
|
#157
|
|||
|
|||
![]()
Cool Good tip.
thanks |
#158
|
|||
|
|||
![]()
NTFU, is there anyway we can use imagemagick to autoresize the image?? So if someone uploads a huge image, imagemagick will shrink it and then lighbotx kicks into action???
Peace |
#159
|
|||
|
|||
![]() Quote:
|
#160
|
|||
|
|||
![]() Quote:
this wont work with anything posted with the [img ] tags anyway. |
#161
|
||||
|
||||
![]()
Am I doing something wrong or is saving the images with Firefox impossible? Whenever I do a right click on the image the only options I see are "Save Page as" or "Save Link as", but not "Save Image". If I do it in IE I have to hit the area where there are no "previous" and "next" links.
Other than that, I can't put it in words how wonderful this looks. ![]() |
![]() |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
![]() |
|
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|