need this article

onel0ve · Mar 28, 2011

How to use the vBulletin 4 Lightbox Anywhere
http://www.vbulletin.org/forum/showthread.php?t=239392

anantgupta · Mar 28, 2011

Here you go

Add a rep if you wish to

http://pastebin.com/vaLRkR1V

onel0ve · Mar 28, 2011

this thanks mate
pastebin read little tough

Mod Download link : http://rapidshare.com/files/454738486/IWT_-_vB_Lightbox_Demo__v1.0.0_.zip

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:

PHP:
```
// 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.)

PHP:

// #################### 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.

After completing steps 1 & 2 we need to process the values passed in though posts/requests. This can be done using:

PHP:

$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
));

Now you will need to retrieve the information for the images being loaded from the database.

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:

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:

PHP:

<?php
// ######################## SET PHP ENVIRONMENT ###########################
error_reporting(E_ALL & ~E_NOTICE);

// 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';
}

// #################### 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'), 'demo' => array('iwt_lightbox_demo'));

/*
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');

$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
));

// ### Code to retrive data from database #################################

// handle lightbox requests
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
{
    //Send the image type header (png in this case since for the demo we are using only pngs)
    header('Content-Type: image/png');

    //This works for the demo purposes but readfile could be replaced with a more effective method for handling larger images  (such as a buffering system like attachments uses) 
    readfile("./{$imgfiles[$imgid][filename]}");
}

?>

The Template Edits:

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

HTML:

<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.

A div around all the links you want to be affected. (Can be multiple divs if needed).
Each div will need a unique id value.
Each image you want linked should be wrapped with the following:
HTML:
```
<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)
Lastly after all the divs, preferably right before the footer is called, you will need to put:
HTML:
```
<script type="text/javascript">           </script>
```
Where DIV_ID is equal to the id of the div made in step 2.

Example Template:

PHP:

{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>

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.

need this article

onel0ve

Active Member

anantgupta

Active Member

onel0ve

Active Member