vBulletin LTS

• 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)

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]}");
} 


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.

{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml" <vb:if condition="!is_browser('ie') OR is_browser('ie',8)"> dir="{vb:stylevar textdirection}"</vb:if> lang="{vb:stylevar languagecode}" id="vbulletin_html">
<head>
    {vb:raw headinclude}
    <title>{vb:raw pagetitle}</title>
    <vb:if condition="$includecss">
        <vb:each from="includecss" value="file">
        <link rel="stylesheet" type="text/css" href="{vb:raw vbcsspath}{vb:raw file}.css" />
        </vb:each>
    </vb:if>
<link rel="stylesheet" type="text/css" href="{vb:raw vbcsspath}lightbox.css" />
        {vb:raw headinclude_bottom}
<script type="text/javascript" src="clientscript/vbulletin_lightbox.js?v=402"></script>
</head>
<body>
{vb:raw header}
{vb:raw navbar}
<div id="lightboximages" class="blockbody">
    <h2 class="blockhead">Sample Images</h2>
    <div class="blockrow">
        <div style="padding-bottom: 10px; text-align: center;">
            This image is not grouped:<br /><br />
            <a href="iwtlightboxdemo/testlightbox.php?id=1" rel="Lightbox_0" id="image1">
                <img class="thumbnail" src="iwtlightboxdemo/IWT_Products_System_Thumb.png" alt="test"/>
            </a>
        </div>
        <div style="text-align: center;">
            These two are grouped:<br /><br />
            <a href="iwtlightboxdemo/testlightbox.php?id=2" rel="Lightbox_1" id="image2">
                <img class="thumbnail" src="iwtlightboxdemo/IWT_Registration_Imposter_Blocker_Thumb.png" alt="test"/>
            </a>&nbsp;    
            <a href="iwtlightboxdemo/testlightbox.php?id=3" rel="Lightbox_1" id="image3">
                <img class="thumbnail" src="iwtlightboxdemo/IWT_Time_Spent_Online_Thumb.png" alt="test"/>
            </a>
        </div>
    </div>
</div>
<script type="text/javascript">
<!--
vBulletin.register_control("vB_Lightbox_Container", "lightboximages", 1);
//-->
</script>
{vb:raw footer}
</body>
</html>

Attached Files

IWT - vB Lightbox Demo (v1.0.0).zip (153.5 KB, 196 views)