Lightbox in phpBB3

Discussion forum for MOD Writers regarding MOD Development.
SteelG
Registered User
Posts: 1
Joined: Thu Jun 14, 2007 12:33 pm

Lightbox in phpBB3

Post by SteelG »

Edit: I'm sorry if this is posted in the wrong place :oops:

I've been goofing around with this for a little while. I always thought Lightbox was a really good way to display images and I wanted to put it in a forum. Note: This uses the Lightbox 2.0 script

Example: http://steel.nrgservers.net/forums/view ... &sk=t&sd=a

How to? First you need to download Lightbox 2.0

After that you will have a bunch of files and folders. Put the css and js folder into the folder you installed your forum into. IE: http://www.website.com/forums/ http://www.website.com/forums/

Since an image folder already exists already take the graphics from the Lightbox 2.0 and just put them in the image folder in your forum.

BBCode without descriptions:

Code: Select all

[light]{TEXT1}, {TEXT2}[/light] 
BBCode with descriptions:

Code: Select all

[light]{TEXT1}, {TEXT2}, {TEXT3}[/light] 
HTML Replacement without descriptions:

Code: Select all

<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
	
	<script src="/js/prototype.js" type="text/javascript"></script>
	<script src="/js/scriptaculous.js?load=effects" type="text/javascript"></script>
	<script src="/js/lightbox.js" type="text/javascript"></script>

<a href=http://{TEXT1} rel="lightbox" title=""><img src=http://{TEXT2}></a>
HTML Replacement with descriptions

Code: Select all

<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
	
	<script src="/js/prototype.js" type="text/javascript"></script>
	<script src="/js/scriptaculous.js?load=effects" type="text/javascript"></script>
	<script src="/js/lightbox.js" type="text/javascript"></script>

<a href=http://{TEXT1} rel="lightbox" title={TEXT3}><img src=http://{TEXT2}></a>
Usage:

Code: Select all

[light]www.website.com/fullimage.jpg, /www.website.com/thumbnail.jpg, Description if used[/light]
Geisthund
Registered User
Posts: 352
Joined: Fri Jul 01, 2005 1:23 pm

Re: Lightbox in phpBB3

Post by Geisthund »

Hi

Can you post the code to add the BBCode to bbcode.php
Cheers
Gareth
Geisthund
Registered User
Posts: 352
Joined: Fri Jul 01, 2005 1:23 pm

Re: Lightbox in phpBB3

Post by Geisthund »

Sorry didn't realise you could add BBcode via ACP
User avatar
cichlides.be
Registered User
Posts: 50
Joined: Fri Dec 28, 2007 2:49 am
Contact:

Re: Lightbox in phpBB3

Post by cichlides.be »

My English is bad but a propose un installation + proper
And OK with the last version of the light box

First download the last Lightbox v2.03.3
http://www.huddletogether.com/projects/ ... /#download

Unzip the file
Create a dir in your phpbb dir : named "lightbox"
copy in this directorie all file unzziped

After go in your adminiistration of phpbb

BBCode without descriptions:

Code: Select all

[light]{TEXT1}, {TEXT2}[/light] 
BBCode with descriptions:

Code: Select all

[light]{TEXT1}, {TEXT2}, {TEXT3}[/light] 
HTML Replacement without descriptions:

Code: Select all

<link rel="stylesheet" href="http://your_domaine/your_phpBB_dir/lightbox/css/lightbox.css" type="text/css" media="screen" />
   
   <script src="http://your_domaine/your_phpBB_dir/lightbox/js/prototype.js" type="text/javascript"></script>
   <script src="http://your_domaine/your_phpBB_dir/lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
   <script src="http://your_domaine/your_phpBB_dir/lightbox/js/lightbox.js" type="text/javascript"></script>

<a href="http://{TEXT1}" rel="lightbox[roadtrip]"><img src="http://{TEXT1}"></a>
HTML Replacement with descriptions

Code: Select all

<link rel="stylesheet" href="http://your_domaine/your_phpBB_dir/lightbox/css/lightbox.css" type="text/css" media="screen" />
   
   <script src="http://your_domaine/your_phpBB_dir/lightbox/js/prototype.js" type="text/javascript"></script>
   <script src="http://your_domaine/your_phpBB_dir/lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
   <script src="http://your_domaine/your_phpBB_dir/lightbox/js/lightbox.js" type="text/javascript"></script>

<a href="http://{TEXT1}" rel="lightbox[roadtrip]" title={TEXT3}><img src="http://{TEXT1}"></a>
Usage:

Code: Select all

[light]www.website.com/fullimage.jpg, /www.website.com/thumbnail.jpg, Description if used[/light]
[/quote]
Sorry for my bad english, i'm Belgian /URL = http://www.cichlides.be / Installed MOD.
User avatar
bonelifer
Community Team Member
Community Team Member
Posts: 3542
Joined: Wed Oct 27, 2004 11:35 pm
Name: William
Contact:

Re: Lightbox in phpBB3

Post by bonelifer »

One thing you need to do is move the JAVASCRIPT includes from the HTML Replacement code to after the <head> tag in overall_header.html for each style. The reason is that everytime the JS is called it clears all margins, which means if you have more than one image in a page you'll end up screwing up your layout.

OPEN: styles/STYLENAME/overall_header.html

FIND:

Code: Select all

<head>
AFTER, ADD:

Code: Select all

<link rel="stylesheet" href="http://your_domaine/your_phpBB_dir/lightbox/css/lightbox.css" type="text/css" media="screen" />
   
   <script src="http://your_domaine/your_phpBB_dir/lightbox/js/prototype.js" type="text/javascript"></script>
   <script src="http://your_domaine/your_phpBB_dir/lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
   <script src="http://your_domaine/your_phpBB_dir/lightbox/js/lightbox.js" type="text/javascript"></script>
This will need to be done for each installed style.
William Jacoby - Community Team
Knowledge Base | phpBB Board Rules | Search Customisation Database
Please don't contact me via PM or email for phpBB support .
sadwargamer
Registered User
Posts: 41
Joined: Sun Aug 13, 2006 7:03 pm

Re: Lightbox in phpBB3

Post by sadwargamer »

Hi,

Ok done all this an still no joy in getting LB to work - any suggestions on why no image even displayed with:

Code: Select all

[light]http://www.website.com/fullimage.jpg[/light]
regards
Andy
Kalapuikkoja
Registered User
Posts: 25
Joined: Wed Jul 11, 2007 3:22 pm

Re: Lightbox in phpBB3

Post by Kalapuikkoja »

for me too :(

any ideas?
User avatar
cichlides.be
Registered User
Posts: 50
Joined: Fri Dec 28, 2007 2:49 am
Contact:

Re: Lightbox in phpBB3

Post by cichlides.be »

I think

because

Code: Select all

[light]http://www.website.com/fullimage.jpg[/light]
remplace by

Code: Select all

[light]www.website.com/fullimage.jpg[/light]
If you use my handled code
Sorry for my bad english, i'm Belgian /URL = http://www.cichlides.be / Installed MOD.
Anorgan
Registered User
Posts: 16
Joined: Thu Mar 04, 2004 7:35 pm

Re: Lightbox in phpBB3

Post by Anorgan »

(as a reference, i've put lightbox in [root]\styles\saphic\template\lightbox, as i'm using saphic theme, you can put it anywhere else. I have put all the images in [root]\styles\saphic\theme\images.

Ok, this is for the automatic link adding:

ACP -> Theme -> Templates -> attachment.html


FIND AFTER <!-- IF _file.S_THUMBNAIL -->

Code: Select all

<a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a>
REPLACE WITH

Code: Select all

<a href="{_file.U_DOWNLOAD_LINK}" rel="lightbox[roadtrip]" title="{_file.COMMENT}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" ></a>
ACP -> Theme -> Templates -> overall_header.html

FIND

Code: Select all

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>
AFTER, ADD

Code: Select all

<script src="{T_TEMPLATE_PATH}/lightbox/js/prototype.js" type="text/javascript"></script>
<script src="{T_TEMPLATE_PATH}/lightbox/js/scriptaculous.js?load=effects" type="text/javascript">
</script>
<script src="{T_TEMPLATE_PATH}/lightbox/js/lightbox.js" type="text/javascript"></script>
or just place this block anywhere inside the head element

ACP -> Theme -> Themes-> (css file)
Add the whole lightbox\css\lightbox.css at the end of the file;

REPLACE

Code: Select all

../images/

WITH

Code: Select all

{T_THEME_PATH}/images/

MANUALY edit the lightbox.js

REPLACE

Code: Select all

/images/
WITH

Code: Select all

./styles/saphic/theme/images/
don't put saphic, put your theme pathname here ;)

This is it, you should now have a working lightbox with the attached files.
User avatar
goldenfaith
Registered User
Posts: 11
Joined: Thu Sep 27, 2007 8:39 pm

Re: Lightbox in phpBB3

Post by goldenfaith »

@Anorgan

Code: Select all

<a href="{_file.U_DOWNLOAD_LINK}" rel="lightbox" title="{_file.DOWNLOAD_NAME}">
it seems can't work in ie6 browser

the <a/> link in function_content.php
$download_link = append_sid("{$phpbb_root_path}download/file.$phpEx", 'id=' . $attachment['attach_id']);
may be lightbox can't parse this link in ie6.

how can i do?
Anorgan
Registered User
Posts: 16
Joined: Thu Mar 04, 2004 7:35 pm

Re: Lightbox in phpBB3

Post by Anorgan »

I've tested it in IE6, must be working. And I've tried it with images only. Have you done everything right?
Schtorsch
Registered User
Posts: 52
Joined: Tue Aug 12, 2008 8:49 am

Re: Lightbox in phpBB3

Post by Schtorsch »

I´ve tested it - but it don´t work... :cry:

I have a phpbb3 forum and a 4images gallery - what is here to do? How should the links be?
In my gallery works lightbox without probs. But here at my forum don´t...

Is it needed, that the lightbox-folder is in forum? Or is it enough, that he is in gallery?

Had anybody an idea, how to make 4images-pictures work in lightbox and phpbb3?
Andrez757
Registered User
Posts: 2
Joined: Sun Mar 29, 2009 12:35 pm

Re: Lightbox in phpBB3

Post by Andrez757 »

Hey,
i have follow the install instruction but it still doesn't work. I can not open any picture

http://andrez.spacequadrat.de/andrez/fo ... hp?f=2&t=2

Can somebody please create me all the files so I just have to upload those?

Andrez
thelane
Registered User
Posts: 5
Joined: Tue Jun 22, 2010 5:57 am

Re: Lightbox in phpBB3

Post by thelane »

I've followed the steps outlined here to incorporate lightbox when the user clicks an inline image and the images show up as normal thumbs, but clicking on one does nothing.
Last edited by thelane on Tue Jun 22, 2010 8:15 am, edited 1 time in total.
thelane
Registered User
Posts: 5
Joined: Tue Jun 22, 2010 5:57 am

Re: Lightbox in phpBB3

Post by thelane »

I am seeing this error in the Safari error console:

Code: Select all

ReferenceError: Can't find variable: Builder lightbox.js:132
Line 132 in the file
Locked

Return to “[3.0.x] MOD Writers Discussion”