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 :

/* ============= extgallery_public-album.html ============= */

.apple_overlay {
    
display:none;
    
background:  #fff;
    
max-width:640px;        
   
border:1px solid #666;
    
font-size:12px;
    
positionfixed
    
z-index10000
    
displaynone;
    
padding-left50px;
    
padding-right50px;
    
padding-top20px;
    
border-radius10px;    
   -
moz-border-radius10px;     
   -
webkit-border-radius10px;
   -
moz-box-shadow:0 0 90px 5px #000;
    
-webkit-box-shadow0 0 90px #000;    
    
box-shadow0 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 == && !$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}>"><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ﻯealors -->

                <{if 
$disp_ph_title == }>

                    <
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: 11366

  • Since: 2004/4/23


Interesting!

Any demo for that?
Support XOOPS => DONATE
Use 2.5.10 | 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


you can see demo at here :
http://www.finalfantasy.ir/modules/extgallery/public-album.php?id=16

Login

Who's Online

135 user(s) are online (74 user(s) are browsing Support Forums)


Members: 0


Guests: 135


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Apr 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits