[REQ]How to create your own vBulletin-powered page! (uses vB templates)

All are posted already on vBTEAM...actually not sure about lightbox one...here you go:

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: 
<!-- 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: 
<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: 
<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
 
You must log in or register to reply here.
Back
Top