Changeset 26349


Ignore:
Timestamp:
12/29/13 22:23:57 (5 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.