Lightbox/thickbox for attachment on CMPS module:
In order to have this add-on, you first need:
1/
vBadvance CMPS
2/
3.6.x - Attachments with alternating left/right images by
Glorify.
3/
Adding Lightbox to Attachment thumbs by
imranbaig.
DEMO
Ok, here is how it works
1/ Go to your admincp, select your style, All style options, headinclude and put the below code at the end
Code:
<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" />
2/ In the same style, go to Edit Template, vBadvanced CMPS Tempates, adv_portal_newsbits_attach_thumb, add on the red highlight item into your current code
3/ Download, unzip and upload the files from this link:
Adding Lightbox to Attachment thumbs - vBulletin.org Forum
Please keep the folders intact.
And that's it and thanks for reading this.
ightbox/ThickBox works with Inline Editing:
Step 1: Download the file attached and upload its contents to your forum root or wherever you want (just remember the path)
Step 2: Modify the template
headinclude and add this to the bottom,
Code:
<if condition="THIS_SCRIPT=='showthread' OR THIS_SCRIPT=='showpost'">
<link rel="stylesheet" href="css/thickbox.css" type="text/css" />
</if>
Step 3: Modify the template
postbit/postbit_legacy and add this to the very top,
Code:
<if condition="$show['thumbnailattachment']">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
</if>
Step 4: Modify the template
postbit_attachmentthumbnail and add this to the
a href tag,
Code:
rel="gallery-thumbs" class="thickbox"
this may work on previous versions of vb but dont quote me on that as its untested on prev versions
Auto Resize large images in an IMG tag:
With this small hack, all large images in an IMG Tag will be resized after the site has loaded. With a click on the resized imge, it will open in an new window with the original size. Works in Firefox, Opera, IE and i think in all other browser.
Here is a Demo: Link
Work with vB 3.6.0 - 3.6.4
INSTALLATION:
--------------------------------
- Copy the file
resizevbimg.js in the dir
clientscript.
--------------------------------
Open the file
includes/class_bbcode.php
Search the line(~line 1887 ):
Code:
return '<img src="' . $link . '" border="0" alt="" />';
and replace with:
Code:
return '<img src="' . $link . '" border="0" alt="" id="vBCodeIMG" />';
Save and upload.
--------------------------------
Styles & Templates > Search the
SHOWTHREAD Template
Seach:
Replace with:
Code:
<body onload="$onload;vbImageResize()">
Save the template.
--------------------------------
Styles & Templates > Search the
NEWREPLY Template
Search:
Replace with:
Code:
<body onload="$onload;vbImageResize()">
Save the template.
--------------------------------
- Styles & Templates > Style Manager > Common Templates >
headinclude
Search:
Code:
<!-- / CSS Stylesheet -->
After, add:
Code:
<script type="text/javascript" src="clientscript/resizevbimg.js"></script>
Save the template.
--------------------------------
Styles & Templates > Style Manager > Main CSS >
Additional CSS Definitions
After, add:
Code:
.vbimgcodelimit {
cursor: pointer;
border: dotted 1px black;
}
Save.
--------------------------------
Done
vBLightbox on vBA CMPS portal!:
NOTE: This is an addon for
vBLightbox so it can be used on all pages!
Hey, its really easy! Just 1 template edit and your all set! This works on all pages relating to vB btw!
Find the template:
adv_portal
Find:
PHP:
<if condition="$show['inlinemod']"><script type="text/javascript" src="clientscript/vbulletin_inlinemod.js"></script></if>
After add:
PHP:
<!-- vBLightbox by jdsinclair for vBA CMPS by Jay -->
<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>
<link rel="stylesheet" href="clientscript/vbulletin_css/lightbox.css" type="text/css" media="screen" />
<!-- end of vBLightbox -->
And your all done!
To add it to other pages, just put that bit of code in the header
Don't forget to upload the /clientscript folder to the same location as your vBA CMPS page!
So if your vBA CMPS page is in /public_html and your vBulletin is in /public_html/vb you should have the /clientscript folder in /public_html/clientscript and /public_html/vb/clientscript
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 bbCode at this time.
Working Demo(s): (Send me your URL once you get it working)
Fight Rice
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,
[email protected]
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
If you want the image overlay,
also add (or if you changed the effectclass in lightbox_plus.js use what you changed it to)
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.
