Changeset 12880


Ignore:
Timestamp:
Jan 14, 2012, 7:19:22 AM (9 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.