Changeset 16393


Ignore:
Timestamp:
07/06/12 16:32:18 (7 years ago)
Author:
flop25
Message:

update for 2.4 : really amazing !

Location:
extensions/flop_style
Files:
1 deleted
18 edited

Legend:

Unmodified
Added
Removed
  • extensions/flop_style/mainpage_categories/captify_mini.css

    r9850 r16393  
    3535.wrap1 { 
    3636        display: inline-block; 
    37         margin: 0 7px 5px; 
    38         text-align: center; 
     37  margin: 8px 4px; 
     38  text-align: center; 
    3939        vertical-align: top; 
    4040} 
     
    4242        padding-left:auto; 
    4343        padding-right:auto; 
    44         padding: 5px; 
     44        margin-top: 5px; 
    4545        list-style: none outside none; 
    4646        text-align: center; 
     
    5151        display:inline; 
    5252        text-align:center; 
    53         margin-left:10px; 
    5453} 
    5554 
  • extensions/flop_style/mainpage_categories/captify_mini.tpl

    r9818 r16393  
    3131  {/literal} 
    3232{/html_head} 
     33{assign var=crop value=$derivative_params->sizing->max_crop} 
     34{if $crop==1} 
     35{assign var=crop value=true} 
     36{assign var=width value=$derivative_params->max_width()} 
     37{else} 
     38{assign var=crop value=false} 
     39{assign var=width value=99999} 
     40{/if} 
     41{define_derivative name='derivative_captify_mini' width=$width height=$derivative_params->max_height() crop=$crop} 
    3342 
    3443<ul class="thumbnailCategories"> 
     
    3645  <li class="{cycle values="cat_1,cat_2,cat_3,cat_4"}" > 
    3746                        <span class="wrap1"><a href="{$cat.URL}"> 
    38                                 <img src="{$cat.TN_SRC}" class="captify" alt="{$cat.NAME|truncate:38:" [...]"}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" > 
     47                                <img src="{$pwg->derivative_url($derivative_captify_mini, $cat.representative.src_image)}" class="captify" alt="{$cat.NAME|truncate:38:" [...]"}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" > 
    3948                        </a></span> 
    4049        </li> 
  • extensions/flop_style/mainpage_categories/jPolaroid.tpl

    r12673 r16393  
    2020  {/literal} 
    2121{/html_head} 
     22{assign var=crop value=$derivative_params->sizing->max_crop} 
     23{if $crop==1} 
     24{assign var=crop value=true} 
     25{assign var=width value=$derivative_params->max_width()} 
     26{else} 
     27{assign var=crop value=false} 
     28{assign var=width value=99999} 
     29{/if} 
     30{define_derivative name='derivative_jPolaroid' width=$width height=$derivative_params->max_height() crop=$crop} 
    2231 
    2332<ul class="jpolaroid"> 
     
    2534  <li> 
    2635                        <a href="{$cat.URL}" title="{$cat.NAME|@replace:'"':' '}"> 
    27                                 <img src="{$cat.TN_SRC}"  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" > 
     36                                <img src="{$pwg->derivative_url($derivative_jPolaroid, $cat.representative.src_image)}"  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" > 
    2837                        </a> 
    2938        </li> 
  • extensions/flop_style/mainpage_categories/medium_cat.css

    r12673 r16393  
    2222} 
    2323#content div.thumbnailCategory div.illustration { 
    24         width:auto; 
    25         height:auto; 
    26         /*height:135px;*/ 
    2724        text-align:center; 
    2825        overflow: inherit; 
     
    3431#content div.thumbnailCategory div.description { 
    3532        width:auto; 
    36         height:auto; 
    3733        text-align:center; 
    3834        overflow:inherit; 
     
    4238        padding-left:0; 
    4339        padding-right:0; 
    44         height:auto; 
    4540} 
    4641#content .thumbnailCategory div.illustration a { 
     
    6661  border-width: 2px; 
    6762} 
     63#content div.thumbnailCategory:hover { 
     64  border-color: #777777 #CCCCCC #CCCCCC #777777; 
     65} 
    6866#content div.thumbnailCategory * { 
    6967        vertical-align: middle; 
     
    7371        text-align:center; 
    7472} 
    75 #content div.thumbnailCategory div.illustration img { 
    76         height: 96px; 
    77 } 
  • extensions/flop_style/mainpage_categories/medium_cat.tpl

    r9720 r16393  
    11{combine_css path="template-extension/flop_style/mainpage_categories/medium_cat.css"} 
     2{html_style}{literal} 
     3.thumbnailCategory .illustration { 
     4        width:{/literal}{$derivative_params->max_width()+5}{literal}px; 
     5} 
     6 
     7.thumbnailCategory .description { 
     8        height:5em; 
     9} 
     10{/literal}{/html_style} 
    211 
    312<ul class="thumbnailCategories"> 
     
    716                        <div class="illustration"> 
    817                        <a href="{$cat.URL}"> 
    9                                 <img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> 
     18                                <img src="{$pwg->derivative_url($derivative_params, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> 
    1019                        </a> 
    1120                        </div> 
  • extensions/flop_style/mainpage_categories/mosaic.css

    r9831 r16393  
    99        position:relative; 
    1010        overflow:hidden; 
    11         width:400px; 
    12         height:250px; 
    1311        margin:10px; 
    1412        background:#111 url(progress.gif) no-repeat center center; 
     
    6361        text-decoration:none; 
    6462} 
    65 .mosaic-backdrop img { 
    66         width:400px; 
    67         height:250px; 
    68 } 
  • extensions/flop_style/mainpage_categories/mosaic.tpl

    r9834 r16393  
    1313{/literal} 
    1414{/html_head} 
     15{html_style}{literal} 
     16.mosaic-block, .mosaic-backdrop img  { 
     17        width:{/literal}{$derivative_params->max_width()}{literal}px; 
     18        height:{/literal}{$derivative_params->max_height()}{literal}px; 
     19} 
     20{/literal}{/html_style} 
     21 
     22{define_derivative name='derivative_mosaic' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true} 
    1523<div id="mosaic-content"> {foreach from=$category_thumbnails item=cat} 
    1624  <div class="mosaic-block bar"> <a href="{$cat.URL}" class="mosaic-overlay"> 
     
    2735    </div> 
    2836    </a> 
    29     <div class="mosaic-backdrop"> <img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> </div> 
     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> 
    3038  </div> 
    3139  {/foreach} 
  • extensions/flop_style/mainpage_categories/picpile_cat.tpl

    r9818 r16393  
    11{combine_css path="template-extension/flop_style/mainpage_categories/picpile_cat.css"} 
    22{if $themeconf.name == "Sylvia"} 
    3 {html_head} 
     3{html_style} 
    44  {literal} 
    5   <style> 
    65  #theCategoryPage .content { 
    76      margin: 21px 10px 0 290px !important; 
    87  } 
    9         </style> 
    108  {/literal} 
    11 {/html_head} 
     9{/html_style} 
    1210{/if} 
     11{define_derivative name='derivative_picpile_cat' width=160 height=120 crop=true} 
     12{html_style} 
     13  {literal} 
     14  .picRotated { 
     15    width:{/literal}{$derivative_picpile_cat->max_width()+18}{literal}px; 
     16    height:{/literal}{$derivative_picpile_cat->max_height()+18}{literal}px; 
     17  } 
     18  .albumHolder { 
     19    width:{/literal}{$derivative_picpile_cat->max_width()+10}{literal}px; 
     20    height:{/literal}{$derivative_picpile_cat->max_height()+10}{literal}px; 
     21  } 
     22  .wrap1 { 
     23    width:{/literal}{$derivative_picpile_cat->max_width()+30}{literal}px; 
     24    height:{/literal}{$derivative_picpile_cat->max_height()+60}{literal}px; 
     25  } 
     26   
     27  {/literal} 
     28{/html_style} 
     29 
    1330<ul class="thumbnailCategories"> 
    1431  {foreach from=$category_thumbnails item=cat} 
     32  {assign var=der_picpile_cat value=$pwg->derivative($derivative_picpile_cat, $cat.representative.src_image)} 
    1533  <li> 
    1634  <span class="wrap1"><div class="albumHolder"> 
    1735    <div class="picRotated"></div> 
    18     <div class="album"> <a class="ajax" href="{$cat.URL}"> <span title="Browse Album" class="highlight"></span> <img width="160" height="120" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" alt="{$cat.TN_ALT}" src="{$cat.TN_SRC}"> <span title="Contains {$cat.CAPTION_NB_IMAGES} images" class="albumCnt">{$cat.CAPTION_NB_IMAGES}</span> </a> </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> 
    1937    <div title="{$cat.NAME}" class="albumTitle">{$cat.NAME}</div> 
    2038    <div class="clear"></div> 
  • extensions/flop_style/mainpage_categories/polaroid.css

    r9834 r16393  
    77ul.polaroids { 
    88        list-style: none; 
    9         overflow: hidden; 
     9        overflow: visible; 
    1010        width: 100%; 
    1111        padding-top: 20px; 
     
    1616} 
    1717ul.polaroids li { 
    18         display: inline; 
     18        display: inline-block; 
    1919} 
    2020ul.polaroids a { 
    21         -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); 
     21        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.85); 
    2222        -moz-transform: rotate(-2deg); 
    2323        -webkit-transition: -webkit-transform .15s linear; 
    24         -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
     24        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.85); 
    2525        -webkit-transform: rotate(-2deg); 
    2626        -o-transition: -webkit-transform .15s linear; 
    27         -o-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
     27        -o-box-shadow: 0 3px 6px rgba(0,0,0,.85); 
    2828        -o-transform:rotate(-2deg); 
    29         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); 
     29        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.85); 
    3030  text-shadow: 0 1px 1px #CCC; 
    3131        background: none repeat scroll 0 0 #FFFFFF; 
     
    3636        font-size: 18px; 
    3737        margin: 0 0 27px 30px; 
    38         padding: 10px 10px 15px; 
     38        padding: 8px 8px 10px; 
    3939        text-align: center; 
    4040        text-decoration: none; 
     
    8787} 
    8888ul.polaroids li a:hover { 
    89         -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); 
    90         -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
     89        box-shadow: 6px 6px 8px  rgba(0, 0, 0, 0.85); 
     90        -moz-box-shadow:  6px 6px 8px  rgba(0, 0, 0, 0.85); 
     91        -webkit-box-shadow: 6px 6px 8px rgba(0,0,0, 0.85); 
    9192        -moz-transform: scale(1.25); 
    9293        -webkit-transform: scale(1.25); 
  • extensions/flop_style/mainpage_categories/polaroid.tpl

    r9834 r16393  
    11{combine_css path="template-extension/flop_style/mainpage_categories/polaroid.css"} 
     2{html_style}{literal} 
     3ul.polaroids a { 
     4        height:{/literal}{$derivative_params->max_height()+30}{literal}px; 
     5} 
     6ul.polaroids li 
     7{ 
     8        height:{/literal}{$derivative_params->max_height()+70}{literal}px; 
     9} 
     10{/literal}{/html_style} 
    211 
     12{define_derivative name='derivative_polaroid' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true} 
    313<ul class="polaroids"> 
    414{foreach from=$category_thumbnails item=cat} 
    515  <li> 
    616                        <a href="{$cat.URL}" title="{$cat.NAME|truncate:20:" [...]"|@replace:'"':' '}"> 
    7                                 <img src="{$cat.TN_SRC}"  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" > 
     17                                <img src="{$pwg->derivative_url($derivative_polaroid, $cat.representative.src_image)}"  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" > 
    818                        </a> 
    919        </li> 
  • extensions/flop_style/mainpage_categories/popout_details.css

    r12580 r16393  
    2323        position: relative; 
    2424        filter: alpha(opacity=30); 
    25         opacity: 0.3; 
     25        opacity: 0.75; 
    2626        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*--IE8 Specific--*/ 
    2727} 
  • extensions/flop_style/mainpage_categories/popout_details.tpl

    r12673 r16393  
    2727  <li> 
    2828      <a href="{$cat.URL}"> 
    29         <img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> 
     29        <img src="{$pwg->derivative_url($derivative_params, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> 
    3030      </a> 
    3131      <div class="info"> 
  • extensions/flop_style/mainpage_categories/spotlight.tpl

    r10484 r16393  
    5353{foreach from=$category_thumbnails item=cat} 
    5454                        <a href="{$cat.URL}" class="item" title="{$cat.NAME|@replace:'"':' '}{if not empty($cat.DESCRIPTION)} - {$cat.DESCRIPTION|@replace:'"':' '}{/if}"> 
    55                                 <img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" > 
     55                                <img src="{$pwg->derivative_url($derivative_params, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" > 
    5656                        </a> 
    5757{/foreach} 
  • extensions/flop_style/thumbnails/fancy_hover.css

    r9834 r16393  
    33        list-style: none; 
    44        margin: 0; 
    5         overflow: hidden; 
     5        overflow: visible; 
    66        padding: 50px; 
     7  display: inline-block; 
    78} 
    89ul.thumbnails li { 
     
    2526        top: 0; 
    2627} 
    27 ul.thumbnails li img.hover { 
    28         background:url(thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect*/ 
    29         border: none; /* Get rid of border on hover */ 
     28.thumb_jpolaroid.hover { 
     29  box-shadow: 6px 6px 8px  rgba(0, 0, 0, 0.85); 
     30        -moz-box-shadow:  6px 6px 8px  rgba(0, 0, 0, 0.85); 
     31        -webkit-box-shadow: 6px 6px 8px rgba(0,0,0, 0.85); 
    3032} 
  • extensions/flop_style/thumbnails/fancy_hover.tpl

    r9826 r16393  
    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{define_derivative name='derivative_fh' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true} 
    34{html_head} 
    45  {literal} 
     
    910        $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/ 
    1011                .animate({ 
    11                         marginTop: '-110px', /* The next 4 lines will vertically align this image */  
    12                         marginLeft: '-110px', 
    13                         top: '50%', 
    14                         left: '50%', 
    15                         width: '174px', /* Set new width */ 
    16                         height: '174px', /* Set new height */ 
    17                         padding: '20px' 
     12                        marginTop: '-{/literal}{$derivative_fh->max_width()*1.25}{literal}px', /* The next 4 lines will vertically align this image */  
     13                        marginLeft: '-{/literal}{$derivative_fh->max_height()*1.25}{literal}px', 
     14                        top: '{/literal}{$derivative_fh->max_width()}{literal}px', 
     15                        left: '{/literal}{$derivative_fh->max_height()}{literal}px', 
     16                        width: '{/literal}{$derivative_fh->max_width()+70}{literal}px', /* Set new width */ 
     17                        height: '{/literal}{$derivative_fh->max_height()+70}{literal}px', /* Set new height */ 
     18                        padding: '15px' 
    1819                }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */ 
    1920 
     
    2627                        top: '0', 
    2728                        left: '0', 
    28                         width: '100px', /* Set width back to default */ 
    29                         height: '100px', /* Set height back to default */ 
     29                        width: '{/literal}{$derivative_fh->max_width()}{literal}px', /* Set width back to default */ 
     30                        height: '{/literal}{$derivative_fh->max_height()}{literal}px', /* Set height back to default */ 
    3031                        padding: '5px' 
    3132                }, 400); 
     
    3637{/html_head} 
    3738 
     39{html_style}{literal} 
     40ul.thumbnails li img { 
     41        height:{/literal}{$derivative_fh->max_height()}{literal}px; 
     42        width:{/literal}{$derivative_fh->max_width()}{literal}px; 
     43} 
     44ul.thumbnails li 
     45{ 
     46        width:{/literal}{$derivative_fh->max_width()+10}{literal}px; 
     47        height:{/literal}{$derivative_fh->max_height()+10}{literal}px; 
     48} 
     49{/literal}{/html_style} 
    3850{if !empty($thumbnails)} 
    3951{strip}{foreach from=$thumbnails item=thumbnail} 
    4052        <li> 
    4153    <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}"> 
    42       <img src="{$thumbnail.TN_SRC}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
     54      <img src="{$pwg->derivative_url($derivative_fh, $thumbnail.src_image)}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
    4355    </a> 
    4456        </li> 
  • extensions/flop_style/thumbnails/jPolaroid.tpl

    r12673 r16393  
    2020  {/literal} 
    2121{/html_head} 
     22{assign var=crop value=$derivative_params->sizing->max_crop} 
     23{if $crop==1} 
     24{assign var=crop value=true} 
     25{assign var=width value=$derivative_params->max_width()} 
     26{else} 
     27{assign var=crop value=false} 
     28{assign var=width value=99999} 
     29{/if} 
     30{define_derivative name='derivative_jPolaroid' width=$width height=$derivative_params->max_height() crop=$crop} 
    2231 
    2332{if !empty($thumbnails)} 
     
    2534        <li> 
    2635                        <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}"> 
    27                                 <img src="{$thumbnail.TN_SRC}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
     36                                <img src="{$pwg->derivative_url($derivative_jPolaroid, $thumbnail.src_image)}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
    2837                        </a> 
    2938        </li> 
  • extensions/flop_style/thumbnails/polaroid.css

    r9834 r16393  
    4646        display: block; 
    4747        margin-bottom: 12px; 
    48         width: 118px; 
    4948} 
    5049ul.thumbnails a:after { 
     
    8887} 
    8988ul.thumbnails li a:hover { 
     89        box-shadow: 6px 6px 8px  rgba(0, 0, 0, 0.85); 
    9090        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); 
    9191        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
  • extensions/flop_style/thumbnails/polaroid.tpl

    r9821 r16393  
    11{combine_css path="template-extension/flop_style/thumbnails/polaroid.css"} 
     2{html_style}{literal} 
     3ul.thumbnails a { 
     4        height:{/literal}{$derivative_params->max_height()+30}{literal}px; 
     5} 
     6ul.thumbnails li 
     7{ 
     8        height:{/literal}{$derivative_params->max_height()+70}{literal}px; 
     9} 
     10{/literal}{/html_style} 
     11 
     12{define_derivative name='derivative_polaroid' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true} 
    213 
    314{if !empty($thumbnails)} 
     
    516        <li> 
    617                        <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}"> 
    7                                 <img src="{$thumbnail.TN_SRC}"  alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
     18                                <img src="{$pwg->derivative_url($derivative_polaroid, $thumbnail.src_image)}"  alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 
    819                        </a> 
    920        </li> 
Note: See TracChangeset for help on using the changeset viewer.