Lightboxでの画像を拡大したい

通販サイトにて商品の画像をクリックするとポップアップで拡大して表示したいです。

【現状】
Lightboxは動作しているのですが、ポップアップした画像が100％(原寸大)で表示されてしまいます。

【解決したい箇所】
ポップアップした画像を自由に拡大して表示したいです。
jsでしか画像の拡大表示はできないのでしょうか？

js、cssはCDNではなくファイルをダウンロードして動作させています。

lightbox.js
1
2  // Descriptions of all options available on the demo site:
3  // http://lokeshdhakar.com/projects/lightbox2/index.html#options
4  Lightbox.defaults = {
5    albumLabel: 'Image %1 of %2',
6    alwaysShowNavOnTouchDevices: false,
7    fadeDuration: 600,
8    fitImagesInViewport: true,
9    imageFadeDuration: 600,
10    // maxWidth: 800,
11    // maxHeight: 600,
12    positionFromTop: 50,
13    resizeDuration: 700,
14    showImageNumberLabel: true,
15    wrapAround: false,
16    disableScrolling: false,
17    /*
18    Sanitize Title
19    If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
20    This will free you to add html tags, such as links, in the caption.
21
22    If the caption data is user submitted or from some other untrusted source, then set this to true
23    to prevent xss and other injection attacks.
24     */
25    sanitizeTitle: false
26  };
27
28  Lightbox.prototype.option = function(options) {
29    $.extend(this.options, options);
30  };
31
32  Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
33    return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
34  };
35
36  Lightbox.prototype.init = function() {
37    var self = this;
38    // Both enable and build methods require the body tag to be in the DOM.
39    $(document).ready(function() {
40      self.enable();
41      self.build();
42    });
43  };
44
45  // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
46  // that contain 'lightbox'. When these are clicked, start lightbox.
47  Lightbox.prototype.enable = function() {
48    var self = this;
49    $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
50      self.start($(event.currentTarget));
51      return false;
52    });
53  };
54
55  // Build html for the lightbox and the overlay.
56  // Attach event handlers to the new DOM elements. click click click
57  Lightbox.prototype.build = function() {
58    if ($('#lightbox').length > 0) {
59        return;
60    }
61
62    var self = this;
63
64    // Github issue: https://github.com/lokesh/lightbox2/issues/663
65    $('<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
66
67    // Cache jQuery objects
68    this.$lightbox       = $('#lightbox');
69    this.$overlay        = $('#lightboxOverlay');
70    this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
71    this.$container      = this.$lightbox.find('.lb-container');
72    this.$image          = this.$lightbox.find('.lb-image');
73    this.$nav            = this.$lightbox.find('.lb-nav');
74
75    // Store css values for future lookup
76    this.containerPadding = {
77      top: parseInt(this.$container.css('padding-top'), 10),
78      right: parseInt(this.$container.css('padding-right'), 10),
79      bottom: parseInt(this.$container.css('padding-bottom'), 10),
80      left: parseInt(this.$container.css('padding-left'), 10)
81    };
82
83    this.imageBorderWidth = {
84      top: parseInt(this.$image.css('border-top-width'), 10),
85      right: parseInt(this.$image.css('border-right-width'), 10),
86      bottom: parseInt(this.$image.css('border-bottom-width'), 10),
87      left: parseInt(this.$image.css('border-left-width'), 10)
88    };
89
90    // Attach event handlers to the newly minted DOM elements
91    this.$overlay.hide().on('click', function() {
92      self.end();
93      return false;
94    });
95
96    this.$lightbox.hide().on('click', function(event) {
97      if ($(event.target).attr('id') === 'lightbox') {
98        self.end();
99      }
100    });
101
102    this.$outerContainer.on('click', function(event) {
103      if ($(event.target).attr('id') === 'lightbox') {
104        self.end();
105      }
106      return false;
107    });
108
109    this.$lightbox.find('.lb-prev').on('click', function() {
110      if (self.currentImageIndex === 0) {
111        self.changeImage(self.album.length - 1);
112      } else {
113        self.changeImage(self.currentImageIndex - 1);
114      }
115      return false;
116    });
117
118    this.$lightbox.find('.lb-next').on('click', function() {
119      if (self.currentImageIndex === self.album.length - 1) {
120        self.changeImage(0);
121      } else {
122        self.changeImage(self.currentImageIndex + 1);
123      }
124      return false;
125    });
126
127    /*
128      Show context menu for image on right-click
129
130      There is a div containing the navigation that spans the entire image and lives above of it. If
131      you right-click, you are right clicking this div and not the image. This prevents users from
132      saving the image or using other context menu actions with the image.
133
134      To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
135      set pointer-events to none on the nav div. This is so that the upcoming right-click event on
136      the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
137      we set the pointer events back to auto for the nav div so it can capture hover and left-click
138      events as usual.
139     */
140    this.$nav.on('mousedown', function(event) {
141      if (event.which === 3) {
142        self.$nav.css('pointer-events', 'none');
143
144        self.$lightbox.one('contextmenu', function() {
145          setTimeout(function() {
146              this.$nav.css('pointer-events', 'auto');
147          }.bind(self), 0);
148        });
149      }
150    });
151
152
153    this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
154      self.end();
155      return false;
156    });
157  };
158
159  // Show overlay and lightbox. If the image is part of a set, add siblings to album array.
160  Lightbox.prototype.start = function($link) {
161    var self    = this;
162    var $window = $(window);
163
164    $window.on('resize', $.proxy(this.sizeOverlay, this));
165
166    this.sizeOverlay();
167
168    this.album = [];
169    var imageNumber = 0;
170
171    function addToAlbum($link) {
172      self.album.push({
173        alt: $link.attr('data-alt'),
174        link: $link.attr('href'),
175        title: $link.attr('data-title') || $link.attr('title')
176      });
177    }
178
179    // Support both data-lightbox attribute and rel attribute implementations
180    var dataLightboxValue = $link.attr('data-lightbox');
181    var $links;
182
183    if (dataLightboxValue) {
184      $links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
185      for (var i = 0; i < $links.length; i = ++i) {
186        addToAlbum($($links[i]));
187        if ($links[i] === $link[0]) {
188          imageNumber = i;
189        }
190      }
191    } else {
192      if ($link.attr('rel') === 'lightbox') {
193        // If image is not part of a set
194        addToAlbum($link);
195      } else {
196        // If image is part of a set
197        $links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
198        for (var j = 0; j < $links.length; j = ++j) {
199          addToAlbum($($links[j]));
200          if ($links[j] === $link[0]) {
201            imageNumber = j;
202          }
203        }
204      }
205    }
206
207    // Position Lightbox
208    var top  = $window.scrollTop() + this.options.positionFromTop;
209    var left = $window.scrollLeft();
210    this.$lightbox.css({
211      top: top + 'px',
212      left: left + 'px'
213    }).fadeIn(this.options.fadeDuration);
214
215    // Disable scrolling of the page while open
216    if (this.options.disableScrolling) {
217      $('body').addClass('lb-disable-scrolling');
218    }
219
220    this.changeImage(imageNumber);
221  };
222
223  // Hide most UI elements in preparation for the animated resizing of the lightbox.
224  Lightbox.prototype.changeImage = function(imageNumber) {
225    var self = this;
226    var filename = this.album[imageNumber].link;
227    var filetype = filename.split('.').slice(-1)[0];
228    var $image = this.$lightbox.find('.lb-image');
229
230    // Disable keyboard nav during transitions
231    this.disableKeyboardNav();
232
233    // Show loading state
234    this.$overlay.fadeIn(this.options.fadeDuration);
235    $('.lb-loader').fadeIn('slow');
236    this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
237    this.$outerContainer.addClass('animating');
238
239    // When image to show is preloaded, we send the width and height to sizeContainer()
240    var preloader = new Image();
241    preloader.onload = function() {
242      var $preloader;
243      var imageHeight;
244      var imageWidth;
245      var maxImageHeight;
246      var maxImageWidth;
247      var windowHeight;
248      var windowWidth;
249
250      $image.attr({
251        'alt': self.album[imageNumber].alt,
252        'src': filename
253      });