Changeset 12880

Timestamp:

Jan 14, 2012, 7:19:22 AM (12 years ago)

Author:

rvelices

Message:

bug 2514 improve prev/next navigation navigation on picture page

Location:

trunk

Files:

• template-extension/distributed/samples/my-picture.tpl (modified) (1 diff)
• themes/Sylvia/theme.css (modified) (1 diff)
• themes/clear/theme.css (modified) (1 diff)
• themes/dark/theme.css (modified) (4 diffs)
• themes/default/template/picture.tpl (modified) (1 diff)
• themes/default/template/picture_content.tpl (modified) (4 diffs)
• themes/default/template/slideshow.tpl (modified) (1 diff)
• themes/default/theme.css (modified) (6 diffs)

trunk/template-extension/distributed/samples/my-picture.tpl

@@ -96 +96 @@
 </div> <!-- imageToolBar -->
 
-<div id="theImage">
+<div id="imageWrap">
 {$ELEMENT_CONTENT}
 

trunk/themes/Sylvia/theme.css

@@ -333 +333 @@
 }
 
-#theImage A, .illustration A, A.navThumb, A.navThumb { 
+#imageWrap A, .illustration A, A.navThumb, A.navThumb { 
         border-bottom-width: 0; 
 }

trunk/themes/clear/theme.css

@@ -24 +24 @@
 }
 
-#theImage IMG {
+#imageWrap IMG {
   border: 3px solid #d3d3d3;
 }

trunk/themes/dark/theme.css

@@ -8 +8 @@
 H2, #menubar DT {
         color: #ffff80;
+        background-image: url(images/tableh1_bg.png);
 }
 
@@ -21 +22 @@
 }
 
-H2, #menubar DT {
-        background-image: url(images/tableh1_bg.png);
-}
-
 #imageHeaderBar H2 {
         background-image: none;
-        border: 0;
 }
 
@@ -39 +35 @@
 }
 
-H2, #menubar DT, #imageToolBar {
+#menubar DT, #imageToolBar {
         border-bottom: 1px solid #000;
 }
@@ -51 +47 @@
 
 .thumbnails .wrap2:hover,
-.content .thumbnailCategories .thumbnailCategory:hover,
-.content .thumbnailCategories .thumbnailCategory:hover A {
-        background-color: #faebd7;
+.content .thumbnailCategories .thumbnailCategory:hover{
         border-color: yellow;   /* thumbnails border color when mouse cursor is over it */
-        color: black;
 }
 

trunk/themes/default/template/picture.tpl

@@ -80 +80 @@
 </div>{*<!-- imageToolBar -->*}
 
-<div id="theImage">
+<div id="imageWrap">
 {$ELEMENT_CONTENT}
 

trunk/themes/default/template/picture_content.tpl

@@ -1 @@
-<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}"
@@ -5 +5 @@
 {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");
@@ -13 +13 @@
                 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;
 }
 
@@ -36 +37 @@
 <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}
+
+{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}

trunk/themes/default/template/slideshow.tpl

@@ -15 +15 @@
 </div>
 
-<div id="theImage">
+<div id="imageWrap">
   {$ELEMENT_CONTENT}
   {if isset($COMMENT_IMG)}

trunk/themes/default/theme.css

@@ -215 +215 @@
 
 .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*/
 }
 
@@ -329 +330 @@
         text-align: center;
         clear: both;
-        margin-bottom: 4px;
+        margin-bottom: 2px;
         padding: 0;
         height: 28px;
@@ -343 +344 @@
         position: absolute;
         left: 5px;
-        top: 100px;
+        top: 10%;
 }
 
@@ -352 +353 @@
 }
 
-#theImage {
+#imageWrap {
         clear: left;
         text-align: center;
-}
-
-#theImage>IMG {
+        position: relative; /*so that the drivative switch link is positioned relative to us*/
+}
+
+#imageWrap>IMG {
         display: block;
         margin: 0 auto;
@@ -419 +421 @@
 
 .contentWithMenu #imageToolBar, 
-.contentWithMenu #theImage { 
+.contentWithMenu #imageWrap { 
         clear: none;
 }
@@ -695 +697 @@
 }
 
-
-/* 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 {