PDA

View Full Version : How to use the vBulletin 4 Lightbox Anywhere


Ideal Web Tech
30 Mar 2010, 07:59
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:

// 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.)
// #################### 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:$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.
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
// ######################## 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:

<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:<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:<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:
{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 (http://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 (http://www.idealwebtech.com/demos/vb_lightbox_demo/lightbox.php)

This tutorial brought to you by Ideal Web Technologies (http://www.idealwebtech.com).

MARCO1
30 Mar 2010, 16:08
Excellent tutorial :)

derfelix
07 Apr 2010, 10:28
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.

Ideal Web Tech
07 Apr 2010, 19:20
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.

derfelix
07 Apr 2010, 19:50
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

xman_79
08 Apr 2010, 09:25
Excellent

Thank you

valdet
06 Mar 2011, 18:34
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.

fluidswork
07 Mar 2011, 17:06
Great idea............

ErnestO999
07 Mar 2011, 20:12
Thanks For The Tutorial I Mark this thread excellent

KProjects
06 Apr 2011, 20:45
nice - will be giving this a try later tonight

vip_inc200
16 Apr 2011, 09:12
Thats nice, I should try it.

Many thanks

Scalemotorcars
13 Sep 2011, 09:06
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?

Thanks for any help.

wstudio
23 Sep 2011, 02:01
'm so new in this that I do not understand the instructions.

I create the php file and then replace the content for what its on step 1

Then what I should do on step 2

Scalemotorcars
11 Oct 2011, 15:55
Sorry to bump.

Can someone help me with the link so rather then pulling an image I can pull a simply html page into the lightbox?

Thanks.

as7apcool
13 Oct 2011, 12:35
thank u