How-to Use vB Lightbox for Pictures on Custom Pages

[Abe1]

This 'how-to' will explain how to utilize the vB 3.7 feature of a lightbox for images on your custom vB pages.

First, at the bottom of the page you are working on, right above where you would put the $footer variable, add the following:

<!-- lightbox scripts -->
<script type="text/javascript" src="clientscript/vbulletin_lightbox.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript">
<!--
vBulletin.register_control("vB_Lightbox_Container", "zzzzz", $vboptions[lightboxenabled]);
//-->
</script>
<!-- / lightbox scripts -->
After, you must wrap the entire area where the image links will be located with one 'DIV' tag.
Here is an example:

<div id="zzzzz">
<!-- Your code here. -->
</div>

Last but not least, whether you want a text or image as the link that triggers the lightbox, you have to wrap it around with 'a' tags that include the following:
href - place the URL of the image that you want to show up in the lightbox
rel - that is set to "'Lightbox'
Here is an example:

<a href="http://www.vbulletin.com/forum/images/misc/vbulletin3_logo_white.gif" rel="Lightbox">
<!-- Your text or image here. -->
</a>
Your all set now.

Note: You may change the 'zzzzz' to anything, just make sure BOTH places say the same and that there are no conflicts with other IDs.

[RS_Jelle]

Hmm, this isn't working for me on vB 3.7.2. I compared it with the vB Lightbox for attachments, ... but I don't see any differences or changes.

The included JavaScript is blocking the href="" link from working (so it is doing something), but there's no Lightbox opening.

[Q-v-n-s-Q]

hmm thank you, but it doesnt work

[Abe1]

works for me using 3.7.2

[entertain]

also not working for me...

Firebug shows the following error:

[ragtek]

h?

for me its also not working
this is my code:

<div class="alt1 block_row" id="flickrfotos">
<ul class="list_no_decoration">
<!-- BEGIN TEMPLATE: flickr_fotobit -->

<a href="http://farm4.static.flickr.com/3133/3228243890_3cc6c267dc.jpg" rel="Lightbox">
<img border="0" alt="Naschmarkt" src="http://farm4.static.flickr.com/3133/3228243890_3cc6c267dc_m.jpg" />
</a>

<!-- END TEMPLATE: flickr_fotobit --><!-- BEGIN TEMPLATE: flickr_fotobit -->
<a href="http://farm4.static.flickr.com/3372/3227390009_cc260b6805.jpg" rel="Lightbox">
<img border="0" alt="Naschmarktkunst" src="http://farm4.static.flickr.com/3372/3227390009_cc260b6805_m.jpg" />
</a>

<!-- END TEMPLATE: flickr_fotobit -->

At end i add
<script type="text/javascript" src="clientscript/vbulletin_lightbox.js?v=380"></script>
<script type="text/javascript">
<!--
vBulletin.register_control("vB_Lightbox_Container", "flickrfotos", 1);
//-->
</script>


When i click on the photo, it seems to be working (it's getting dark) but then the browser redirects to http://farm4.static.flickr.com/3133/3228243890_3cc6c267dc.jpg

[ragtek]

nobody have a idee why it's not working?

[ceho]

May there be anything that needs to be changed on VB 3.8.1?

Can anybody help? Thanks a lot.

[Barabaika]

* The 'rel' attribute is rel="Lightbox_11111111" now - Lightbox_ + unique ID for all images in the set.
* <a href should be a script that returns an XML page that has html (with link inside), date, time, etc tags. You can look for an example in attachment.php, in the section devoted to the AJAX processing.

[Excalibur82]

I am currently working on the issue with lightbox within vB. So far just getting a black box so trying to figure out how vB can use a php file to do it instead of an html or xml file.

--------------- Added 1243920951 at 1243920951 ---------------

Apparently there is no current way to implement vB's lightbox with custom pages. It was included only for use with attachments especially in 3.8.x

[Dunhamzzz]

I would really appreciate it if this guide got updated to 3.8

[ragtek]

works for me using 3.7.2
Did it realy ever work for you?
Could you post youre url that i can check what is so different between your code and the other ones
specialy because the atachment.php is hardcoded in the lightbox.js and i can't see any way to get arount this
I would really appreciate it if this guide got updated to 3.8
it seems that it never worked;)

[Nosfer@tu]

Did anyone ever make this work ?

[ragtek]

No, it's still not possible with the vbulletin js object.

You would have to create/install you're own lightbox script