1) Open themes/your_theme_name/template.html and paste after {JAVASCRIPT}:
<script type="text/javascript" src="themes/your_theme_name/js/collage/jquery.collagePlus.min.js"></script>
<script type="text/javascript" src="themes/your_theme_name/js/collage/jquery.removeWhitespace.min.js"></script>
<script type="text/javascript">
// All images need to be loaded for this plugin to work so
// we end up waiting for the whole window to load in this example
$(window).load(function () {
$(document).ready(function(){
collage();
});
});
// Here we apply the actual CollagePlus plugin
function collage() {
$('.Collage').removeWhitespace().collagePlus(
{
'fadeSpeed' : 2000,
'targetHeight' : 80,
'allowPartialLastRow' : true
}
);
};
// This is just for the case that the browser window is resized
var resizeTimer = null;
$(window).bind('resize', function() {
// hide all the images until we resize them
$('.Collage .Image_Wrapper').css("opacity", 0);
// set a timer to re-apply the plugin
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(collage, 80);
});
</script>
2) Open themes/your_theme_name/theme.php and paste at the end before ?> (make sure functions $template_thumbnail_view and theme_display_thumbnails are not already in your theme.php) :
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/
// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT
<!-- BEGIN header -->
<!-- END header -->
<!-- BEGIN thumb_cell -->
<div class="thumbnails Image_Wrapper" width ="{CELL_WIDTH}" align="center">
<div align="center" style="position: relative;">
<a href="{LINK_TGT}">{THUMB}</a>
<div id="caption">{CAPTION}</div>
{ADMIN_MENU}
</div>
</div>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
<div valign="top" class="thumbnails" align="center"> </div>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
<!-- END row_separator -->
<!-- BEGIN footer -->
<!-- END footer -->
<!-- BEGIN tabs -->
<div id="tabWrapp">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
{TABS}
</tr>
</table>
</div>
<!-- END tabs -->
<!-- BEGIN spacer -->
<!-- END spacer -->
EOT;
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - END
******************************************************************************/
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - START
******************************************************************************/
function theme_display_thumbnails(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $page, $total_pages, $sort_options, $display_tabs, $mode = 'thumb', $date='')
{
global $CONFIG, $CURRENT_ALBUM_DATA;
global $template_thumb_view_title_row,$template_fav_thumb_view_title_row, $lang_thumb_view, $lang_common, $template_tab_display, $template_thumbnail_view, $lang_album_list, $lang_errors;
$superCage = Inspekt::makeSuperCage();
static $header = '';
static $thumb_cell = '';
static $empty_cell = '';
static $row_separator = '';
static $footer = '';
static $tabs = '';
static $spacer = '';
if ($header == '') {
$thumb_cell = template_extract_block($template_thumbnail_view, 'thumb_cell');
$tabs = template_extract_block($template_thumbnail_view, 'tabs');
$header = template_extract_block($template_thumbnail_view, 'header');
$empty_cell = template_extract_block($template_thumbnail_view, 'empty_cell');
$row_separator = template_extract_block($template_thumbnail_view, 'row_separator');
$footer = template_extract_block($template_thumbnail_view, 'footer');
$spacer = template_extract_block($template_thumbnail_view, 'spacer');
}
$cat_link = is_numeric($aid) ? '' : '&cat=' . $cat;
$date_link = $date=='' ? '' : '&date=' . $date;
if ($superCage->get->getInt('uid')) {
$uid_link = '&uid=' . $superCage->get->getInt('uid');
} else {
$uid_link = '';
}
$album_types = array(
'albums' => array('lastalb')
);
$album_types = CPGPluginAPI::filter('theme_thumbnails_album_types', $album_types);
$theme_thumb_tab_tmpl = $template_tab_display;
if ($mode == 'thumb') {
$theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => in_array($aid, $album_types['albums']) ? $lang_album_list['album_on_page'] : $lang_thumb_view['pic_on_page']));
$theme_thumb_tab_tmpl['page_link'] = strtr($theme_thumb_tab_tmpl['page_link'], array('{LINK}' => 'thumbnails.php?album=' . $aid . $cat_link . $date_link . $uid_link . '&page=%d'));
} else {
$theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => $lang_thumb_view['user_on_page']));
$theme_thumb_tab_tmpl['page_link'] = strtr($theme_thumb_tab_tmpl['page_link'], array('{LINK}' => 'index.php?cat=' . $cat . '&page=%d'));
}
$thumbcols = $CONFIG['thumbcols'];
$cell_width = ceil(100 / $CONFIG['thumbcols']) . '%';
$tabs_html = $display_tabs ? create_tabs($nbThumb, $page, $total_pages, $theme_thumb_tab_tmpl) : '';
if (!GALLERY_ADMIN_MODE && stripos($template_thumb_view_title_row, 'admin_buttons') !== false) {
template_extract_block($template_thumb_view_title_row, 'admin_buttons');
}
// The sort order options are not available for meta albums
if ($sort_options) {
if (GALLERY_ADMIN_MODE) {
$param = array(
'{ALBUM_ID}' => $aid,
'{CAT_ID}' => ($cat > 0 ? $cat : $CURRENT_ALBUM_DATA['category']),
'{MODIFY_LNK}' => $lang_common['album_properties'],
'{MODIFY_ICO}' => cpg_fetch_icon('modifyalb', 1),
'{PARENT_CAT_LNK}' => $lang_common['parent_category'],
'{PARENT_CAT_ICO}' => cpg_fetch_icon('category', 1),
'{EDIT_PICS_LNK}' => $lang_common['edit_files'],
'{EDIT_PICS_ICO}' => cpg_fetch_icon('edit', 1),
'{ALBUM_MGR_LNK}' => $lang_common['album_manager'],
'{ALBUM_MGR_ICO}' => cpg_fetch_icon('alb_mgr', 1),
);
} else {
$param = array();
}
$param['{ALBUM_NAME}'] = $album_name;
// Plugin Filter: allow plugin to modify or add tags to process
$param = CPGPluginAPI::filter('theme_thumbnails_title', $param);
$title = template_eval($template_thumb_view_title_row, $param);
} elseif ($aid == 'favpics' && $CONFIG['enable_zipdownload'] > 0) { //Lots of stuff can be added here later
$param = array(
'{ALBUM_ID}' => $aid,
'{ALBUM_NAME}' => $album_name,
'{DOWNLOAD_ZIP}' => cpg_fetch_icon ('zip', 2) . $lang_thumb_view['download_zip'],
);
// Plugin Filter: allow plugin to modify or add tags to process
$param = CPGPluginAPI::filter('theme_thumbnails_title', $param);
$title = template_eval($template_fav_thumb_view_title_row, $param);
} else {
$title = $album_name;
}
CPGPluginAPI::action('theme_thumbnails_wrapper_start', null);
echo '<div class="thumbTitle">';
echo $title;
echo '</div>';
echo '<div id="thumbWrapp" class="Collage">';
$header = CPGPluginAPI::filter('theme_thumbnails_header', $header);
echo $header;
$i = 0;
global $thumb; // make $thumb accessible to plugins
foreach($thumb_list as $thumb) {
$i++;
if ($mode == 'thumb') {
if (in_array($aid, $album_types['albums'])) {
$params = array(
'{CELL_WIDTH}' => $cell_width,
'{LINK_TGT}' => "thumbnails.php?album={$thumb['aid']}",
'{THUMB}' => $thumb['image'],
'{CAPTION}' => $thumb['caption'],
'{ADMIN_MENU}' => $thumb['admin_menu'],
);
} else {
// determine if thumbnail link targets should open in a pop-up
if ($CONFIG['thumbnail_to_fullsize'] == 1) { // code for full-size pop-up
if (!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) {
$target = 'javascript:;" onclick="alert(\''.sprintf($lang_errors['login_needed'],'','','','').'\');';
} elseif (USER_ID && USER_ACCESS_LEVEL <= 2) {
$target = 'javascript:;" onclick="alert(\''.sprintf($lang_errors['access_intermediate_only'],'','','','').'\');';
} else {
$target = 'javascript:;" onclick="MM_openBrWindow(\'displayimage.php?pid=' . $thumb['pid'] . '&fullsize=1\',\'' . uniqid(rand()) . '\',\'scrollbars=yes,toolbar=no,status=no,resizable=yes,width=' . ((int)$thumb['pwidth']+(int)$CONFIG['fullsize_padding_x']) . ',height=' . ((int)$thumb['pheight']+(int)$CONFIG['fullsize_padding_y']). '\');';
}
} elseif ($aid == 'random') {
$target = "displayimage.php?pid={$thumb['pid']}$uid_link#top_display_media";
} elseif ($aid == 'lastcom' || $aid == 'lastcomby') {
$page = cpg_get_comment_page_number($thumb['msg_id']);
$page = (is_numeric($page)) ? "&page=$page" : '';
$target = "displayimage.php?album=$aid$cat_link$date_link&pid={$thumb['pid']}$uid_link&msg_id={$thumb['msg_id']}$page#comment{$thumb['msg_id']}";
} else {
$target = "displayimage.php?album=$aid$cat_link$date_link&pid={$thumb['pid']}$uid_link#top_display_media";
}
$params = array(
'{CELL_WIDTH}' => $cell_width,
'{LINK_TGT}' => $target,
'{THUMB}' => $thumb['image'],
'{CAPTION}' => $thumb['caption'],
'{ADMIN_MENU}' => $thumb['admin_menu'],
);
}
} else { // mode != 'thumb'
// Used for mode = 'user' from list_users() in index.php
$params = array(
'{CELL_WIDTH}' => $cell_width,
'{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
'{THUMB}' => $thumb['image'],
'{CAPTION}' => $thumb['caption'],
'{ADMIN_MENU}' => '',
);
}
// Plugin Filter: allow plugin to modify or add tags to process
$params = CPGPluginAPI::filter('theme_display_thumbnails_params', $params);
echo template_eval($thumb_cell, $params);
if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
echo $row_separator; }
} // foreach $thumb
unset($thumb); // unset $thumb to avoid conflicting with global
$footer = CPGPluginAPI::filter('theme_thumbnails_footer', $footer);
echo $footer;
echo '</div>';
echo '<div class="clearer"></div>';
if ($display_tabs) {
$params = array(
'{THUMB_COLS}' => $thumbcols,
'{TABS}' => $tabs_html,
);
echo template_eval($tabs, $params);
}
CPGPluginAPI::action('theme_thumbnails_wrapper_end', null);
echo $spacer;
}
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - END
******************************************************************************/
3) Open themes/your_theme_name/style.css and add:
.Collage {
/* define how much padding you want in between your images */
padding:12px;
}
.Collage img{
/* ensures padding at the bottom of the image is correct */
vertical-align:bottom;
}
.thumbTitle .statlink,
.thumbTitle .sortorder_options {
color: #000000;
}
#thumbWrapp .thumbnails {
position: relative;
}
.thumbnails #caption {
display: none;
}
.thumbnails:hover #caption {
position: absolute;
bottom: 0;
left: 0;
display: inline;
z-index: 1000;
background: rgba(0,0,0,0.8);
width: 100%;
color: #FFFFFF;
text-align: left;
}
.thumb_caption,
.thumb_title,
.thumb_filename,
.thumb_num_comments {
font-size: 60%;
width: 98%;
padding: 0.5% 1% 0.5% 1%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
display: none;
}
.thumb_title_title {
font-size: 70%;
width: 98%;
padding: 0.5% 1% 0.5% 1%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
display: block!important;
}
.thumb_title_owner {
display: block!important;
}
.thumb_title_owner a:link {
text-decoration: none;
color: #B9AD84;
}
4) Open themes/your_theme_name/style.css, FIND and DELETE (the curve theme has all this style. I don't kow if your theme has them, but it should) :
.thumb_filename {
font-size: 80%;
display: block;
}
.thumb_title {
font-weight : bold;
font-size: 80%;
padding: 2px;
display : block;
}
.thumb_caption {
font-size: 80%;
padding: 1px;
display : block;
}
.thumb_caption a {
text-decoration: underline;
color: #000000;
}
.thumb_num_comments {
font-weight: normal;
font-size: 80%;
padding: 2px;
font-style : italic;
display : block;
}
.image {
border-style:solid;
border-width:1px;
border-color:#000000;
margin:2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.thumbnails {
background: #EFEFEF none repeat scroll 0% 0%;
padding: 5px;
}
5) 4) Open themes/your_theme_name/style.css, FIND and REPLACE (the curve theme has all this style. I don't kow if your theme has them) :
/* pseudo-classes for image links */
a:link .image{
border-style:solid;
border-width:1px;
border-color:#000000;
margin:2px;
}
a:visited .image{
border-style:solid;
border-width:1px;
border-color:#840084;
margin:2px;
}
a:focus .image{
border-style:solid;
border-width:1px;
border-color:#000000;
margin:2px;
}
a:hover .image{
border-style:solid;
border-width:1px;
border-color:#0033CC;
margin:2px;
}
a:active .image{
border-style:solid;
border-width:1px;
border-color:#000000;
margin:2px;
}
with:
/* pseudo-classes for image links */
a:link .image,
a:visited .image,
a:focus .image,
a:hover .image,
a:active .image {
background-color: transparent;
}