From 0eb7bfb34b6577bc09cbd8bb9b4fa30fcf435a21 Mon Sep 17 00:00:00 2001
From: Zach Dyer <zach.dyer@zachdyerdesign.com>
Date: Thu, 14 Sep 2017 15:32:54 +0000
Subject: [PATCH] added an option to scale up smaller images to full screen
 size

---
 examples/index.html | 27 ++++++++++++++++++++++-----
 src/js/lightbox.js  | 33 ++++++++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index 1312c7f4..49f2ed71 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -18,10 +18,22 @@ <h3>Two Individual Images</h3>
 
     <h3>A Four Image Set</h3>
     <div>
-      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
-      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
-      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
-      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
+      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" 
+        data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
+          <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/>
+      </a>
+      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" 
+        data-lightbox="example-set" data-title="Or press the right arrow on your keyboard.">
+          <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" />
+      </a>
+      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" 
+        data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing.">
+          <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" />
+      </a>
+      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" 
+        data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close.">
+          <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" />
+      </a>
     </div>
   </section>
 
@@ -31,7 +43,12 @@ <h3>A Four Image Set</h3>
     </p>
   </section>
 
-  <script src="../dist/js/lightbox-plus-jquery.min.js"></script>
+  <!--<script src="../dist/js/lightbox-plus-jquery.min.js"></script>-->
+  <script
+  src="https://code.jquery.com/jquery-3.2.1.js"
+    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
+    crossorigin="anonymous"></script>
+  <script src="../src/js/lightbox.js"></script>
 
 </body>
 </html>
diff --git a/src/js/lightbox.js b/src/js/lightbox.js
index 89aff092..80c08ade 100644
--- a/src/js/lightbox.js
+++ b/src/js/lightbox.js
@@ -45,6 +45,7 @@
     alwaysShowNavOnTouchDevices: false,
     fadeDuration: 600,
     fitImagesInViewport: true,
+    fullScreenImages: true,
     imageFadeDuration: 600,
     // maxWidth: 800,
     // maxHeight: 600,
@@ -288,16 +289,34 @@
 
       $image.width(preloader.width);
       $image.height(preloader.height);
+      
+      // Take into account the border around the image and an additional 10px gutter on each side.
+      windowWidth    = $(window).width();
+      windowHeight   = $(window).height();
+      maxImageWidth  = windowWidth - self.containerPadding.left -
+        self.containerPadding.right - self.imageBorderWidth.left -
+        self.imageBorderWidth.right - 20;
+      maxImageHeight = windowHeight - self.containerPadding.top -
+        self.containerPadding.bottom - self.imageBorderWidth.top -
+        self.imageBorderWidth.bottom - 120;
+
+      //Full screen image option
+      if(self.options.fullScreenImages) {
+        $image.width("auto");
+        $image.height("auto");
+        //Scale image to full width
+        $image.width(maxImageWidth);
+
+        //If image height too big scale it down
+        if($image.height() > maxImageHeight) {
+          $image.height(maxImageHeight);
+          $image.width("auto");
+        }
+      }
 
       if (self.options.fitImagesInViewport) {
         // Fit image inside the viewport.
-        // Take into account the border around the image and an additional 10px gutter on each side.
-
-        windowWidth    = $(window).width();
-        windowHeight   = $(window).height();
-        maxImageWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
-        maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
-
+        
         // Check if image size is larger then maxWidth|maxHeight in settings
         if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
           maxImageWidth = self.options.maxWidth;