How to use the vBulletin 4 Lightbox Anywhere
 

This tutorial will explain how to use the vB 4 lightbox anywhere in the site for images other than attachments.

In order to accomplish this you will have to make the following:

• A file that returns xml & processes the images
• Template edits where you want to use the lightbox
• A database table containing the filename, upload/creation time of the image & a unique id. (could be done without a database table, but a database table would be best)

The File:

Create a file, name it whatever you like, in this tutorial we will use "testlightbox.php" which should be placed in the root directory with the following:

1. PHP Code:

   ---

   // if $_POST['ajax'] is set, we need to set a $_REQUEST['do'] so we can precache the lightbox template
if (!empty($_POST['ajax']) AND isset($_POST['uniqueid']))
{
    $_REQUEST['do'] = 'lightbox';
} 


   ---

   What that does is checks if we are loading the lightbox or just the image so that the lightbox template can be precached & later we can create the xml needed for the lightbox. (Will fail and just display the image if javascript isn't enabled.)
2. PHP Code:

   ---

   // #################### PRE-CACHE TEMPLATES AND DATA ######################
// get special phrase groups
$phrasegroups = array();

// get special data templates from the datastore
$specialtemplates = array();

// pre-cache templates used by all actions
$globaltemplates = array();

// pre-cache templates used by specific actions
$actiontemplates = array('lightbox' => array('lightbox'));

/*
The following headers are usually handled internally. The cache-control is to stop caches keeping private images and the Vary header is to deal with the fact the filename encoding changes.
*/
header('Cache-Control: private');
header('Vary: User-Agent');

// ########################## REQUIRE BACK-END ############################
require_once('./global.php'); 


   ---

   This is some generic back-end settings.
3. After completing steps 1 & 2 we need to process the values passed in though posts/requests. This can be done using:
   PHP Code:

   ---

   $vbulletin->input->clean_array_gpc('r', array(
    'id'       => TYPE_UINT
));

$imgid = $vbulletin->GPC['id'];

$vbulletin->input->clean_array_gpc('p', array(
    'ajax'     => TYPE_BOOL,
    'uniqueid' => TYPE_UINT
)); 


   ---

4. Now you will need to retrieve the information for the images being loaded from the database.
5. Now at this point if we are loading the lightbox we will break off into it, if not we will process and display the image.
   PHP Code:

   ---

   if ($_REQUEST['do'] == 'lightbox')
{
    //Setup values that will be passed by the ajax caller
    $vbulletin->input->clean_array_gpc('r', array(
        'width'   => TYPE_UINT,
        'height'  => TYPE_UINT,
        'first'   => TYPE_BOOL,
        'last'    => TYPE_BOOL,
        'current' => TYPE_UINT,
        'total'   => TYPE_UINT
    ));

    $width = $vbulletin->GPC['width'];
    $height = $vbulletin->GPC['height'];
    $first = $vbulletin->GPC['first'];
    $last = $vbulletin->GPC['last'];
    $current = $vbulletin->GPC['current'];
    $total = $vbulletin->GPC['total'];

    //Setup the XML generation engine
    require_once(DIR . '/includes/class_xml.php');
    $xml = new vB_AJAX_XML_Builder($vbulletin, 'text/xml');

        // Realistically this information would be queried from the  database
        $imageinfo = $imgfiles["$imgid"];

        $uniqueid = $vbulletin->GPC['uniqueid'];

        //The url to the image
        $imagelink = 'testlightbox.php?id=' . $imgid .  $vbulletin->session->vars['sessionurl'];
        
        //Date strings used by lightbox
        $imageinfo['date_string'] =  vbdate($vbulletin->options['dateformat'], $imageinfo['dateline']);
        $imageinfo['time_string'] =  vbdate($vbulletin->options['timeformat'], $imageinfo['dateline']);

        $templater = vB_Template::create('lightbox');
            $templater->register('attachmentinfo', $imageinfo);  //  This one is named attachmentinfo because of the current variable used in  the defualt lightbox template
            $templater->register('current', $current);
            $templater->register('first', $first);
            $templater->register('height', $height);
            $templater->register('imagelink', $imagelink);
            $templater->register('last', $last);
            $templater->register('total', $total);
            $templater->register('uniqueid', $uniqueid);
            $templater->register('width', $width);
        $html = $templater->render(true);

        //Build the xml tags
        $xml->add_group('img');
        $xml->add_tag('html', process_replacement_vars($html));
        $xml->add_tag('link', $imagelink);
        $xml->add_tag('name', $imageinfo['filename']);
        $xml->add_tag('date', $imageinfo['date_string']);
        $xml->add_tag('time', $imageinfo['time_string']);
        $xml->close_group();

    //Spitout the xml and get out of here
    $xml->print_xml();
}
else
{
    header('Content-Type: image/png');
     readfile("./{$imgfiles[$imgid][filename]}");
} 


   ---

Now this file should look something like this:The Template Edits:

For the lightbox to work for your images you will need to place the following in the appropriate templates:

1. HTML Code:

   ---

   <link rel="stylesheet" type="text/css" href="{vb:raw vbcsspath}lightbox.css" />
<script type="text/javascript" src="clientscript/vbulletin_lightbox.js?v=402"></script>

   ---

   In the head tag of the template.
2. A div around all the links you want to be affected. (Can be multiple divs if needed).
3. Each div will need a unique id value.
4. Each image you want linked should be wrapped with the following:
   HTML Code:

   ---

   <a href="IMAGEURL" rel="Lightbox_GROUPNUMBER" id="IMAGEID">IMAGE TAG</a>

   ---

   Where:
   • IMAGEURL = the url to the file we just made & a reference to the image to load (ex. testlightbox.php?id=2)
   • GROUPNUMBER = A number (All images with identical groupnumbers will be grouped together when shown in the lightbox.)
   • IMAGEID = A unique id for the image (Can be just about anything)
5. Lastly after all the divs, preferably right before the footer is called, you will need to put:
   HTML Code:

   ---

   <script type="text/javascript">      <!--    vBulletin.register_control("vB_Lightbox_Container", "DIV_ID", 1);    //-->    </script>

   ---

   Where DIV_ID is equal to the id of the div made in step 2.

Example Template:
Below you will find a zip that contains this tutorial & a sample of how this works. To use the sample simply upload the contents of the uploads folder to your forum root directory, install the product, and open www.yourdomain.com/forumroot/iwtlightboxdemo/testlightbox.php in your browser.

An example of it can also be found at www.idealwebtech.com/demos/vb_lightbox_demo/lightbox.php

This tutorial brought to you by Ideal Web Technologies.

Excellent tutorial :)

Excellent...
What I have been trying to do without success is using lightbox to access images outside the vbulletin folder

example :
root -- specialimages/ image1.jpg
root -- forums/pagefile.php

when calling pagefile, i wanted to display thumbnails from the specialimage folder (thats not a problem)
but displaying the images with the lightbox doesnt work for me..

F.

Were you just setting the path of the image as "specialimages/ image1.jpg"?

If so you will need to include a "../" in front of it to take you out of the forums folder and back to the root directory.

ahhh.. thx..
no i actually have to calculate the url from db..
i was doing the error by wanting to do it inside lightbox.. but if done on the page it works..

Thank you

Excellent

Thank you

Sorry for bumping this thread.

Does anyone know how can we implement a simple lightbox, which will show registration fields.

This is very popular for list building in Wordpress blogs, but I haven't seen anything like that on vBulletin boards.

Great idea............

Thanks For The Tutorial I Mark this thread excellent

nice - will be giving this a try later tonight