Gallery2:Themes:PGlightbox - Gallery Codex
Personal tools

Gallery2:Themes:PGlightbox

From Gallery Codex


PGlightbox, a PGtheme Clone

This Theme needs the latest Gallery Version, currently 2.2-SVN with Core 1.1.16 Theme API 2.4 and Core API 7.0 are required to install this theme and to benefit of the Gallery 2.2 features like Virtual Albums!. Using the Lightbox 2.0.2 script, see Gallery2:How_to_implement_Lightbox_on_Gallery_2, it offers some new useability.



Information

Pedro Gilberto's wonderfull theme inspired me from the early days of version 1, and I always tried to keep it up to date with my Gallery installation - and as you probably know me from the forum contributions, I really like living at the edge. I mean I try always the latest stuff. Is it the latest SQLplus release, Apache Versions not released yet or the latest SVN version of the Gallery code ... it's on my server ;)

Unfortunately, Pedro is sometimes a bit slow catching up (having a lot of other responsibilities I assume), so I had to adjust the PGtheme more than once to get it up to date - and added some gimmicks like the flying Exif- and Comment-Boxes. Finally with 2.2-SVN, I've added support for the Virtual Albums and added - thanks to a discussion in the forums - a Lightbox.


Planned Version / Coming Soon ...

Current version is 1.2.0 - plans are to implement custom fields as 'flying' feature ...

How it looks like

on the first look, it's a pure PGtheme - the devil sit's in its details ...

and allows to use a Lightbox-Display to link to the Photo-Page, and a final Lightbox to popup on the Photo Page (using always the third resize - I couldn't find something more clever, yet).

In addition, I took Pedros latest gimmick, the Popup-Navigation Images into the Photo Display.

And - its (seems to) be fully compatible with the Keyalbums introduced with Gallery 2.2.

Theme Settings

Example values to be used for the different settings can be found in the following Snapshots:

Some more - explainatory text will be added as soon as possible ;)


Global Settings

There seems to be an issue with the non-standard themes and selecting options, i.e. for the Imageblocks. My workaround is to use a Standard Theme like Matrix as Default, switch the Root-Album to PGlightbox and inherit this theme to all albums below the root. This ensures the Siteadmin to run perfectly - as its still using a Standard-Theme.

Overall

Album


Album Items


Photo


Microthumbs


Blocks


Actions


Alternative Text


Slideshow

Allows the use of the PGtheme Slideshow, which still fits perfectly as its coming directly from the mother of this theme - and allows to displays the little Slideshow Icon where applicable.


Footer

Nothing specific - only the options to display the little avatars for XHTML-Validation, Gallery, Donate and the Copyright messages to be used in your gallery.

Interactive Frame

The settings below will add a nice little canvas and a copyright notice of the Image author to the picture displayed. The color is optimized for my favorite PGsnow Colorpack.

Canvas.jpg

Tips & Tricks

Lightbox PopUp Size

The Photo Lightbox PopUp currently uses always the third available resize - to make it fit a standard 17" screen, you should define your resizes in Album Edit like shown here:

Lightbox Preview on Album Page

The Size of the Lightbox Preview on the Album Pages has to be defined in theme.inc directly. The Default of 800px forces Gallery to look for the nearest possible resize to be displayed. 800px is a good compromise for 17" screens, if you have bigger sized screens, you might think about increasing this to 960px or even 1024px.

  
				/* Add resizedId to child values */
				if ( $theme['children'] ){
				    foreach ( $theme['children'] as $key => $value ){
				        if ( $value['id'] ){
				            list($ret,$resizedIds) =  
                                                  GalleryCoreApi::fetchResizesByItemIds(array($value['id']));
				            if ($ret)
				                return $ret;
				        }
				        $theme['children'][$key]['resizedId'] = $value['id'];
				        if ( $resizedIds ){
				            /* Find the best resized option
				             * 
				             * Use width/height max=800; */
				            $lboxMaxEdge = 800;
				            $resizedEdge = NULL;
				            $resizedId = NULL;
				            foreach ( $resizedIds[$value['id']] as $resize ){
						$width = $resize->getWidth();
				                $height = $resize->getHeight();
				                $edge = ( $width > $height )? $width : $height;
				                if ( $edge <= $lboxMaxEdge ){
				                    if ( !isset($resizedEdge) ){
				                        $resizedId = $resize->getId();
				                        $resizedEdge = $edge;
				                    } else if ( $edge > $resizedEdge ){ 
				                        $resizedId = $resize->getId();
				                        $resizedEdge = $edge;
				                    } 
				                }
				            }
				            $theme['children'][$key]['resizedId'] = $resizedId;
				        }
				    }
				}
			

How to adjust the Lightbox for other Colorpacks

The PGlightbox theme is highly optimuzed for the PGsnow colorpack. In case you like to apply another colorpack, you will need to adjust a few things.

Icons

There are specific Icons, i.e. for the eCard functionality in PGsnow\images\set1 and -set1\3d_on you will need to copy to the new colorpack location (ecard.gif & ecardon.gif).

Lightbox CSS

The Lightbox-CSS, located in \PGlightbox\images\lb\css needs some adjustments too,

  

#outerImageContainer{
	position: relative;
	'''background-color: #f4f4f4;'''
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}
#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	'''background-color: #f4f4f4;'''
	margin: 0 auto;
	line-height: 1.4em;
	}
#imageData{
	padding:0 10px;
	'''background-color: #f4f4f4;'''
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; '''background-color: #f4f4f4;''' }	
#imageData #caption{ font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color=777; 
            '''background-color: #f4f4f4;'''}
#imageData #numberDisplay{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #333;
	display: block; 
	clear: left; 
	padding-bottom: 1.0em; 
	'''background-color: #f4f4f4;'''
}			
#imageData #bottomNavClose{ background: url(../../close.gif) no-repeat; background-color: #f4f4f4; width: 22px; float: right; padding-bottom: 2.4em;}	
	
...
		
#'''overlay'''{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	'''background-color: #fff;'''
	filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
	}

Just change them to something darker - like the overlay to #000 (black), which will then - using the aplied transparency - become a dark grey ...

Flying Comments

To enable the flying Comments on Photo- and Album Pages, you need to activate the Settings

BLOCKS :::

"BLOCKS :: Show a "Blocks" button on photo pages (when clicked Blocks selected to show: containing EXIF, Comments,etc, will be displayed)" and add

Theme Settings :::

"Blocks to show on photo pages" - 'Add Comment'.


Skipping the 'Add Comment Confirmation'

The flying comments might raise the wish to skip the "Comment Added" Confirmation Page displayed. This can be accomplished by changing a few lines in the "AddComment.inc" module. Look for the file "modules\comment\AddComment.inc" and search the string: "/* Send the user to a confirmation page, for now */" Then change the lines

  		
       /* Send the user to a confirmation page, for now */
	$redirect['view'] = 'comment.CommentChangeConfirmation';
	$redirect['itemId'] = (int)$itemId;
	$status['added'] = 1;
    }

to

  
       /* Send the user to a confirmation page, for now */
	$redirect['view'] = 'core.ShowItem';
	$redirect['itemId'] = (int)$itemId;
	$status['added'] = 1;
    }

The Archive

The attached ZIP contains all files neccessary, but be aware, its a first trial for Gallery 2.2 - you might encounter issues, which can be discussed here or better directly at the forums.

September, 06

Update: 06.09.2006 - updated album.tpl and photo.tpl according SVN-Revision 14460

check*Blocks parameters for core.EmergencyEditItemLink block are now deprecated;
new form is checkBlocks="sidebar,album"; use this in all themes, including carbon
theme which has block lists other than sidebar,album,photo.  Set required Core API
for those themes to 7.10

September, 07

Update: 07.09.2006 - implemented a 'Send eCard Icon' on the Photo Page and fixed the display of both useable carts in the Top Navigation. "Add Item to Cart" versus "Purchase Item". Added an archive containing the standard modules like the PGcolorpacks, PGimageframes and PGslideshow.

Ecard.jpg


September, 14

Update: 14.09.2006 - implemented the TripTracker.net - Slideshow into Album Pages

Slider.jpg


October, 1

Update: 01.10.2006 - 1.1.3 Implemented flying Comment Boxes and fixed some minor permission issues (Lightbox Popup not visible for Guests on Photo Page). Flying Comments on Album Items works, but only the first one will have the formatting icons active. Found no fix yet.

Comment.jpg


October, 06

Update: 06.10.2006 - 1.1.4 Proper stacking of popus and dialogs and indicate 'flying dialogs' by mouse cursor change on mouse-over event. Frames and Passpartouts on the Photo Page can have Shadow-Image Frames again.

Stack.jpg

and

Proper.jpg


October, 18

Update: 18.10.2006 - 1.1.5 Added Switch to enable/disable Java Slideshow, added Switch to display 'g2_enterAlbum=' on album links, re-Enabled Sidebar Actions on all Admin Pages and fixed some $theme.params which prevented to switch Lightbox on/off


November, 19

Update: 19.11.2006 - 1.2.0 Fixed several forgotten local file references (Thanks to the testers ;)) and switched to Lightbox 2.0.2+, which includes a nice fit to screen and zoom feature.




The current distribution will always be found on the Gallery2:User_Contributions Page or directly here. The modules like Slideshow, Imageframe and Colorpacks are still usable with PGlightbox, I've added them for your convenience here.

Acknowledgement

The biggest "Thank You" goes to Pedro for making this theme come true by designing the mother of this theme, PGtheme! I hope you don't mind using your skeleton ... If you like this theme, please leave an entry on my Guestbook or comment my work at lf-photodesign.de. Any feedback will be highly appreciated.

And - do you think the Guestbook could make a Gallery module?

advertisements