Changeset 12880


Ignore:
Timestamp:
01/14/12 07:19:22 (8 years ago)
Author:
rvelices
Message:

bug 2514 improve prev/next navigation navigation on picture page

Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/template-extension/distributed/samples/my-picture.tpl

    r12681 r12880  
    9696</div> <!-- imageToolBar --> 
    9797 
    98 <div id="theImage"> 
     98<div id="imageWrap"> 
    9999{$ELEMENT_CONTENT} 
    100100 
  • trunk/themes/Sylvia/theme.css

    r12764 r12880  
    333333} 
    334334 
    335 #theImage A, .illustration A, A.navThumb, A.navThumb {  
     335#imageWrap A, .illustration A, A.navThumb, A.navThumb {  
    336336        border-bottom-width: 0;  
    337337} 
  • trunk/themes/clear/theme.css

    r12873 r12880  
    2424} 
    2525 
    26 #theImage IMG { 
     26#imageWrap IMG { 
    2727  border: 3px solid #d3d3d3; 
    2828} 
  • trunk/themes/dark/theme.css

    r12873 r12880  
    88H2, #menubar DT { 
    99        color: #ffff80; 
     10        background-image: url(images/tableh1_bg.png); 
    1011} 
    1112 
     
    2122} 
    2223 
    23 H2, #menubar DT { 
    24         background-image: url(images/tableh1_bg.png); 
    25 } 
    26  
    2724#imageHeaderBar H2 { 
    2825        background-image: none; 
    29         border: 0; 
    3026} 
    3127 
     
    3935} 
    4036 
    41 H2, #menubar DT, #imageToolBar { 
     37#menubar DT, #imageToolBar { 
    4238        border-bottom: 1px solid #000; 
    4339} 
     
    5147 
    5248.thumbnails .wrap2:hover, 
    53 .content .thumbnailCategories .thumbnailCategory:hover, 
    54 .content .thumbnailCategories .thumbnailCategory:hover A { 
    55         background-color: #faebd7; 
     49.content .thumbnailCategories .thumbnailCategory:hover{ 
    5650        border-color: yellow;   /* thumbnails border color when mouse cursor is over it */ 
    57         color: black; 
    5851} 
    5952 
  • trunk/themes/default/template/picture.tpl

    r12878 r12880  
    8080</div>{*<!-- imageToolBar -->*} 
    8181 
    82 <div id="theImage"> 
     82<div id="imageWrap"> 
    8383{$ELEMENT_CONTENT} 
    8484 
  • trunk/themes/default/template/picture_content.tpl

    r12865 r12880  
    1 <img src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()} alt="{$ALT_IMG}" id="theMainImage" 
     1<img src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" 
    22{if isset($COMMENT_IMG)} 
    33        title="{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}" {else} title="{$current.TITLE|@replace:'"':' '} - {$ALT_IMG}" 
     
    55{if count($current.unique_derivatives)>1} 
    66{footer_script}{literal} 
    7 function changeImgSrc(url,type,display) 
     7function changeImgSrc(url,typeSave,typeMap,typeDisplay) 
    88{ 
    99        var theImg = document.getElementById("theMainImage"); 
     
    1313                theImg.src = url; 
    1414                var elt = document.getElementById("derivativeSwitchLink"); 
    15                 if (elt) elt.innerHTML = display; 
     15                if (elt) elt.innerHTML = typeDisplay; 
     16                theImg.useMap = "#map"+typeMap; 
    1617        } 
    17         document.cookie = 'picture_deriv=' + type; 
     18        document.cookie = 'picture_deriv=' + typeSave; 
    1819} 
    1920 
     
    3637<div id="derivativeSwitchBox" onclick="toggleDerivativeSwitchBox()" style="display:none"> 
    3738{foreach from=$current.unique_derivatives item=derivative key=derivative_type} 
    38 <a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}', '{$derivative_type}', '{$derivative->get_type()|@translate|@escape:javascript}')" style="cursor:pointer">{$derivative->get_type()|@translate} ({$derivative->get_size_hr()})</a><br> 
     39<a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}','{$derivative->get_type()|@translate|@escape:javascript}')">{$derivative->get_type()|@translate} ({$derivative->get_size_hr()})</a><br> 
    3940{/foreach} 
    4041{if isset($U_ORIGINAL)} 
    41 <a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" title="{'Click on the photo to see it in high definition'|@translate}">{'original'|@translate}</a> 
     42<a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" rel="nofollow">{'original'|@translate}</a> 
    4243{/if} 
    4344</div> 
    4445{/if} 
     46 
     47{foreach from=$current.unique_derivatives item=derivative key=derivative_type}{strip} 
     48<map name="map{$derivative->get_type()}" id="map{$derivative->get_type()}"> 
     49{assign var='size' value=$derivative->get_size()} 
     50{if isset($previous)} 
     51<area shape=rect coords="0,0,{$size[0]/4|@intval},{$size[1]}" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" alt="{$previous.TITLE}"> 
     52{/if} 
     53<area shape=rect coords="{$size[0]/4|@intval},0,{$size[0]/1.34|@intval},{$size[1]/4|@intval}" href="{$U_UP}" title="{'Thumbnails'|@translate}" alt="{'Thumbnails'|@translate}"> 
     54{if isset($next)} 
     55<area shape=rect coords="{$size[0]/1.33|@intval},0,{$size[0]},{$size[1]}" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" alt="{$next.TITLE}"> 
     56{/if} 
     57</map> 
     58{/strip}{/foreach} 
  • trunk/themes/default/template/slideshow.tpl

    r8119 r12880  
    1515</div> 
    1616 
    17 <div id="theImage"> 
     17<div id="imageWrap"> 
    1818  {$ELEMENT_CONTENT} 
    1919  {if isset($COMMENT_IMG)} 
  • trunk/themes/default/theme.css

    r12878 r12880  
    215215 
    216216.thumbnailCategories LI { 
    217         margin:0; 
    218         padding:0; 
    219         float:left; 
     217        margin: 0; 
     218        padding: 0; 
     219        float: left; 
     220        width: 49.7%;    /* 49.7% for 2 per line, 33.2% for 3 per line*/ 
    220221} 
    221222 
     
    329330        text-align: center; 
    330331        clear: both; 
    331         margin-bottom: 4px; 
     332        margin-bottom: 2px; 
    332333        padding: 0; 
    333334        height: 28px; 
     
    343344        position: absolute; 
    344345        left: 5px; 
    345         top: 100px; 
     346        top: 10%; 
    346347} 
    347348 
     
    352353} 
    353354 
    354 #theImage { 
     355#imageWrap { 
    355356        clear: left; 
    356357        text-align: center; 
    357 } 
    358  
    359 #theImage>IMG { 
     358        position: relative; /*so that the drivative switch link is positioned relative to us*/ 
     359} 
     360 
     361#imageWrap>IMG { 
    360362        display: block; 
    361363        margin: 0 auto; 
     
    419421 
    420422.contentWithMenu #imageToolBar,  
    421 .contentWithMenu #theImage {  
     423.contentWithMenu #imageWrap {  
    422424        clear: none; 
    423425} 
     
    695697} 
    696698 
    697  
    698 /* Category thumbnails on main page */ 
    699 .thumbnailCategories LI { 
    700   width: 49.7%;    /* 49.7% for 2 per line, 33.2% for 3 per line*/ 
    701 } 
    702  
    703699/* Set defaults for thumbnails legend */ 
    704700.thumbnails SPAN.thumbLegend { 
Note: See TracChangeset for help on using the changeset viewer.