Integrate Lightbox v1.4

[karlbenson]

INTEGRATE LIGHTBOX v1.4
By Karl Benson
Link to Mod | Support Topic | Demo | Donate

Compatibility
For SMF 1.1.x and SMF 2.0 Beta 1

Introduction
Integrates Lightbox2 into SMF.
Lightbox is a simple, unobtrusive script used to overlay images on the current page.

Lightbox2 by Lokesh Dhakar uses the Prototype Framework and Scriptaculous Effects Library.

This modification is Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/

Features
o Integrates Lightbox to work with
- Attachments
- Non-Linked Images
- Text-based Links to images
o Prevents lightbox from affecting images linked to page/urls
o Fixes Imageshack.us & Photobucket links to work with Lightbox2

Installation
Simply install the package to install on the SMF Default Core Theme ONLY.
All other themes will require manual edits for index.template.php and display.template.php

Note, due to differences in themes, you may have to slightly modify the 'default' edits to work on other themes. (eg if you get template parse error, check whether there is an extra unneeded php echo ' at the beginning of the edit or '; at the end.

Donate
Has this modification helped you? Support the developer by Donating

Support
Please use the modification thread for support with this modification.
(Please don't ask me to do the edits for you)

Changelog
1.0 - 24th November 2007
o Initial Release
1.1 - 8th December 2007
o Fixed uninstall file error (Thanks AllMassive)
1.2 - 13th December 2007
o Disabled Lightbox2 for signature images and Smilies
o Fixed Imageshack images to work with Lightbox2
o Disabled for stats page, due to conflict/error
1.3 - 25th December 2007
o Fixed haystack/needle bug
o Made 2.0 beta 1 compatible
o Fixed smilie url escaping
1.4 - 17th January 2008
o Re-wrote everything added to subs.php
o Fixed Imageshack links
o Added Photobucket non-direct links fix

[capabmx]

Hey Karl, looks like a great mod, but could you clarify something for me? What really does it do, like it overlays images, but over what? I'm thinking about installing it, but I'm not sure if I understood what it does exactly.

[eleven0]

Hey Karl, looks like a great mod, but could you clarify something for me? What really does it do, like it overlays images, but over what? I'm thinking about installing it, but I'm not sure if I understood what it does exactly.

I tried it, It's pretty sweet.

When you click on an image that has been posted, It will overlay your forum except the picture you clicked on.

[qubbah]

i have a problem with display template.. i think because there is a coflict with other mod that installed....

there no code like this in my display...

Code Select Expand

<a href="', $attachment['href'], ';image" id="link_', $attachment['id'], '" onclick="', $attachment['thumbnail']['javascript'], '"><img src="', $attachment['thumbnail']['href'], '" alt="" id="thumb_', $attachment['id'], '" border="0" /></a><br />';

hope anybody can change it with my display template... tq

[Fallen Angel]

Really a cool mod i would love to have on my board!

BUT it seems that i can't get it working proberly in Dilber MC theme...

any there can tell me what to do?

I did put this code in index.template.php as i should:

Code Select Expand


// Include the Lightbox Scripts
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/prototype.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/lightbox.js"></script>
<link rel="stylesheet" href="', $settings['default_theme_url'], '/lightbox.css" type="text/css" media="screen" />';


[falguni1]

very nice

[Stargater59]

Hey Karl, looks like a great mod, but could you clarify something for me? What really does it do, like it overlays images, but over what? I'm thinking about installing it, but I'm not sure if I understood what it does exactly.

If you'd like to see a demo, go to http://unhealthyobsession.net/shows/ and click on either 'Supernatural' or' 'Heroes'. Then click on the image.

The only problem I have with Lightbox, is it's a little weird with large images. Like images that are bigger than your screen. but for smaller images, it's really cool.

But sweet mod. I was actually wanted to put Lightbox on my forum.

[capabmx]

Ahhh, ok, I see now what it does, and I'm actually really excited, thank you karl for making this mod.
*starts immediate download*

[Daggers]

This mod interferes with the Attachment Positioning mod... that is... if you have used the manual edits from the forums for the attachment mod. I have not tried to install the updated version of the Attachment mod to see if that makes any difference.

Will have a look later to find a way around it

[xBloodshed]

Really a cool mod i would love to have on my board!

BUT it seems that i can't get it working proberly in Dilber MC theme...

any there can tell me what to do?

I did put this code in index.template.php as i should:

Code Select Expand


// Include the Lightbox Scripts
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/prototype.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/lightbox.js"></script>
<link rel="stylesheet" href="', $settings['default_theme_url'], '/lightbox.css" type="text/css" media="screen" />';


Upload the .js files (lightbox.js, scriptaculous.js, prototype.js, lightbox.css) files to your themes dir. i.e. Theme/DilberMC/

It should work then...

[karlbenson]

Apologies for not answering questions sooner.

@falguni1  &  Eleven0 

@capabmx
See the examples on the Lightbox website http://www.huddletogether.com/projects/lightbox2/

@qubbah
What others mods do you have which alter the default attachments?
The bit of code that needs replacing is YOUR display.template.php is

Code Select Expand

<a href="', $attachment['href'], ';image" id="link_', $attachment['id'], '"  target="_blank"><img style="margin:5px;" src="', $attachment['thumbnail']['href'], '" align="middle" alt="" id="thumb_', $attachment['id'], '" border="0" /></a>';

@Fallen Angel
Have you done BOTH edits for the index.template.php?

Code Select Expand


<file name="$themedir/index.template.php">
<operation>
<search position="before"><![CDATA[ var smf_charset = "', $context['character_set'], '";
]]></search>
<add><![CDATA[
var smf_default_theme_url = "', $settings['default_theme_url'], '";
]]></add>
</operation>
<operation>
<search position="before"><![CDATA[ <link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />';
]]></search>
<add><![CDATA[
// Include the Lightbox Scripts
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/prototype.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/lightbox.js"></script>
<link rel="stylesheet" href="', $settings['default_theme_url'], '/lightbox.css" type="text/css" media="screen" />';
]]></add>
</operation>
</file>


AND if your theme has a custom Display.template, the one for that also

Code Select Expand


<file name="$themedir/Display.template.php">
<operation>
<search position="replace"><![CDATA[
echo '
<a href="', $attachment['href'], ';image" id="link_', $attachment['id'], '" onclick="', $attachment['thumbnail']['javascript'], '"><img src="', $attachment['thumbnail']['href'], '" alt="" id="thumb_', $attachment['id'], '" border="0" /></a><br />';
]]></search>
<add><![CDATA[
echo '
<a href="', $attachment['href'], ';image" id="link_', $attachment['id'], '" rel="lightbox"><img src="', $attachment['thumbnail']['href'], '" alt="" id="thumb_', $attachment['id'], '" border="0" /></a><br />';
]]></add>
</operation>
</file>


I have tried to make it so that all the javascript, css, images is called from the DEFAULT theme. So you should not need to copy the files into each theme. (re: xBloodshed)

@Daggers 
Indeed, this mod currently does not alter the code of the attachments positioning mod.
There is possibly some inteference.  It is possible to alter the code that is added for that via the Display.php (in sources)

@xBloodshed
If you look at the javascript closely, I have set a javascript variable for the default theme, as I have tried to make it so that all the javascript, css, images is called from the DEFAULT theme. So you should not need to copy the files into each theme.

[vno]

Hello karlbenson, thanks for this very nice mod.

When I first tested on a test forum using default theme, it works beautifully! So I installed onto my official forum which is currently using a custom theme.

- I manually added the codes to both custom themes' display.template.php and index.template.php

- I  FTP'ed all the other Javascript and css files to the custom directory

- I FTP'ed all the .gif files to the custom theme's images folder directory

- I did this twice to ensure I did not make a mistake

Despite doing so, I am not getting this script to function as designed. I know it's something on my end since it worked perfectly on the test forum. The problem I am getting is that when I click on the picture, I don't get the effect. Rather, it takes me to a "new page" displaying the image I clicked on.

Any thought on this?

Thanks for the great work! Props to you!

[qubbah]

@qubbah
What others mods do you have which alter the default attachments?
The bit of code that needs replacing is YOUR display.template.php is

Code Select Expand

<a href="', $attachment['href'], ';image" id="link_', $attachment['id'], '"  target="_blank"><img style="margin:5px;" src="', $attachment['thumbnail']['href'], '" align="middle" alt="" id="thumb_', $attachment['id'], '" border="0" /></a>';

i must uninstall this mode to make Integrate Lightbox funtional.

91.     Attachments layout      1.1

Can i get this to mod funtion?

is there any option in acp?

[edi67]

let me try it

[Fallen Angel]

Thanx karlbenson. 

But when i put in all you wrote in index.template.php im getting;

Code Select Expand


Template Parse Error!
There was a problem loading the /Themes/Dilber MC/index.template.php template or language file.
Please check the syntax and try again - remember, single quotes (') often have to be escaped with
a slash (\). To see more specific error information from PHP, try accessing the file directly.

You may want to try to refresh this page or use the default theme.
--------------------------------------------------------------------------------

syntax error, unexpected '<'


I don't give up, this are one of the best MOD's i've seen for a while and I would love to have it on my danish forum! The MOD works perfect in the default theme....But cant get it to work under Dilber MC...

[fals]

The only problem I have with Lightbox, is it's a little weird with large images. Like images that are bigger than your screen. but for smaller images, it's really cool.

No problem, i have had my own lightbox mod/hack for some time now and found a tweak so the the lightbox vil allways fit the users screensize..... exampel:
http://www.fg-forum.dk/smf/index.php?topic=17570.0
Also, you can close the lightbox by clicking anywhere :-)

Can't remeber where i found the tweak though, but i found it easy on google ;-)

[vno]

I finally got mine to work with a custom theme... I re-installed it over again for the 3rd time and it works like a charm. Beautiful mod!!!

[Fallen Angel]

I finally got mine to work with a custom theme... I re-installed it over again for the 3rd time and it works like a charm. Beautiful mod!!!

Share what you did in index.template.php m8e.. So I can get it to work also.....

[Webbyman]

Fallen Angel, part of the install is slightly wrong.

There will be a stray ';

Try this

Code Select Expand

<script type="text/javascript" src="', $settings['default_theme_url'], '/prototype.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/lightbox.js"></script>
<link rel="stylesheet" href="', $settings['default_theme_url'], '/lightbox.css" type="text/css" media="screen" />

Before

Code Select Expand

<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/regbar.css" />';

and totally leave out the    // Include the Lightbox Scripts
   echo '

[Fallen Angel]

Gonna attach my index.template.php for Dilber MC theme here, and hope some one gonna look and maybe fix the errors i have regarding lightbox. 

Code Select Expand


// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?fin11" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style_' , $settings['theme_main_color'] , '.css?fin11" />
<script type="text/javascript" src="', $settings['default_theme_url'], '/prototype.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/lightbox.js"></script>
<link rel="stylesheet" href="', $settings['default_theme_url'], '/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />';