Changeset 10852 for extensions/Back2Front/template

Timestamp:

May 11, 2011, 7:17:49 PM (13 years ago)

Author:

mistic100

Message:

improve process, add options for link effect

Location:

extensions/Back2Front/template

Files:

• admin.tpl (added)
• picture_content.tpl (modified) (2 diffs)
• picture_modify.tpl (modified) (2 diffs)
• style.css (modified) (1 diff)

extensions/Back2Front/template/picture_content.tpl

@@ -3 +3 @@
 {footer_script require="jquery"}
 jQuery(document).ready(function () {ldelim}
+
+{if $b2f_switch_mode == 'click'}
   jQuery('.reverse').click(function() {ldelim}
     if (jQuery(this).attr('rel') == 'front') {ldelim}
-      /* picture attributes */
-      jQuery('#theImage img:first-child').attr({ldelim}
+{else}
+  jQuery('.reverse').hover(function() {ldelim}
+{/if}
+
+      /* picture switch */
+    {if $b2f_transition == 'fade'}
+      jQuery('img[alt="{$ALT_IMG}"]').animate({ldelim}
+        opacity:0
+      }, 400, function() {ldelim}
+        jQuery(this).animate({ldelim}
+          width:'{$VERSO_WIDTH}px',
+          height:'{$VERSO_HEIGHT}px'
+        }, 200, function() {ldelim}
+            jQuery(this).attr('src', '{$VERSO_URL}');
+            jQuery(this).animate({ldelim}
+              opacity:1
+            }, 400);
+        });
+      });
+    {else}
+      jQuery('img[alt="{$ALT_IMG}"]').attr({ldelim}
         src: '{$VERSO_URL}',
-        style: 'width:;height:;',
+        style: 'width:{$VERSO_WIDTH}px;height:{$VERSO_HEIGHT}px;',
       });
-      
-      /* hd link atributes */
+    {/if}
+    
+    {if $b2f_switch_mode == 'click'}
+      /* hd link */
       {if isset($VERSO_HD)}
-      jQuery('#theImage a:first-child').attr({ldelim}
+      jQuery('img[alt="{$ALT_IMG}"]').parent().attr({ldelim}
         href: "javascript:phpWGOpenWindow('{$VERSO_HD}','{$high.UUID}','scrollbars=yes,toolbar=no,status=no,resizable=yes')"
       });
       {/if}
-      
+    
       /* B2F link content */
       jQuery(this).html('<img src="{$B2F_PATH}template/rotate_2.png"/> {'See front'|@translate}');
       jQuery(this).attr('rel', 'back');
+    {/if}
       
+{if $b2f_switch_mode == 'click'}
     } else if (jQuery(this).attr('rel') == 'back') {ldelim}
-      jQuery('#theImage img:first-child').attr({ldelim}
+{else}
+  }, function() {ldelim}
+{/if} 
+
+    {if $b2f_transition == 'fade'}
+      jQuery('img[alt="{$ALT_IMG}"]').animate({ldelim}
+        opacity:0
+      }, 400, function() {ldelim}
+        jQuery(this).animate({ldelim}
+          width:'{$WIDTH_IMG}px',
+          height:'{$HEIGHT_IMG}px'
+        }, 200, function() {ldelim}
+            jQuery(this).attr('src', '{$SRC_IMG}');
+            jQuery(this).animate({ldelim}
+              opacity:1
+            }, 400);
+        });
+      });
+    {else}
+      jQuery('img[alt="{$ALT_IMG}"]').attr({ldelim}
         src: '{$SRC_IMG}',
         style: 'width:{$WIDTH_IMG}px;height:{$HEIGHT_IMG}px;',
       });
+    {/if}
       
-      {if isset($VERSO_HD)}
-      jQuery('#theImage a:first-child').attr({ldelim}
-        href: "javascript:phpWGOpenWindow('{$high.U_HIGH}','{$high.UUID}','scrollbars=yes,toolbar=no,status=no,resizable=yes')')"
+    {if $b2f_switch_mode == 'click'}
+      {if isset($high.U_HIGH)}
+      jQuery('img[alt="{$ALT_IMG}"]').parent().attr({ldelim}
+        href: "javascript:phpWGOpenWindow('{$high.U_HIGH}','{$high.UUID}','scrollbars=yes,toolbar=no,status=no,resizable=yes')"
       });
       {/if}
@@ -36 +82 @@
       jQuery(this).html('<img src="{$B2F_PATH}template/rotate_1.png"/> {'See back'|@translate}');
       jQuery(this).attr('rel', 'front');
+    {/if}
+      
+{if $b2f_switch_mode == 'click'}
     }
   });
+{else}
+  });
+{/if} 
+
 });
 {/footer_script}
 
-<a class="reverse" rel="front" href="#">
-  <img src="{$B2F_PATH}template/rotate_1.png"/>
-  {'See back'|@translate}
+<img src="{$VERSO_URL}" style="display:none;"> {* <!-- force preload the verso --> *}
+
+<a class="reverse" rel="front" name="verso-link" {if $b2f_switch_mode == 'hover'}href="javascript:phpWGOpenWindow('{$VERSO_HD}','{$high.UUID}','scrollbars=yes,toolbar=no,status=no,resizable=yes')"{/if}>
+  <img src="{$B2F_PATH}template/rotate_1.png"/> {'See back'|@translate}
 </a>
+<br/>

extensions/Back2Front/template/picture_modify.tpl

@@ -2 +2 @@
 $(document).ready(function () {ldelim}
   $('input[name="b2f_is_verso"]').change(function () {ldelim}
-    if (this.checked) {ldelim}
-      $('.frontside_id').css('visibility', '');
-    } else {ldelim}
-      $('.frontside_id').css('visibility', 'hidden');
-    }
+     $('.frontside_param').toggle();
   });
 });
@@ -21 +17 @@
       <tr>
         <td><b>{'This picture has a backside :'|@translate}</b></td>
-        <td><a href="{$B2F_VERSO_URL}">{$B2F_VERSO_ID} - {$B2F_VERSO_NAME}</a></td>
+        <td><a href="{$B2F_VERSO_URL}">{$B2F_VERSO_ID}</a></td>
       </tr>
     </table>
   {else}
-    <table>
+    <table style="min-width:400px;">
       <tr>
         <td><b>{'This picture is a backside...'|@translate}</b></td>
-        <td><input type="checkbox" name="b2f_is_verso" {$B2F_IS_VERSO}></td>
+        <td style="width:70px"><input type="checkbox" name="b2f_is_verso" {$B2F_IS_VERSO}></td>
       </tr>
-
-      <tr class="frontside_id" {if !isset($B2F_IS_VERSO)}style="visibility:hidden;"{/if}>
+      
+      <tr class="frontside_param" {if !isset($B2F_IS_VERSO)}style="display:none;"{/if}>
         <td><b>{'...of the picture n°'|@translate}</b></td>
         <td><input type="text" size="4" name="b2f_front_id" value="{$B2F_FRONT_ID}"></td>
       </tr>
       
-      <tr class="frontside_id" {if !isset($B2F_IS_VERSO)}style="visibility:hidden;"{/if}>
+      <tr class="frontside_param" {if !isset($B2F_IS_VERSO)}style="display:none;"{/if}>
         <td><b>{'Move backside to private album'|@translate}</b></td>
-        <td><input type="checkbox" name="b2f_move_verso" checked="checked"></td>
+        <td><input type="checkbox" name="b2f_move_verso" {$B2F_MOVE_VERSO}></td>
       </tr>
     </table>

extensions/Back2Front/template/style.css

@@ -6 +6 @@
   font-size:15px;
   font-style:italic;    
+  height:1em;
 }
 a.reverse img {
+  margin:0 !important;
   vertical-align:top;
   border:none !important;