Changeset 17349 for extensions

Timestamp:

Aug 3, 2012, 5:48:51 PM (12 years ago)

Author:

mistic100

Message:

improving slider display when mixing landscape and portrait photos (must use elastic=true if mixing panoramas)

Location:

extensions/ExtendedDescription

Files:

• main.inc.php (modified) (1 diff)
• template/nivoslider/jquery.nivo.slider.js (modified) (4 diffs)
• template/nivoslider/nivo-slider.css (modified) (3 diffs)
• template/slider.tpl (modified) (3 diffs)

extensions/ExtendedDescription/main.inc.php

@@ -616 +616 @@
   
   // sort pictures
-  function rank_sort($a, $b)
-  {
-    global $ids;
-    return array_search($a, $ids) > array_search($b, $ids);
-  }
-  uksort($pictures, 'rank_sort');
+  if (!function_exists('ed_rank_sort'))
+  {
+    function ed_rank_sort($a, $b)
+    {
+      global $ids;
+      return array_search($a, $ids) > array_search($b, $ids);
+    }
+  }
+  uksort($pictures, 'ed_rank_sort');
   
   foreach ($pictures as $row)

extensions/ExtendedDescription/template/nivoslider/jquery.nivo.slider.js

@@ -11 +11 @@
  * July 25th 2012
  * Damien (Mistic) Sorel
- * ability to stop slideshow with beforeChange (line 318)
+ * ability to stop slideshow with beforeChange (line 343)
+ */
+ 
+/**
+ * August 3rd 2012
+ * Damien (Mistic) Sorel (from http://joshfester.com/differing-image-heights-in-nivo-slider)
+ * dynamic width (lines 95 & 102 & 322-338)
  */
 
@@ -87 +93 @@
         // Detect Window Resize
         $(window).resize(function() {
-            slider.children('img').width(slider.width());
+            //slider.children('img').width(slider.width());
             sliderImg.attr('src', vars.currentImage.attr('src'));
             sliderImg.stop().height('auto');
@@ -93 +99 @@
             $('.nivo-box').remove();
         });
+        
+        slider.width($(kids[vars.currentSlide]).width());
 
         //Create caption
@@ -312 +320 @@
             }
             
+            // resize the slider (don't resize for diff < 20px)
+            if (vars.currentSlide+1 == vars.totalSlides) {
+                next_width = $(kids[0]).width();
+            }
+            else {
+                next_width = $(kids[vars.currentSlide + 1]).width();
+            }
+            if (Math.abs(next_width - slider.width()) > 20) {
+                slider.animate({width: next_width}, 'fast', function() { nivoRun2(slider, kids, settings, nudge) });
+            }
+            else {
+                nivoRun2(slider, kids, settings, nudge);
+            }
+            
+        };
+        
+        var nivoRun2 = function(slider, kids, settings, nudge){       
             // Stop
             if((!vars || vars.stop) && !nudge) { return false; }

extensions/ExtendedDescription/template/nivoslider/nivo-slider.css

@@ -9 +9 @@
  
 /* The Nivo Slider styles */
+.slider-wrapper {
+        margin:0 auto;
+}
 .nivoSlider {
         position:relative;
@@ -14 +17 @@
         height:auto;
         overflow: hidden;
+        margin: 0 auto;
 }
 .nivoSlider img {
@@ -23 +27 @@
         display: block !important;
         position: relative !important; 
-        width: 100% !important;
+        //width: 100% !important;
+        margin: 0 auto;
 }
 

extensions/ExtendedDescription/template/slider.tpl

@@ -25 +25 @@
 
 {if not $elastic_size}
-{* assign var=slider_min_w value=$img_size.w *}
 {assign var=slider_min_h value=$img_size.h}
 {/if}
 
-<div class="slider-wrapper theme-default" style="width:{$img_size.w}px;{if $elastic_size}height:{math equation='x+y' x=$img_size.h y=40}px;{/if}margin:0 auto;">
+<div class="slider-wrapper theme-default" style="width:{$img_size.w}px;{if $elastic_size}height:{math equation='x+y' x=$img_size.h y=40}px;{/if}">
   <div id="slider{$slider_id}" class="nivoSlider" style="width:{$img_size.w}px;{if $elastic_size}height:{$img_size.h}px;{/if}">
   {foreach from=$slider_content item=thumbnail}{strip}
@@ -38 +37 @@
     {/if}
     
-    <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="" data-src="{$derivative->get_url()}"{/if} alt="{$thumbnail.TN_ALT}" {if $show_title}title="<a href='{$thumbnail.URL}'>{$thumbnail.NAME|replace:'"':"'"}</a>"{/if}>
+    <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="" data-src="{$derivative->get_url()}"{/if} alt="{$thumbnail.TN_ALT}" {$derivative->get_size_htm()} {if $show_title}title="<a href='{$thumbnail.URL}'>{$thumbnail.NAME|replace:'"':"'"}</a>"{/if}>
     
     {if not $elastic_size}
     {assign var=derivative_size value=$derivative->get_size()}
-    {* math assign=slider_min_w equation="min(x,y)" x=$slider_min_w y=$derivative_size[0] *}
     {math assign=slider_min_h equation="min(x,y)" x=$slider_min_h y=$derivative_size[1]}
     {/if}
@@ -52 +50 @@
 {footer_script}
 $("#slider{$slider_id}").css({ldelim}
-  {* width: {$slider_min_w}, *}
   height: {$slider_min_h}
 });