Changeset 16501


Ignore:
Timestamp:
Jul 8, 2012, 5:45:23 PM (8 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.