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

Postby SteelG » Thu Jun 14, 2007 12:47 pm

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

Postby Geisthund » Fri Jun 15, 2007 10:36 pm

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

Postby Geisthund » Fri Jun 15, 2007 10:41 pm

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

Postby cichlides.be » Fri Dec 28, 2007 2:59 am

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/lightbox2/#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
Moderator Team Member
Moderator Team Member
Posts: 2910
Joined: Wed Oct 27, 2004 11:35 pm
Name: William
Contact:

Re: Lightbox in phpBB3

Postby bonelifer » Fri Dec 28, 2007 3:13 am

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.
Knowledge Base | phpBB Board Rules | Search All Mods
Image
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

Postby sadwargamer » Mon Dec 31, 2007 2:35 am

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
Location: Germany
Contact:

Re: Lightbox in phpBB3

Postby Kalapuikkoja » Tue Jan 15, 2008 5:45 pm

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

Postby cichlides.be » Mon Mar 24, 2008 8:21 pm

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

Postby Anorgan » Fri Apr 11, 2008 10:42 pm

(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

Postby goldenfaith » Mon Jun 30, 2008 5:31 am

@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

Postby Anorgan » Mon Jun 30, 2008 6:22 pm

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: 45
Joined: Tue Aug 12, 2008 8:49 am

Re: Lightbox in phpBB3

Postby Schtorsch » Thu Sep 11, 2008 1:23 pm

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

Postby Andrez757 » Sun Mar 29, 2009 8:23 pm

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

http://andrez.spacequadrat.de/andrez/forum/viewtopic.php?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

Postby thelane » Tue Jun 22, 2010 7:29 am

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

Postby thelane » Tue Jun 22, 2010 8:14 am

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


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

Who is online

Users browsing this forum: No registered users and 12 guests