Changeset 16501


Ignore:
Timestamp:
07/08/12 17:45:23 (7 years ago)
Author:
flop25
Message:

adding a gif loader (introduced in 2.4.2)
fixing the height of medium_cat.tpl
adding a custom size for spotlight.tpl

Location:
extensions/flop_style
Files:
11 edited

Legend:

Unmodified
Added
Removed
  • extensions/flop_style/mainpage_categories/jPolaroid.tpl

    r16393 r16501  
    22{combine_css path="template-extension/flop_style/mainpage_categories/jPolaroid/jpolaroid.minified.css"} 
    33{combine_script id="jquery.jpolaroid.minified" load="header" path="template-extension/flop_style/mainpage_categories/jPolaroid/jquery.jpolaroid.min.js"} 
     4{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} 
     5{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} 
    46{html_head} 
    57  {literal} 
     
    3234<ul class="jpolaroid"> 
    3335{foreach from=$category_thumbnails item=cat} 
     36{assign var=derivative value=$pwg->derivative($derivative_jPolaroid, $cat.representative.src_image)} 
    3437  <li> 
    3538                        <a href="{$cat.URL}" title="{$cat.NAME|@replace:'"':' '}"> 
    36                                 <img src="{$pwg->derivative_url($derivative_jPolaroid, $cat.representative.src_image)}"  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" > 
     39                                <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if}  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" > 
    3740                        </a> 
    3841        </li> 
  • extensions/flop_style/mainpage_categories/medium_cat.tpl

    r16410 r16501  
    66 
    77.thumbnailCategory { 
    8         height:{/literal}{$derivative_params->max_width()+50}{literal}px; 
     8        height:{/literal}{$derivative_params->max_width()+60}{literal}px; 
     9        width:{/literal}{$derivative_params->max_width()+10}{literal}px; 
     10  overflow:hidden; 
    911} 
    1012{/literal}{/html_style} 
  • extensions/flop_style/mainpage_categories/mosaic.tpl

    r16393 r16501  
    22{combine_css path="template-extension/flop_style/mainpage_categories/mosaic.css"} 
    33{combine_script id="jquery.mosaic" load="header" path="template-extension/flop_style/mainpage_categories/mosaic/mosaic.1.0.1.min.js"} 
     4{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} 
     5{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} 
    46{html_head} 
    57  {literal}  
     
    2224{define_derivative name='derivative_mosaic' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true} 
    2325<div id="mosaic-content"> {foreach from=$category_thumbnails item=cat} 
     26{assign var=derivative value=$pwg->derivative($derivative_mosaic, $cat.representative.src_image)} 
    2427  <div class="mosaic-block bar"> <a href="{$cat.URL}" class="mosaic-overlay"> 
    2528    <div class="details"> 
     
    3538    </div> 
    3639    </a> 
    37     <div class="mosaic-backdrop"> <img src="{$pwg->derivative_url($derivative_mosaic, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> </div> 
     40    <div class="mosaic-backdrop"> <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> </div> 
    3841  </div> 
    3942  {/foreach} 
  • extensions/flop_style/mainpage_categories/picpile_cat.css

    r9825 r16501  
    22} 
    33.thumbnailCategories { 
    4         padding-left:auto; 
    5         padding-right:auto; 
    6         padding: 5px; 
    74        list-style: none outside none; 
    85        text-align: center; 
  • extensions/flop_style/mainpage_categories/picpile_cat.tpl

    r16393 r16501  
    11{combine_css path="template-extension/flop_style/mainpage_categories/picpile_cat.css"} 
     2{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} 
     3{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} 
    24{if $themeconf.name == "Sylvia"} 
    35{html_style} 
     
    3436  <span class="wrap1"><div class="albumHolder"> 
    3537    <div class="picRotated"></div> 
    36     <div class="album"> <a class="ajax" href="{$cat.URL}"> <span title="Browse Album" class="highlight"></span> <img {$der_picpile_cat->get_size_htm()} title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" alt="{$cat.TN_ALT}" src="{$der_picpile_cat->get_url()}"> <span title="Contains {$cat.CAPTION_NB_IMAGES} images" class="albumCnt">{$cat.CAPTION_NB_IMAGES}</span> </a> </div> 
     38    <div class="album"> <a class="ajax" href="{$cat.URL}"> <span title="Browse Album" class="highlight"></span> <img {if $der_picpile_cat->is_cached()}src="{$der_picpile_cat->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$der_picpile_cat->get_url()}"{/if}  {$der_picpile_cat->get_size_htm()} title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" alt="{$cat.TN_ALT}" > <span title="Contains {$cat.CAPTION_NB_IMAGES} images" class="albumCnt">{$cat.CAPTION_NB_IMAGES}</span> </a> </div> 
    3739    <div title="{$cat.NAME}" class="albumTitle">{$cat.NAME}</div> 
    3840    <div class="clear"></div> 
    3941  </div> 
    40   {* 
    41                 <div class="thumbnailCategory"> 
    42                         <div class="illustration"> 
    43                         <a href="{$cat.URL}"> 
    44                                 <img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> 
    45                         </a> 
    46                         </div> 
    47                         <div class="description"> 
    48                                 <h3> 
    49                                         <a href="{$cat.URL}">{$cat.NAME}</a> 
    50                                         {if !empty($cat.icon_ts)} 
    51                                         <img title="{$cat.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent{if $cat.icon_ts.IS_CHILD_DATE}_by_child{/if}.png" alt="(!)"> 
    52                                         {/if} 
    53                                 </h3> 
    54                 <div class="text"> 
    55                                 {if isset($cat.INFO_DATES) } 
    56                                 <p class="dates">{$cat.INFO_DATES}</p> 
    57                                 {/if} 
    58                                 <p class="Nb_images">{$cat.CAPTION_NB_IMAGES}</p> 
    59                                 {if not empty($cat.DESCRIPTION)} 
    60                                 <p>{$cat.DESCRIPTION}</p> 
    61                                 {/if} 
    62                 </div> 
    63                         </div> 
    64                 </div> 
    65   *} 
    6642  </span> 
    6743  </li> 
  • extensions/flop_style/mainpage_categories/polaroid.tpl

    r16393 r16501  
    11{combine_css path="template-extension/flop_style/mainpage_categories/polaroid.css"} 
     2{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} 
     3{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} 
    24{html_style}{literal} 
    35ul.polaroids a { 
     
    1315<ul class="polaroids"> 
    1416{foreach from=$category_thumbnails item=cat} 
    15   <li> 
     17 {assign var=derivative value=$pwg->derivative($derivative_polaroid, $cat.representative.src_image)} 
     18 <li> 
    1619                        <a href="{$cat.URL}" title="{$cat.NAME|truncate:20:" [...]"|@replace:'"':' '}"> 
    17                                 <img src="{$pwg->derivative_url($derivative_polaroid, $cat.representative.src_image)}"  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" > 
     20                                <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if}  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" > 
    1821                        </a> 
    1922        </li> 
  • extensions/flop_style/mainpage_categories/popout_details.tpl

    r16393 r16501  
    11{combine_css path="template-extension/flop_style/mainpage_categories/popout_details.css"} 
     2{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} 
     3{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} 
    24{footer_script require='jquery'} 
    35{literal}  
     
    57var max_dim_height = 0; 
    68jQuery(window).load(function() { 
    7   $(".columns a img").each(function () { 
     9  jQuery(".columns a img").each(function () { 
    810    if (jQuery(this).height() > max_dim_height) 
    911      max_dim_height = jQuery(this).height() + 10; 
     
    2527<ul class="columns"> 
    2628{foreach from=$category_thumbnails item=cat} 
     29{assign var=derivative value=$pwg->derivative($derivative_params, $cat.representative.src_image)} 
    2730  <li> 
    2831      <a href="{$cat.URL}"> 
    29         <img src="{$pwg->derivative_url($derivative_params, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> 
     32        <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> 
    3033      </a> 
    3134      <div class="info"> 
  • extensions/flop_style/mainpage_categories/spotlight.tpl

    r16393 r16501  
    11{combine_css path="template-extension/flop_style/mainpage_categories/spotlight.css"} 
     2{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} 
     3{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} 
    24{footer_script require='jquery'}{literal} 
    3 $(document).ready(function () { 
     5jQuery(document).ready(function () { 
    46  
    57    //loop through all the children in #items 
    68    //save title value to a span and then remove the value of the title to avoid tooltips 
    7     $('#items .item').each(function () { 
    8         title = $(this).attr('title'); 
    9         $(this).append('<span class="caption">' + title + '</span>');    
    10         $(this).attr('title',''); 
     9    jQuery('#items .item').each(function () { 
     10        title = jQuery(this).attr('title'); 
     11        jQuery(this).append('<span class="caption">' + title + '</span>');    
     12        jQuery(this).attr('title',''); 
    1113    }); 
    1214  
    13     $('#items .item').hover( 
     15    jQuery('#items .item').hover( 
    1416        function () { 
    1517            //set the opacity of all siblings 
    16             $(this).siblings().css({'opacity': '0.1'});  
     18            jQuery(this).siblings().css({'opacity': '0.1'});  
    1719              
    1820            //set the opacity of current item to full, and add the effect class 
    19             $(this).css({'opacity': '1.0'}).addClass('effect'); 
     21            jQuery(this).css({'opacity': '1.0'}).addClass('effect'); 
    2022              
    2123            //show the caption 
    22             $(this).children('.caption').show();     
     24            jQuery(this).children('.caption').show();     
    2325        }, 
    2426        function () { 
    2527            //hide the caption 
    26             $(this).children('.caption').hide();         
     28            jQuery(this).children('.caption').hide();         
    2729        } 
    2830    ); 
    2931      
    30     $('#items').mouseleave(function () { 
     32    jQuery('#items').mouseleave(function () { 
    3133        //reset all the opacity to full and remove effect class 
    32         $(this).children().fadeTo('100', '1.0').removeClass('effect');       
     34        jQuery(this).children().fadeTo('100', '1.0').removeClass('effect');       
    3335    }); 
    3436      
    3537}); 
    36 $(document).ready(function() { 
    37 var max_dim_width = 0; 
    38 var max_dim_height = 0; 
    39   $(".item img").each(function () { 
    40     if (jQuery(this).height() > max_dim_height) 
    41       max_dim_height = jQuery(this).height() + 10; 
    42     if (jQuery(this).width() > max_dim_width) 
    43       max_dim_width = jQuery(this).width() + 10; 
    44  
    45     jQuery(".item, .item img") 
    46       .css('width', max_dim_width+'px') 
    47       .css('height', max_dim_height+'px'); 
    48   }); 
    49 }); 
    5038 
    5139{/literal}{/footer_script} 
     40{define_derivative name='spotlight' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true} 
     41 
    5242<div id="items"> 
    5343{foreach from=$category_thumbnails item=cat} 
    54                         <a href="{$cat.URL}" class="item" title="{$cat.NAME|@replace:'"':' '}{if not empty($cat.DESCRIPTION)} - {$cat.DESCRIPTION|@replace:'"':' '}{/if}"> 
    55                                 <img src="{$pwg->derivative_url($derivative_params, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" > 
    56                         </a> 
     44{assign var=derivative value=$pwg->derivative($spotlight, $cat.representative.src_image)} 
     45  <a href="{$cat.URL}" class="item" title="{$cat.NAME|@replace:'"':' '}{if not empty($cat.DESCRIPTION)} - {$cat.DESCRIPTION|@replace:'"':' '}{/if}" style="{assign var=sz value=$derivative->get_size()}width:{$sz[0]}px;height:{$sz[1]}px"> 
     46    <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" {$derivative->get_size_htm()}> 
     47  </a> 
    5748{/foreach} 
    5849</div> 
  • extensions/flop_style/thumbnails/fancy_hover.tpl

    r16393 r16501  
    11{combine_css path="template-extension/flop_style/thumbnails/fancy_hover.css"} 
    22{combine_script id='jquery' path='themes/default/js/jquery.min.js'} 
     3{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} 
     4{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} 
    35{define_derivative name='derivative_fh' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true} 
    46{html_head} 
    57  {literal} 
    68<script type="text/javascript"> 
    7 $(document).ready(function(){  
     9jQuery(document).ready(function(){  
    810$("ul.thumbnails li").hover(function() { 
    911        $(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/  
     
    5052{if !empty($thumbnails)} 
    5153{strip}{foreach from=$thumbnails item=thumbnail} 
     54{assign var=derivative value=$pwg->derivative($derivative_fh, $thumbnail.src_image)} 
    5255        <li> 
    5356    <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}"> 
    54       <img src="{$pwg->derivative_url($derivative_fh, $thumbnail.src_image)}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
     57      <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if} class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
    5558    </a> 
    5659        </li> 
  • extensions/flop_style/thumbnails/jPolaroid.tpl

    r16393 r16501  
    22{combine_css path="template-extension/flop_style/mainpage_categories/jPolaroid/jpolaroid.minified.css"} 
    33{combine_script id="jquery.jpolaroid.minified" load="header" path="template-extension/flop_style/mainpage_categories/jPolaroid/jquery.jpolaroid.min.js"} 
     4{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} 
     5{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} 
    46{html_head} 
    57  {literal} 
     
    3234{if !empty($thumbnails)} 
    3335{strip}{foreach from=$thumbnails item=thumbnail} 
     36{assign var=derivative value=$pwg->derivative($derivative_jPolaroid, $thumbnail.src_image)} 
    3437        <li> 
    35                         <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}"> 
    36                                 <img src="{$pwg->derivative_url($derivative_jPolaroid, $thumbnail.src_image)}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
    37                         </a> 
     38    <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}"> 
     39      <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if} class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
     40    </a> 
    3841        </li> 
    3942{/foreach}{/strip} 
  • extensions/flop_style/thumbnails/polaroid.tpl

    r16393 r16501  
    11{combine_css path="template-extension/flop_style/thumbnails/polaroid.css"} 
     2{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} 
     3{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} 
    24{html_style}{literal} 
    35ul.thumbnails a { 
     
    1416{if !empty($thumbnails)} 
    1517{strip}{foreach from=$thumbnails item=thumbnail} 
     18{assign var=derivative value=$pwg->derivative($derivative_polaroid, $thumbnail.src_image)} 
    1619        <li> 
    17                         <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}"> 
    18                                 <img src="{$pwg->derivative_url($derivative_polaroid, $thumbnail.src_image)}"  alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
     20                        <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:20:" [...]"|@replace:'"':' '}{/if}"> 
     21                                <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if}  alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
    1922                        </a> 
    2023        </li> 
Note: See TracChangeset for help on using the changeset viewer.