Results 1 to 3 of 3
-
28th Mar 2011, 06:47 AM #1OPMemberWebsite's:
host4offshore.comneed this article
How to use the vBulletin 4 Lightbox Anywhere
http://www.vbulletin.org/forum/showthread.php?t=239392onel0ve Reviewed by onel0ve on . need this article How to use the vBulletin 4 Lightbox Anywhere http://www.vbulletin.org/forum/showthread.php?t=239392 Rating: 5|| Host4Offshore :: Reliable, Quality, Fast Offshore Hosting Solution (USA/Netherlands/Sweden/Russia/Romania)
|| Shared , Reseller Hosting Sales Thread
|| Rapidleech Hosting Sales Thread
|| Current Promotion
-
28th Mar 2011, 06:50 AM #2Member
Here you go
Add a rep if you wish to
http://pastebin.com/vaLRkR1V
-
28th Mar 2011, 07:15 AM #3OPMemberWebsite's:
host4offshore.comthis thanks mate
pastebin read little tough
Mod Download link : http://rapidshare.com/files/45473848...o__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 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';
}
- 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');
- 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
));
- 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 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: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');
// ########################## 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]}");
}
?>
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>[/HTML] 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>[/HTML] 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"> <!-- vBulletin.register_control("vB_Lightbox_Container" , "DIV_ID", 1); //--> </script>[/HTML] Where DIV_ID is equal to the id of the div made in step 2.
Example Template:
PHP Code:{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>
<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>
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.|| Host4Offshore :: Reliable, Quality, Fast Offshore Hosting Solution (USA/Netherlands/Sweden/Russia/Romania)
|| Shared , Reseller Hosting Sales Thread
|| Rapidleech Hosting Sales Thread
|| Current Promotion
Sponsored Links
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Similar Threads
-
Article Marketing Tips And Submitting To The Article Directories
By GarryField in forum Webmasters, Money MakingReplies: 0Last Post: 4th Mar 2014, 11:58 AM -
[Selling] Article Spinning Service Only 0.05/Article (Review Copies Available)
By Elliot C in forum ServicesReplies: 11Last Post: 26th Jul 2012, 11:34 PM -
Hiring article writers ($5USD/article)
By mintcold in forum ServicesReplies: 16Last Post: 22nd Jun 2012, 03:09 PM -
[Selling] Article Submission-Spin And Submit Article To Over 1200 Article Directories
By alexjer12 in forum ServicesReplies: 2Last Post: 23rd Apr 2012, 03:54 PM -
Anyone Knows A Good Article Spinner/Rewriter/Article Generator {Cracked or Free}
By elpirata in forum Webmaster ResourcesReplies: 0Last Post: 13th Jan 2011, 03:30 PM
themaPoster - post to forums and...
Version 5.10 released. Open older version (or...