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 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.)
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');
//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 Code:
<?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');
//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:
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.
I have a basic online calculator with some JS that I would like to open in a lightbox window from the postbit. Where in the above code do I replace the image code for my calc code?
03-29-2010, 10:00 PM
04-16-2011, 07:12 AM
