Ignore:
Timestamp:
Jul 6, 2012, 4:32:18 PM (12 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.