1
Hello
I add Overlay to show photos in albums in extgallery . is not finished yet but you can test it
1- down load jquery tools from here and add to your theme :
http://flowplayer.org/tools/download/index.html
2- add this css cods in your theme style :
/* ============= extgallery_public-album.html ============= */
.apple_overlay {
display:none;
background: #fff;
max-width:640px;
border:1px solid #666;
font-size:12px;
position: fixed;
z-index: 10000;
display: none;
padding-left: 50px;
padding-right: 50px;
padding-top: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
box-shadow: 0 0 90px #000;
}
.apple_overlay .close {
background-image:url(../img/close.png);
position:absolute;
right:5px;
top:5px;
cursor:pointer;
height:35px;
width:35px;
}
3- copy this image to your theme :
http://static.flowplayer.org/tools/img/overlay/close.png
4- this is extgallery_public-album.html code you can copy this code to module or theme :
<div id="extgallery">
<a href="<{xoAppUrl modules/extgallery/}>"><{$extgalleryName}></a><{foreachq item=node from=$catPath name=breadcrumb}> <img src="images/breadcrumb-link.gif" alt="BreadCrumb" /> <a href="public-categories.php?id=<{$node.cat_id}>"><{$node.cat_name}></a><{/foreach}> <img src="images/breadcrumb-link.gif" alt="BreadCrumb" /> <{$cat.cat_name}>
<div class="pageNav">
<{$pageNav}>
</div>
<table id="thumbTable" class="outer">
<tr>
<th colspan="<{$nbColumn}>"><{$cat.cat_name}></th>
</tr>
<tr class="even">
<{section name=photo loop=$photos}>
<{if $smarty.section.photo.index ٪ $nbColumn == 0 && !$smarty.section.photo.first}>
</tr>
<tr class="even">
<{/if}>
<td>
<{if $photos[photo].photo_id}>
<!-- Start Admin link -->
<{if $xoops_isadmin}>
<div class="adminLink">
<a href="public-modify.php?op=edit&id=<{$photos[photo].photo_id}>"><img src="images/edit.gif" /></a>
<a href="public-modify.php?op=delete&id=<{$photos[photo].photo_id}>"><img src="images/delete.gif" /></a>
</div>
<br>
<{/if}>
<div align="center" id="apple">
<{if $photos[photo].photo_serveur && $photos[photo].photo_name}>
<img rel="#photo<{$photos[photo].photo_id}>" class="thumb" src="<{$photos[photo].photo_serveur}>thumb_<{$photos[photo].photo_name}>" alt="<{$photos[photo].photo_desc}>" title="<{$photos[photo].photo_desc}>" />
<{elseif $photos[photo].photo_name}>
<img rel="#photo<{$photos[photo].photo_id}>" class="thumb" src="<{$xoops_url}>/uploads/extgallery/public-photo/thumb/thumb_<{$photos[photo].photo_name}>" alt="<{$photos[photo].photo_desc}>" title="<{$photos[photo].photo_desc}>" />
<{/if}>
</div>
<div class="apple_overlay" id="photo<{$photos[photo].photo_id}>"><a class="close"></a>
<img style="max-height: 350px !important;" src="<{$xoops_url}>/uploads/extgallery/public-photo/medium/<{$photos[photo].photo_name}>">
<div class="details">
<h2><{$photos[photo].photo_title}></h2>
<table>
<tr>
<td>
<!-- Photo Title -->
<!-- Si l'option d'affichage du titre de la photo est activﻯe, alors -->
<{if $disp_ph_title == 1 }>
<div align="center"><b><{$photos[photo].photo_title}></b></div>
<{/if}>
<!-- Start Hit count -->
<div align="center"><b><{$photos[photo].photo_hits}></b> <{$lang.hits}></div>
<!-- End Hit count -->
<!-- Start Comment count -->
<div align="center"><b><{$photos[photo].photo_comment}></b> <{$lang.comments}></div>
<!-- End Comment count -->
<!-- Start Submitter link -->
<div align="center"><a href="<{$xoops_url}>/userinfo.php?uid=<{$photos[photo].user.uid}>"><{$photos[photo].user.uname}></a></div>
<!-- End Submitter link -->
<{if $enableRating}>
<!-- Start Rating score -->
<div align="center"><img src="images/rating_<{$photos[photo].photo_rating}>.gif" alt="<{$lang.rate_score}> : <{$photos[photo].photo_rating}>" title="<{$lang.rate_score}>" /></div>
<!-- End Rating score -->
<{/if}>
<{if $enableExtra}>
<!-- Start extra field -->
<div align="center"><{$photos[photo].photo_extra}></div>
<!-- End extra filed -->
<{/if}>
<{foreachq item=pluginLink from=$photos[photo].link}>
<div align="center"><a href="<{$pluginLink.link}><{$photos[photo].photo_id}>" alt="<{$pluginLink.name}>"><{$pluginLink.name}></a></div>
<{/foreach}>
</td>
<td>
<{if $photos[photo].photo_serveur && $photos[photo].photo_name}>
<div align="center"><a href="public-photo.php?photoId=<{$photos[photo].photo_id}>#photoNav"><img width="100" class="thumb" src="<{$photos[photo].photo_serveur}>thumb_<{$photos[photo].photo_name}>" alt="<{$photos[photo].photo_desc}>" title="<{$photos[photo].photo_desc}>" /></a></div>
<{elseif $photos[photo].photo_name}>
<div align="center"><a href="public-photo.php?photoId=<{$photos[photo].photo_id}>#photoNav"><img width="100" class="thumb" src="<{$xoops_url}>/uploads/extgallery/public-photo/thumb/thumb_<{$photos[photo].photo_name}>" alt="<{$photos[photo].photo_desc}>" title="<{$photos[photo].photo_desc}>" /></a></div>
<{/if}>
</td>
</tr>
</table>
</div>
</div>
<!-- Start Displaying Hook code -->
<!-- <{if $xoops_isadmin}>
<div><input type="text" value='[gallery title="<{$photos[photo].photo_desc}>"]<{$photos[photo].photo_id}>[/gallery]' /></div>
<{/if}>
-->
<!-- End Displaying Hook code -->
<{/if}>
</td>
<{/section}>
</tr>
</table>
<div class="pageNav">
<{$pageNav}>
</div>
<{include file='db:system_notification_select.html'}>
<script>
$(function() {
$("#apple img[rel]").overlay({effect: 'apple'});
});
</script>
</div>
It's ready !!!!!!!!