Announcement

  •  » Engine
  •  » Shadow Box Implementation

#1 2010-02-02 23:26:20

RFDesigns
Member
2010-02-02
2

Shadow Box Implementation

First off... excellent photo gallery, Very impressed, Your work is deemed commendable :)

Now to why im posting,

After downloading the lightbox plugin I was slightly disheartened, excellent plugin dont get me wrong but it didnt quite suit my particular needs. I was looking for a lightbox style display of the "HD Image" rather then opening a new window when the user clicks to see the larger format photo. After searching through the forums for a bit I started opening php files and dissecting the source. Once i got it working I figured i would post my work for anyone else that would like to add this feature to their site. The shadowbox does not allow you to hop images within the category, does not display comment information, it simply displays the "hd image" in a lightbox style fashion.

You will need a js library, I used Shadowbox from http://www.shadowbox-js.com/.

Once you have uploaded the library to your server you will need to edit two of your template files to implement the box.

/template/*YourTemplate*/header.tpl

and

/template/*YourTemplate*/picture_content.tpl

Here are the edits:

header.tpl:

Directly following the opening <head> tag add:

Code:

<link rel="stylesheet" type="text/css" href="http://InsertYourPathHere/shadowbox/shadowbox.css">
<script type="text/javascript" src="http://InsertYourPathHere/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

picture_content.tpl

Change:

Code:

<a href="javascript:phpWGOpenWindow('{$high.U_HIGH}','{$high.UUID}','scrollbars=yes,toolbar=no,status=no,resizable=yes')">

to

Code:

<a href="{$high.U_HIGH}" rel="shadowbox">

Thats all, your photo page will now display the "HD Image" in a shadowbox....

Last edited by RFDesigns (2010-02-03 13:23:59)

Offline

 

#2 2010-02-04 11:48:01

P@t
Piwigo Team
Nice
2007-06-13
4098

Re: Shadow Box Implementation

Hi!

Great idea... you ca do that easily with a plugin...
Create plugins/shadowbox directory.
Put shadowbox files in this directory.
Create a main.inc.php with this content:

Code:

<?php
/*
Plugin Name: Shadowbox
Version: 1.0
Description: Display HD pictures in shadowbox
Author: RFDesigns
*/

add_event_handler('loc_begin_picture', 'shadowbox');

function shadowbox()
{
  global $template;

  $template->set_prefilter('default_content', 'shadowbox_prefilter');

  $template->append('head_elements', '
<link rel="stylesheet" type="text/css" href="plugins/shadowbox/shadowbox.css">
<script type="text/javascript" src="plugins/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>'
  );
}

function shadowbox_prefilter($content, &$smarty)
{
  $search = '<a href="javascript:phpWGOpenWindow(\'{$high.U_HIGH}\',\'{$high.UUID}\',\'scrollbars=yes,toolbar=no,status=no,resizable=yes\')">';
  
  $replacement = '<a href="{$high.U_HIGH}" rel="shadowbox">';

  return str_replace($search, $replacement, $content);
}

?>

Now, share your plugin on http://piwigo.org/ext !

Last edited by P@t (2010-02-04 11:50:34)


P@t

Offline

 

#3 2010-02-04 13:24:22

Gotcha
Piwigo Team
Pourrières (83) [FR]
2007-03-14
604

Re: Shadow Box Implementation

Thanks P@t !

So...
http://www.shadowbox-js.com/download.html
Does that function on your premise?

[EDIT]
http://www.shadowbox-js.com/forum.html#nabble-f1309102

Last edited by Gotcha (2010-02-04 13:29:35)

Offline

 

#4 2010-02-04 14:33:16

P@t
Piwigo Team
Nice
2007-06-13
4098

Re: Shadow Box Implementation

Gotcha wrote:

http://www.shadowbox-js.com/download.html
Does that function on your premise?

I downloaded the script on this site: http://webscripts.softpedia.com/script/ … 44117.html

Gotcha wrote:

http://www.shadowbox-js.com/forum.html#nabble-f1309102

???

This  plugin will be an example for PiwigoCamp ;-)

Last edited by P@t (2010-02-04 14:34:19)


P@t

Offline

 

#5 2010-02-04 15:14:38

Gotcha
Piwigo Team
Pourrières (83) [FR]
2007-03-14
604

Re: Shadow Box Implementation

Many thanks P@t. So... don't work for me :-(

I don't understand why. I have change the path of shadowbox.js & shadowbox.css with my path and over files. A active the personnal plugin normaly, no error message.

Offline

 

#6 2010-02-04 16:42:03

P@t
Piwigo Team
Nice
2007-06-13
4098

Re: Shadow Box Implementation

Gotcha wrote:

I don't understand why. I have change the path of shadowbox.js & shadowbox.css with my path and over files. A active the personnal plugin normaly, no error message.

Look at your path....
Instead of PP_Shadowbox, you wrote PP_Sahowbox...

Last edited by P@t (2010-02-04 16:42:32)


P@t

Offline

 

#7 2010-02-04 17:01:23

Gotcha
Piwigo Team
Pourrières (83) [FR]
2007-03-14
604

Re: Shadow Box Implementation

That gives me the same result with the relative path.

Offline

 

#8 2010-02-05 00:13:41

P@t
Piwigo Team
Nice
2007-06-13
4098

Re: Shadow Box Implementation

Gotcha wrote:

That gives me the same result with the relative path.

It was not a problem of relative path...
You wrote (in your url) PP_Sahowbox instead of PP_Shadowbox


P@t

Offline

 

#9 2010-02-05 00:22:26

Gotcha
Piwigo Team
Pourrières (83) [FR]
2007-03-14
604

Re: Shadow Box Implementation

MP send.

Offline

 

#10 2010-02-05 19:22:13

RFDesigns
Member
2010-02-02
2

Re: Shadow Box Implementation

Holy Crap... lol didnt check the post for replies for a day and poof...

P@t,
Giving you major kudos in the description, a few things i would like to add as options such as different lightbox/shoadowbox display options or whatnot in the future. Will poke around in the documentation on piwingo plugins and see what i can come up with, any points in the right direction would be appreciated.

I feel a plugin should be more functional then its current revision after all not every template/theme looks great with a black box as a popup on the page, maybe for version 2.0 :)


For now however:
Heres v1.0 of the plugin

Offline

 

#11 2010-02-06 15:32:53

P@t
Piwigo Team
Nice
2007-06-13
4098

Re: Shadow Box Implementation

I have corrected plugin path in version 1.1

Last edited by P@t (2010-02-06 15:33:43)


P@t

Offline

 

#12 2010-02-06 15:57:18

Gotcha
Piwigo Team
Pourrières (83) [FR]
2007-03-14
604

Re: Shadow Box Implementation

I will see that immediately :-D

Offline

 

#13 2010-02-06 17:09:12

LucMorizur
Member
Vienne (Isère) - France
2009-04-30
168

Re: Shadow Box Implementation

Hi ;

LLGBO2 needs to be deactivated so to make Shadow Box work :-/


Our gallery : Le Site à Nous (a silly name in french, but here I don't care ;-) ! )
An event, a new gallery ? Plugin Event Cats
My test gallery : Tests Piwigo de Luc
Thanksalot for this beautiful project.

Offline

 

#14 2010-02-06 17:25:45

Eric
Piwigo Team
VALENCE (FR)
2005-03-25
1768

Re: Shadow Box Implementation

Hi !

This plugin is really usefull ! Thank you for doing it.

I'd have juste an advice : The main goal is to display HD pictures with full ranged resolution. Without HD Lightbox, they are displayed in a navigator's tab where it's possible to zoom in or out (ability with FF and IE).
By example, a normal sized picture is 800x600 and his HD size is 1700x1200. With HD Lightbox, this HD picture is displayed in a smaller box than the normal sized and can't zoom in or out on details. This could be a bit perturbing a visitor seeing a picture reduction when he expects to see a full ranged, isn't it ?

Offline

 

#15 2010-02-16 00:15:23

RFDesigns
Member
2010-02-02
2

Re: Shadow Box Implementation

@ Eric,

at this point the javascript library used to implement the shadowbox is based on browser resolution, and served my needs.

However since there seems to be a few people liking this feature for their galleries i have started creating a full featured version that will technically be a full screen chromeless window, this will allow the zoom feature built into most browsers to function in the shadowbox.

There are several things I am attempting to add at once because I have to write my own JS library to handle light vs dark background as well as adding code from the gallery to implement a few buttons such as download and comment as well as the star rating. After all a plugin that performs a function and is customizable depending on your taste is really a much better addition to this community rather then the simple box that is appearing in the plugin's current form.

Gimme a few weeks and i'll update the plugin,

@ P@t

geuss i screwed something up.. lol thnx for fixing what im sure will not be my only error :)

BTW all who read this topic most of the thnx for what is present so far in this plugin should be given to P@t they are the one that turned my hack into a plugin

Offline

 
  •  » Engine
  •  » Shadow Box Implementation

Board footer

Powered by FluxBB

github twitter facebook google+ newsletter Donate Piwigo.org © 2002-2019 · Contact