1
voltan
Add Overlay to extgallery by jquery tools
  • 2010/8/14 14:56

  • voltan

  • Theme Designer

  • Posts: 724

  • Since: 2006/12/5


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 :

le="color: #000000"><?php /* ============= 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 :

le="color: #000000"><?php <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>&nbsp; <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 !!!!!!!!

2
Mamba
Re: Add Overlay to extgallery by jquery tools
  • 2010/8/14 17:18

  • Mamba

  • Moderator

  • Posts: 11543

  • Since: 2004/4/23


Interesting!

Any demo for that?
Support XOOPS => DONATE
Use 2.7.x | Docs | Modules | Bugs

3
voltan
Re: Add Overlay to extgallery by jquery tools
  • 2010/8/14 17:56

  • voltan

  • Theme Designer

  • Posts: 724

  • Since: 2006/12/5


today no !!
I add it on : http://finalfantasy.ir
but my site closet until Wednesday !

4
voltan
Re: Add Overlay to extgallery by jquery tools
  • 2010/8/19 5:41

  • voltan

  • Theme Designer

  • Posts: 724

  • Since: 2006/12/5