#251 Fotorama’s dimensions are the dimensions of the first image (by …

…order, not by loading time)
artpolikarpov · Jun 22, 2014 · 23f1c0f · 23f1c0f
1 parent 0beb133
commit 23f1c0f
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 5 deletions.
diff --git a/src/js/fotorama.js b/src/js/fotorama.js
@@ -410,12 +410,15 @@ jQuery.Fotorama = function ($fotorama, opts) {
 
   function setMeasures (width, height, ratio, index) {
     if (!measuresSetFLAG || (measuresSetFLAG === '*' && index === startIndex)) {
+
+      console.log('setMeasures', index, opts.width, opts.height);
+
       width = measureIsValid(opts.width) || measureIsValid(width) || WIDTH;
       height = measureIsValid(opts.height) || measureIsValid(height) || HEIGHT;
       that.resize({
         width: width,
         ratio: opts.ratio || ratio || width / height
-      }, 0, index === startIndex ? true : '*');
+      }, 0, index !== startIndex && '*');
     }
   }
 
@@ -1198,11 +1201,12 @@ jQuery.Fotorama = function ($fotorama, opts) {
   that.resize = function (options) {
     if (!data) return this;
 
-    extendMeasures(!that.fullScreen ? optionsToLowerCase(options) : {width: '100%', maxwidth: null, minwidth: null, height: '100%', maxheight: null, minheight: null}, [measures, that.fullScreen || opts]);
-
     var time = arguments[1] || 0,
-        setFLAG = arguments[2],
-        width = measures.width,
+        setFLAG = arguments[2];
+
+    extendMeasures(!that.fullScreen ? optionsToLowerCase(options) : {width: '100%', maxwidth: null, minwidth: null, height: '100%', maxheight: null, minheight: null}, [measures, setFLAG || that.fullScreen || opts]);
+
+    var width = measures.width,
         height = measures.height,
         ratio = measures.ratio,
         windowHeight = $WINDOW.height() - (o_nav ? $nav.height() : 0);

diff --git a/test/auto-size.html b/test/auto-size.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Basic fotorama</title>
+	<meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+
+	<!-- jQuery, -->
+	<script src="jquery/jquery-1.10.1.min.js"></script>
+
+	<!-- Fotorama -->
+	<link  href="../out/fotorama.css" rel="stylesheet">
+	<script src="../out/fotorama.js"></script>
+
+  <script type="text/javascript">
+    console = window.console || {};
+    console.time = console.time || $.noop;
+    console.timeEnd = console.timeEnd || $.noop;
+
+    $(function () {
+      f = $('.fotorama').data('fotorama');
+    })
+  </script>
+</head>
+
+<body>
+
+<!--<p>Basic fotorama:<p>
+<pre style="margin-top: -1em; margin-left: 1em;"><code>&lt;div <mark>class="fotorama"</mark>></code></pre>-->
+
+<!-- Fotorama -->
+<div class="fotorama">
+	<a href="i/okonechnikov/1.jpg"></a>
+	<a href="i/nyc/thumbs/crazyjohn.jpg"></a>
+</div>
+
+<!-- © -->
+<p>Photos <a href="http://okonet.ru/">by Andrey Okonetchnikov</a></p>
+</body>
+</html>
diff --git a/test/index.html b/test/index.html
@@ -14,6 +14,7 @@ <h1>Index of ./test</h1>
 <li><a href="arrows.html">arrows.html</a></li>
 <li><a href="assets/">assets/</a></li>
 <li><a href="auto-false.html">auto-false.html</a></li>
+<li><a href="auto-size.html">auto-size.html</a></li>
 <li><a href="autoplay--loop.html">autoplay--loop.html</a></li>
 <li><a href="autoplay.html">autoplay.html</a></li>
 <li><a href="base--dimensions.html">base--dimensions.html</a></li>

diff --git a/test/specs/_specs.json b/test/specs/_specs.json
@@ -9,6 +9,11 @@
       "specs": "test/specs/basic.js"
     }
   },
+  "dimensions": {
+    "options": {
+      "specs": "test/specs/dimensions.js"
+    }
+  },
   "jquery-1.8.0": {
     "options": {
       "vendor": ["test/jquery/jquery-1.8.0.min.js", "out/fotorama.js"],

diff --git a/test/specs/dimensions.js b/test/specs/dimensions.js
@@ -0,0 +1,30 @@
+document.write(
+    '<div class="fotorama" id="fotorama">' +
+        '<a href="http://s.fotorama.io/okonechnikov/1.jpg"></a>' +
+        '<a href="http://s.fotorama.io/okonechnikov/2-thumb.jpg"></a>' +
+    '</div>'
+);
+
+describe('Dimensions', function () {
+  var $fotorama, fotorama;
+
+  beforeEach(function () {
+    $fotorama = $fotorama || $('#fotorama');
+    fotorama = fotorama || $fotorama.data('fotorama');
+  });
+
+  it('fotorama’s dimensions are the dimensions of the first image (works only if script able to connect to the Internet)', function (done) {
+    var $body = $('body'),
+        $stage = $('.fotorama__stage', $fotorama);
+
+    waitsFor(function () {
+      return $stage.height() > 0
+    }, function () {
+      expect($stage.height()).toBeGreaterThan(0);
+      expect($stage.width()).toEqual($body.width());
+      expect($stage.height()).toEqual(Math.round($body.width()/(700/467)));
+
+      done();
+    });
+  });
+});
diff --git a/test/specs/index.html b/test/specs/index.html
@@ -11,6 +11,7 @@ <h1>Index of ./test/specs</h1>
 <li><a href="basic.js">basic.js</a></li>
 <li><a href="data.js">data.js</a></li>
 <li><a href="destroy.js">destroy.js</a></li>
+<li><a href="dimensions.js">dimensions.js</a></li>
 <li><a href="events-n-methods.js">events-n-methods.js</a></li>
 <li><a href="fullscreen.js">fullscreen.js</a></li>
 <li><a href="hash-n-show.js">hash-n-show.js</a></li>