Changeset 26349


Ignore:
Timestamp:
Dec 29, 2013, 10:23:57 PM (7 years ago)
Author:
rvelices
Message:

smart pocket new thumbnail display

Location:
trunk/themes/smartpocket
Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/themes/smartpocket/js/smartpocket.js

    r25938 r26349  
    2828                        }
    2929                });
    30                 $(window).bind('orientationchange', set_thumbnails_width);
    31                 set_thumbnails_width();
     30                var spThumbs = new SPThumbs(SPThumbsOpts);
    3231  });
    3332}(window, window.jQuery, window.Code.PhotoSwipe));
    3433
    35 function set_thumbnails_width() {
    36         var dpr = 1 //window.devicePixelRatio>1 ? window.devicePixelRatio : 1
    37                 , nb_thumbs = Math.max(2, Math.ceil($('.thumbnails').width() / (var_thumb_width/dpr+2*5)))
    38                 , width = Math.floor(1000000 / nb_thumbs) / 10000;
    39         $('.thumbnails li').css('width', width+'%');
    40 }
    41 
  • trunk/themes/smartpocket/template/thumbnails.tpl

    r24514 r26349  
    11{if !empty($thumbnails)}
     2{$row_height=216}
     3{$hmargin=4}
     4{$vmargin=5}
     5{$container_margin=-10}
     6
    27{combine_script id='klass' path='themes/smartpocket/js/klass.min.js'}
    38{combine_script id='photoswipe' path='themes/smartpocket/js/code.photoswipe.jquery.min.js' require='klass,jquery.mobile'}
    49{combine_script id='smartpocket' path='themes/smartpocket/js/smartpocket.js' require='photoswipe'}
    5 {combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'}
    6 {combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'}
     10{combine_script id='sp.thumb.arrange' path='themes/smartpocket/js/thumb.arrange.js' require='jquery' load='footer'}
    711{footer_script}
    8   var var_loop = {if $smartpocket.loop}true{else}false{/if}, var_autohide = {$smartpocket.autohide}, var_trad = "{'More Information'|@translate}", var_thumb_width={$thumbnail_derivative_params->max_width()};
     12var var_loop = {if $smartpocket.loop}true{else}false{/if}, var_autohide = {$smartpocket.autohide}, var_trad = "{'More Information'|@translate}";
     13var SPThumbsOpts ={ hMargin:{$hmargin},rowHeight:{$row_height}};
    914{/footer_script}
    10 
     15{$thumb_picker->init($row_height)}
     16{html_style}
     17.thumbnails .liEmpty{ display:none}
     18.thumbnails LI{ margin-left:{$hmargin}px; margin-bottom:{$vmargin}px}
     19.thumbnails { margin:0 {$container_margin}px 0 {$container_margin-$hmargin}px}
     20{/html_style}
    1121<ul class="thumbnails">
    1222{foreach from=$thumbnails item=thumbnail}{strip}
    13 {assign var=derivative value=$pwg->derivative($thumbnail_derivative_params, $thumbnail.src_image)}
     23{$derivative=$thumb_picker->pick($thumbnail.src_image)}
    1424{if isset($page_selection[$thumbnail.id]) and !isset($thumbnail.representative_ext)}
    15   <li>
    16     <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" data-picture-url="{$thumbnail.URL}" rel="external">
    17      <img {if !$derivative->is_cached()}data-{/if}src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}">
    18     </a>
    19   </li>
    20 {elseif isset($thumbnail.representative_ext)}
    21   <li>
    22     <a href="{$thumbnail.URL}" target="_blank" onClick="window.location='{$thumbnail.URL}'">
    23      <img {if !$derivative->is_cached()}data-{/if}src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}">
    24     </a>
    25   </li>
     25        <li class="liVisible">
     26{if !isset($thumbnail.representative_ext)}
     27                <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" data-picture-url="{$thumbnail.URL}" rel="external">
    2628{else}
    27   <li style="display:none;">
    28     <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" rel="external"></a>
    29   </li>
     29                <a href="{$thumbnail.URL}" target="_blank" onClick="window.location='{$thumbnail.URL}'">
    3030{/if}
     31                 <img src="{$derivative->get_url()}" {$derivative->get_size_htm()} alt="{$thumbnail.TN_ALT}">
     32{else}
     33        <li class="liEmpty">
     34                <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" rel="external">
     35{/if}
     36        </a></li>
    3137{/strip}{/foreach}
    3238</ul>
  • trunk/themes/smartpocket/theme.css

    r23745 r26349  
    1717.ui-field-contain, .ui-br { padding: 5px; border: 0 !important; }
    1818
    19 .thumbnails { list-style: none; padding: 0; margin: 0; }
     19.thumbnails { list-style: none; padding: 0}
    2020.thumbnails:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
    21 .thumbnails li { float: left;  }
    22 .thumbnails li a { display: block; margin: 5px; }
    23 .thumbnails li img { display: block; width: 100%; height: auto; }
     21.thumbnails li {
     22        float: left;
     23        position: relative;
     24        overflow: hidden;
     25        display: inline;
     26}
     27.thumbnails li a {
     28        position: absolute;
     29}
     30
    2431#more_link {
    2532  color: #FFFFFF;
  • trunk/themes/smartpocket/themeconf.inc.php

    r24928 r26349  
    2323*/
    2424
     25
     26class SPThumbPicker
     27{
     28  var $candidates;
     29  var $default;
     30  var $height;
     31 
     32  function init($height)
     33  {
     34    $this->candidates = array();
     35    foreach( ImageStdParams::get_defined_type_map() as $params)
     36    {
     37      if ($params->max_height() < $height || $params->sizing->max_crop)
     38        continue;
     39      if ($params->max_height() > 3*$height)
     40        break;
     41      $this->candidates[] = $params;
     42    }
     43    $this->default = ImageStdParams::get_custom($height*3, $height, 1, 0, $height );
     44    $this->height = $height;
     45  }
     46 
     47  function pick($src_image)
     48  {
     49    $ok = false;
     50    foreach($this->candidates as $candidate)
     51    {
     52      $deriv = new DerivativeImage($candidate, $src_image);
     53      $size = $deriv->get_size();
     54      if ($size[1]>=$row_height-2)
     55      {
     56        $ok = true;
     57        break;
     58      }
     59    }
     60    if (!$ok)
     61    {
     62      $deriv = new DerivativeImage($this->default, $src_image);
     63    }
     64    return $deriv;
     65  }
     66}
     67
    2568//Retrive all pictures on thumbnails page
    2669add_event_handler('loc_index_thumbnails_selection', 'sp_select_all_thumbnails');
     
    3174
    3275  $template->assign('page_selection', array_flip($selection));
    33 
     76  $template->assign('thumb_picker', new SPThumbPicker() );
    3477  return $page['items'];
    3578}
     
    4992{
    5093  $screen_size = explode('x', $_COOKIE['screen_size']);
    51   $derivative_params = new ImageStdParams;
    52   $derivative_params->load_from_db();
    53 
    54   foreach ($derivative_params->get_all_type_map() as $type => $map)
     94  foreach (ImageStdParams::get_all_type_map() as $type => $map)
    5595  {
    5696    if (max($map->sizing->ideal_size) >= max($screen_size) and min($map->sizing->ideal_size) >= min($screen_size))
Note: See TracChangeset for help on using the changeset viewer.