vBulletin LTS

How-to Use vB Lightbox for Pictures on Custom Pages

by Abe1 25 Dec 2007

This 'how-to' will explain how to utilize the vB 3.7 feature of a lightbox for images on your custom vB pages.

First, at the bottom of the page you are working on, right above where you would put the $footer variable, add the following:

HTML Code:

<!-- lightbox scripts -->
    <script type="text/javascript" src="clientscript/vbulletin_lightbox.js?v=$vboptions[simpleversion]"></script>
    <script type="text/javascript">
    <!--
    vBulletin.register_control("vB_Lightbox_Container", "zzzzz", $vboptions[lightboxenabled]);
    //-->
    </script>
<!-- / lightbox scripts -->

After, you must wrap the entire area where the image links will be located with one 'DIV' tag.
Here is an example:

HTML Code:

<div id="zzzzz">
<!-- Your code here. -->
</div>

Last but not least, whether you want a text or image as the link that triggers the lightbox, you have to wrap it around with 'a' tags that include the following:
href - place the URL of the image that you want to show up in the lightbox
rel - that is set to "'Lightbox'
Here is an example:

HTML Code:

<a href="http://www.vbulletin.com/forum/images/misc/vbulletin3_logo_white.gif" rel="Lightbox">
    <!-- Your text or image here. -->
</a>

Your all set now.

Note: You may change the 'zzzzz' to anything, just make sure BOTH places say the same and that there are no conflicts with other IDs.

Similar Mods

GTCustom Pages - Create Custom Pages With Ease	vBulletin 3.5 Add-ons
BB Code Enhancements Custom User Pages - Users make pages using html/bbcode on any template safely	vBulletin 3.8 Add-ons

vblts.ru supports vBulletin®, 2022-2024