BB Code Enhancements - Xtreme Resize (lightbox2 bbcode)

This will enable you to use LightBox2 as a BBCode in your posts.

Please note this is only possible due to the fantastic work of HuddleTogether,
so boogie on over to their site and
Download lightbox2


upload files from lightbox2 as follows:
css/*.* - root/forum/css/*.*
js/*.* - root/forum/clientscript/*.*
images/*.* - root/forum/images/*.*


Upload the attached image to here:
root/forum/images/ximgrs.png


Create new Custom BBCode

Title:

Xtreme Resize

BB Code Tag Name:

ximgrs

Replacement:

<p><script type="text/javascript" src="clientscript/prototype.js"></script>
<script type="text/javascript" src="clientscript/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="clientscript/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<font color="#000000"><strong>Click Thumbnail to view Full Screenshot Demo</strong></font><br /><br />
<a href="{param}" rel="lightbox" title="{param}"><img src="{param}" width="300" /></a></p>

Example:

[ximgrs]url to image[/ximgrs]

Description:

Lightbox2 bbcode for images

Button Image (Optional) :

images/ximgrs.png

View Demo

[xman_79]

Thanks,

But I think it would be better if you call the files .Js once in showthread and then do the rest of the code as BBCode

so

in showthread template add

<script type="text/javascript" src="clientscript/prototype.js"></script>
<script type="text/javascript" src="clientscript/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="clientscript/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

And the Replacement:

<p>
<font color="#000000">
<strong>Click Thumbnail to view Full Screenshot Demo</strong>
</font>
<br />
<br />
<a href="{param}" rel="lightbox" title="{param}"><img src="{param}" width="300" /></a></p>

[cloferba]

Originally Posted by EidolonAH

That would require a fairly extensive mod' to be written, this is just a BBCode, nothing more.

take the job plz

[pedrossi]

Thanks for this, works great!

[twista46]

Work not with 2 Images

[warlord0]

I refreshed this with Lightbox 2.51 and now with JQuery 1.7.2 with VB4.1.12pl1

Create the same BBCode but change the "Replacement" to the following (Notice I also didn't want a text part adding - uncomment it if you do.

<p><script type="text/javascript" src="/forum/clientscript/jquery/jquery-1.7.2.min.js?load=effects,builder"></script>
<script type="text/javascript" src="/forum/clientscript/lightbox.js"></script>
<link rel="stylesheet" href="/forum/css/lightbox.css" type="text/css" media="screen" />
<!--<strong>Click Thumbnail to view Full Image</strong><br />-->
<a href="{param}" rel="lightbox[thispost]" title=""><img title="Click to Zoom In" alt="Click to Zoom In" src="{param}" width="300" /></a></p>

This also shows a tooltip of "Click to Zoom" when a user mouses over and create all images on that page as a group so you can use the left and right arrow navigations from the lightbox.

Basically repeat the steps in the original post, but you'll not find prototype.js in there any more as they've changed to JQuery.

So you'll need to go download JQuery 1.7.2 and put that into the clientscript/jquery folder

NOTICE: This current code also assumes /forum/ as the path to your forum. Just change that if required.

Hope you find it useful.