RapidPlugins

Quality Joomla! extensions build with simplicity in mind

Hack to make thumbnails in PrettyPhoto skin overlay bigger

Posted on 8 Jun 2012 by RP Blogger

PrettyPhoto

As requested by one of our customer, we have shared this hack in our forum. It is a hack of PrettyPhoto skin for RapidGallery to increase the size of the thumbnail shown in the overlay.

The PrettyPhoto skin displays a set of thumbnails as overlay when the lightbox effect is open. Unfortunately by default the dimensions of such thumbnails list in overlay is predefined in the PrettyPhoto source (with a value of 50px width) and being something very specific of PrettyPhoto it is not treated as a parameter of RapidGallery. 

The objective of this hack is that to let you choose whatever dimensions you prefer for the PrettyPhoto thumbnails overlay.

How to apply the hack?
It's very easy, just replace with the js file attached here (jquery.prettyPhoto.js) the following files in your Joomla installation:
modules/mod_rapid_gallery/js/jquery.prettyPhoto.js (for the Module)
plugins/content/rapidgallery/rapidgallery/js/jquery.prettyPhoto.js (for the Content Plugin)
(for Joomla 1.5.* users the plugin path is plugins/content/rapidgallery/js/jquery.prettyPhoto.js )

Now the attached jquery.prettyPhoto.js file is a modified version which has some additional variables on top in order to let you cutomize thumbnails overlay. Feel free to change such variables according to your needs.

Code:
var rpdPrettyPhotoThumbWidth = 120;
var rpdPrettyPhotoThumbHeight = 80;
var rpdMarginTop = 110;
var leftRightArrowMarginTop = 36;
 

The variables rpdPrettyPhotoThumbWidth and rpdPrettyPhotoThumbHeight are respectively width and height (in px) of the prettyphoto thumbnails in the overlay. 

The variable rpdMarginTop positions the whole thumbnails overlay upper or lower in the slide, according to your needs.

The variable leftRightArrowMarginTop is used to position upper or lower the optional left/right arrows which usually appear in the thumbnails overlay when there're several thumbnails to display (to make thumbnails scroll left/right). Usually such arrows should be centered vertically to the thumbnails overlay.

You can download our hack below in the file attachment.

If you need help, visit this forum post: http://forum.rapidplugins.com/viewtopic.php?f=4&t=45 (You need to register on the forum)

 

From time to time RapidPlugins team or forum users may submit/contribute free themes and hacks posted in our forum. To take advantage of this, please register on our comunity forum.

 

AttachmentSize
jquery.prettyphoto.zip5.88 KB