aboutsummaryrefslogtreecommitdiffstats
path: root/themes/default
diff options
context:
space:
mode:
authorrvelices <rv-github@modusoptimus.com>2012-01-14 06:19:22 +0000
committerrvelices <rv-github@modusoptimus.com>2012-01-14 06:19:22 +0000
commitc5969b786a88a2793c4174fb5429b60e1d86abdf (patch)
tree59179c14975ac834bf1523fcf42d0851cbb5d799 /themes/default
parentcac417c74bc6d5f528b356190561d244e9b4f93a (diff)
bug 2514 improve prev/next navigation navigation on picture page
git-svn-id: http://piwigo.org/svn/trunk@12880 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r--themes/default/template/picture.tpl2
-rw-r--r--themes/default/template/picture_content.tpl28
-rw-r--r--themes/default/template/slideshow.tpl2
-rw-r--r--themes/default/theme.css24
4 files changed, 33 insertions, 23 deletions
diff --git a/themes/default/template/picture.tpl b/themes/default/template/picture.tpl
index 6fb873771..2416e5973 100644
--- a/themes/default/template/picture.tpl
+++ b/themes/default/template/picture.tpl
@@ -79,7 +79,7 @@ y.callService(
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
</div>{*<!-- imageToolBar -->*}
-<div id="theImage">
+<div id="imageWrap">
{$ELEMENT_CONTENT}
{if isset($COMMENT_IMG)}
diff --git a/themes/default/template/picture_content.tpl b/themes/default/template/picture_content.tpl
index cc85a1e05..6a87d3fab 100644
--- a/themes/default/template/picture_content.tpl
+++ b/themes/default/template/picture_content.tpl
@@ -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)}
title="{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}" {else} title="{$current.TITLE|@replace:'"':' '} - {$ALT_IMG}"
{/if}>
{if count($current.unique_derivatives)>1}
{footer_script}{literal}
-function changeImgSrc(url,type,display)
+function changeImgSrc(url,typeSave,typeMap,typeDisplay)
{
var theImg = document.getElementById("theMainImage");
if (theImg)
@@ -12,9 +12,10 @@ function changeImgSrc(url,type,display)
theImg.removeAttribute("width");theImg.removeAttribute("height");
theImg.src = url;
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()
@@ -35,10 +36,23 @@ function toggleDerivativeSwitchBox()
<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()">{$current.selected_derivative->get_type()|@translate}</a>
<div id="derivativeSwitchBox" onclick="toggleDerivativeSwitchBox()" style="display:none">
{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}
{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}
</div>
-{/if} \ No newline at end of file
+{/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}
diff --git a/themes/default/template/slideshow.tpl b/themes/default/template/slideshow.tpl
index a310935a2..db360737c 100644
--- a/themes/default/template/slideshow.tpl
+++ b/themes/default/template/slideshow.tpl
@@ -14,7 +14,7 @@
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
</div>
-<div id="theImage">
+<div id="imageWrap">
{$ELEMENT_CONTENT}
{if isset($COMMENT_IMG)}
<p class="showlegend">{$COMMENT_IMG}</p>
diff --git a/themes/default/theme.css b/themes/default/theme.css
index bf7e9355d..5232b03a1 100644
--- a/themes/default/theme.css
+++ b/themes/default/theme.css
@@ -214,9 +214,10 @@ TD.calDayHead {
}
.thumbnailCategories LI {
- margin:0;
- padding:0;
- float:left;
+ margin: 0;
+ padding: 0;
+ float: left;
+ width: 49.7%; /* 49.7% for 2 per line, 33.2% for 3 per line*/
}
.thumbnailCategory {
@@ -328,7 +329,7 @@ TD.calDayHead {
#imageToolBar {
text-align: center;
clear: both;
- margin-bottom: 4px;
+ margin-bottom: 2px;
padding: 0;
height: 28px;
}
@@ -342,7 +343,7 @@ TD.calDayHead {
padding: 0.2em;
position: absolute;
left: 5px;
- top: 100px;
+ top: 10%;
}
#derivativeSwitchBox, #sortOrderBox {
@@ -351,12 +352,13 @@ TD.calDayHead {
z-index: 100;
}
-#theImage {
+#imageWrap {
clear: left;
text-align: center;
+ position: relative; /*so that the drivative switch link is positioned relative to us*/
}
-#theImage>IMG {
+#imageWrap>IMG {
display: block;
margin: 0 auto;
border: 0;
@@ -418,7 +420,7 @@ TD.calDayHead {
}
.contentWithMenu #imageToolBar,
-.contentWithMenu #theImage {
+.contentWithMenu #imageWrap {
clear: none;
}
@@ -694,12 +696,6 @@ IMG.ui-datepicker-trigger {
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 */
.thumbnails SPAN.thumbLegend {
display: block; /* display: none; if you don't want legend */