Lightbox in phpBB3

Discussion forum for MOD Writers regarding MOD Development.

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]
SteelG
Registered User
 
Posts: 1
Joined: Thu Jun 14, 2007 12:33 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
Geisthund
Registered User
 
Posts: 352
Joined: Fri Jul 01, 2005 1:23 pm

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
cichlides.be
Registered User
 
Posts: 50
Joined: Fri Dec 28, 2007 2:49 am

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 support .
User avatar
bonelifer
Moderator Team Member
Moderator Team Member
 
Posts: 2647
Joined: Wed Oct 27, 2004 11:35 pm
Name: William

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
sadwargamer
Registered User
 
Posts: 41
Joined: Sun Aug 13, 2006 7:03 pm

Re: Lightbox in phpBB3

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

for me too :(

any ideas?
Kalapuikkoja
Registered User
 
Posts: 25
Joined: Wed Jul 11, 2007 3:22 pm
Location: Germany

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.
User avatar
cichlides.be
Registered User
 
Posts: 50
Joined: Fri Dec 28, 2007 2:49 am

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.
Anorgan
Registered User
 
Posts: 16
Joined: Thu Mar 04, 2004 7:35 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?
User avatar
goldenfaith
Registered User
 
Posts: 11
Joined: Thu Sep 27, 2007 8:39 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?
Anorgan
Registered User
 
Posts: 16
Joined: Thu Mar 04, 2004 7:35 pm

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?
Schtorsch
Registered User
 
Posts: 3
Joined: Tue Aug 12, 2008 8:49 am

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
Andrez757
Registered User
 
Posts: 2
Joined: Sun Mar 29, 2009 12:35 pm

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
thelane
Registered User
 
Posts: 5
Joined: Tue Jun 22, 2010 5:57 am

Next

Return to [3.0.x] MOD Writers Discussion

Who is online

Users browsing this forum: Bing [Bot] and 13 guests

cron