mirrors/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2025-04-27 11:49:56 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

bug 2514 improve prev/next navigation navigation on picture page

Browse source 
git-svn-id: http://piwigo.org/svn/trunk@12880 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
rvelices 2012-01-14 06:19:22 +00:00
parent cac417c74b
commit c5969b786a
8 changed files with 39 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
template-extension/distributed/samples/my-picture.tpl
View file

@ -95,7 +95,7 @@ y.callService(
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'} {include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
</div> <!-- imageToolBar --> </div> <!-- imageToolBar -->
<div id="theImage"> <div id="imageWrap">
{$ELEMENT_CONTENT} {$ELEMENT_CONTENT}
{if isset($COMMENT_IMG)} {if isset($COMMENT_IMG)}

2
themes/Sylvia/theme.css
View file

@ -332,7 +332,7 @@
border: 0; border: 0;
} }
#theImage A, .illustration A, A.navThumb, A.navThumb { #imageWrap A, .illustration A, A.navThumb, A.navThumb {
border-bottom-width: 0; border-bottom-width: 0;
} }
.rateButtonStarFull, .rateButtonStarEmpty { .rateButtonStarFull, .rateButtonStarEmpty {

2
themes/clear/theme.css
View file

@ -23,7 +23,7 @@ H2, #menubar DT, #imageHeaderBar, #imageToolBar A:hover {
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
} }
#theImage IMG { #imageWrap IMG {
border: 3px solid #d3d3d3; border: 3px solid #d3d3d3;
} }

13
themes/dark/theme.css
View file

@ -7,6 +7,7 @@ INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ {
H2, #menubar DT { H2, #menubar DT {
color: #ffff80; color: #ffff80;
background-image: url(images/tableh1_bg.png);
} }
@ -20,13 +21,8 @@ BODY, H3, #imageToolBar A:hover {
background-color: #505050; background-color: #505050;
} }
H2, #menubar DT {
background-image: url(images/tableh1_bg.png);
}
#imageHeaderBar H2 { #imageHeaderBar H2 {
background-image: none; background-image: none;
border: 0;
} }
#imageHeaderBar { #imageHeaderBar {
@ -38,7 +34,7 @@ H2, #menubar DT {
border: 1px solid #000; border: 1px solid #000;
} }
H2, #menubar DT, #imageToolBar { #menubar DT, #imageToolBar {
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
@ -50,11 +46,8 @@ FIELDSET, INPUT, SELECT, TEXTAREA,
.thumbnails .wrap2:hover, .thumbnails .wrap2:hover,
.content .thumbnailCategories .thumbnailCategory:hover, .content .thumbnailCategories .thumbnailCategory:hover{
.content .thumbnailCategories .thumbnailCategory:hover A {
background-color: #faebd7;
border-color: yellow; /* thumbnails border color when mouse cursor is over it */ border-color: yellow; /* thumbnails border color when mouse cursor is over it */
color: black;
} }

2
themes/default/template/picture.tpl
View file

@ -79,7 +79,7 @@ y.callService(
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'} {include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
</div>{*<!-- imageToolBar -->*} </div>{*<!-- imageToolBar -->*}
<div id="theImage"> <div id="imageWrap">
{$ELEMENT_CONTENT} {$ELEMENT_CONTENT}
{if isset($COMMENT_IMG)} {if isset($COMMENT_IMG)}

28
themes/default/template/picture_content.tpl
View file

@ -1,10 +1,10 @@
<img src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()} alt="{$ALT_IMG}" id="theMainImage" <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()}"
{if isset($COMMENT_IMG)} {if isset($COMMENT_IMG)}
title="{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}" {else} title="{$current.TITLE|@replace:'"':' '} - {$ALT_IMG}" title="{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}" {else} title="{$current.TITLE|@replace:'"':' '} - {$ALT_IMG}"
{/if}> {/if}>
{if count($current.unique_derivatives)>1} {if count($current.unique_derivatives)>1}
{footer_script}{literal} {footer_script}{literal}
function changeImgSrc(url,type,display) function changeImgSrc(url,typeSave,typeMap,typeDisplay)
{ {
var theImg = document.getElementById("theMainImage"); var theImg = document.getElementById("theMainImage");
if (theImg) if (theImg)
@ -12,9 +12,10 @@ function changeImgSrc(url,type,display)
theImg.removeAttribute("width");theImg.removeAttribute("height"); theImg.removeAttribute("width");theImg.removeAttribute("height");
theImg.src = url; theImg.src = url;
var elt = document.getElementById("derivativeSwitchLink"); var elt = document.getElementById("derivativeSwitchLink");
if (elt) elt.innerHTML = display; if (elt) elt.innerHTML = typeDisplay;
theImg.useMap = "#map"+typeMap;
} }
document.cookie = 'picture_deriv=' + type; document.cookie = 'picture_deriv=' + typeSave;
} }
function toggleDerivativeSwitchBox() function toggleDerivativeSwitchBox()
@ -35,10 +36,23 @@ function toggleDerivativeSwitchBox()
<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()">{$current.selected_derivative->get_type()|@translate}</a> <a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()">{$current.selected_derivative->get_type()|@translate}</a>
<div id="derivativeSwitchBox" onclick="toggleDerivativeSwitchBox()" style="display:none"> <div id="derivativeSwitchBox" onclick="toggleDerivativeSwitchBox()" style="display:none">
{foreach from=$current.unique_derivatives item=derivative key=derivative_type} {foreach from=$current.unique_derivatives item=derivative key=derivative_type}
<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> <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>
{/foreach} {/foreach}
{if isset($U_ORIGINAL)} {if isset($U_ORIGINAL)}
<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> <a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" rel="nofollow">{'original'|@translate}</a>
{/if} {/if}
</div> </div>
{/if} {/if}
{foreach from=$current.unique_derivatives item=derivative key=derivative_type}{strip}
<map name="map{$derivative->get_type()}" id="map{$derivative->get_type()}">
{assign var='size' value=$derivative->get_size()}
{if isset($previous)}
<area shape=rect coords="0,0,{$size[0]/4|@intval},{$size[1]}" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" alt="{$previous.TITLE}">
{/if}
<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}">
{if isset($next)}
<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}">
{/if}
</map>
{/strip}{/foreach}

2
themes/default/template/slideshow.tpl
View file

@ -14,7 +14,7 @@
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'} {include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
</div> </div>
<div id="theImage"> <div id="imageWrap">
{$ELEMENT_CONTENT} {$ELEMENT_CONTENT}
{if isset($COMMENT_IMG)} {if isset($COMMENT_IMG)}
<p class="showlegend">{$COMMENT_IMG}</p> <p class="showlegend">{$COMMENT_IMG}</p>

24
themes/default/theme.css
View file

@ -214,9 +214,10 @@ TD.calDayHead {
} }
.thumbnailCategories LI { .thumbnailCategories LI {
margin:0; margin: 0;
padding:0; padding: 0;
float:left; float: left;
width: 49.7%; /* 49.7% for 2 per line, 33.2% for 3 per line*/
} }
.thumbnailCategory { .thumbnailCategory {
@ -328,7 +329,7 @@ TD.calDayHead {
#imageToolBar { #imageToolBar {
text-align: center; text-align: center;
clear: both; clear: both;
margin-bottom: 4px; margin-bottom: 2px;
padding: 0; padding: 0;
height: 28px; height: 28px;
} }
@ -342,7 +343,7 @@ TD.calDayHead {
padding: 0.2em; padding: 0.2em;
position: absolute; position: absolute;
left: 5px; left: 5px;
top: 100px; top: 10%;
} }
#derivativeSwitchBox, #sortOrderBox { #derivativeSwitchBox, #sortOrderBox {
@ -351,12 +352,13 @@ TD.calDayHead {
z-index: 100; z-index: 100;
} }
#theImage { #imageWrap {
clear: left; clear: left;
text-align: center; text-align: center;
position: relative; /*so that the drivative switch link is positioned relative to us*/
} }
#theImage>IMG { #imageWrap>IMG {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border: 0; border: 0;
@ -418,7 +420,7 @@ TD.calDayHead {
} }
.contentWithMenu #imageToolBar, .contentWithMenu #imageToolBar,
.contentWithMenu #theImage { .contentWithMenu #imageWrap {
clear: none; clear: none;
} }
@ -694,12 +696,6 @@ IMG.ui-datepicker-trigger {
height: 140px; /* max thumbnail height + 2px */ height: 140px; /* max thumbnail height + 2px */
} }
/* Category thumbnails on main page */
.thumbnailCategories LI {
width: 49.7%; /* 49.7% for 2 per line, 33.2% for 3 per line*/
}
/* Set defaults for thumbnails legend */ /* Set defaults for thumbnails legend */
.thumbnails SPAN.thumbLegend { .thumbnails SPAN.thumbLegend {
display: block; /* display: none; if you don't want legend */ display: block; /* display: none; if you don't want legend */