質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

受付中

Lightboxでの画像を拡大したい

Arp
Arp

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0回答

0評価

1クリップ

255閲覧

投稿2022/01/26 01:25

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

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

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

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

lightbox.js

// Descriptions of all options available on the demo site: // http://lokeshdhakar.com/projects/lightbox2/index.html#options Lightbox.defaults = { albumLabel: 'Image %1 of %2', alwaysShowNavOnTouchDevices: false, fadeDuration: 600, fitImagesInViewport: true, imageFadeDuration: 600, // maxWidth: 800, // maxHeight: 600, positionFromTop: 50, resizeDuration: 700, showImageNumberLabel: true, wrapAround: false, disableScrolling: false, /* Sanitize Title If the caption data is trusted, for example you are hardcoding it in, then leave this to false. This will free you to add html tags, such as links, in the caption. If the caption data is user submitted or from some other untrusted source, then set this to true to prevent xss and other injection attacks. */ sanitizeTitle: false }; Lightbox.prototype.option = function(options) { $.extend(this.options, options); }; Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) { return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages); }; Lightbox.prototype.init = function() { var self = this; // Both enable and build methods require the body tag to be in the DOM. $(document).ready(function() { self.enable(); self.build(); }); }; // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes // that contain 'lightbox'. When these are clicked, start lightbox. Lightbox.prototype.enable = function() { var self = this; $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) { self.start($(event.currentTarget)); return false; }); }; // Build html for the lightbox and the overlay. // Attach event handlers to the new DOM elements. click click click Lightbox.prototype.build = function() { if ($('#lightbox').length > 0) { return; } var self = this; // Github issue: https://github.com/lokesh/lightbox2/issues/663 $('<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')); // Cache jQuery objects this.$lightbox = $('#lightbox'); this.$overlay = $('#lightboxOverlay'); this.$outerContainer = this.$lightbox.find('.lb-outerContainer'); this.$container = this.$lightbox.find('.lb-container'); this.$image = this.$lightbox.find('.lb-image'); this.$nav = this.$lightbox.find('.lb-nav'); // Store css values for future lookup this.containerPadding = { top: parseInt(this.$container.css('padding-top'), 10), right: parseInt(this.$container.css('padding-right'), 10), bottom: parseInt(this.$container.css('padding-bottom'), 10), left: parseInt(this.$container.css('padding-left'), 10) }; this.imageBorderWidth = { top: parseInt(this.$image.css('border-top-width'), 10), right: parseInt(this.$image.css('border-right-width'), 10), bottom: parseInt(this.$image.css('border-bottom-width'), 10), left: parseInt(this.$image.css('border-left-width'), 10) }; // Attach event handlers to the newly minted DOM elements this.$overlay.hide().on('click', function() { self.end(); return false; }); this.$lightbox.hide().on('click', function(event) { if ($(event.target).attr('id') === 'lightbox') { self.end(); } }); this.$outerContainer.on('click', function(event) { if ($(event.target).attr('id') === 'lightbox') { self.end(); } return false; }); this.$lightbox.find('.lb-prev').on('click', function() { if (self.currentImageIndex === 0) { self.changeImage(self.album.length - 1); } else { self.changeImage(self.currentImageIndex - 1); } return false; }); this.$lightbox.find('.lb-next').on('click', function() { if (self.currentImageIndex === self.album.length - 1) { self.changeImage(0); } else { self.changeImage(self.currentImageIndex + 1); } return false; }); /* Show context menu for image on right-click There is a div containing the navigation that spans the entire image and lives above of it. If you right-click, you are right clicking this div and not the image. This prevents users from saving the image or using other context menu actions with the image. To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we set pointer-events to none on the nav div. This is so that the upcoming right-click event on the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs we set the pointer events back to auto for the nav div so it can capture hover and left-click events as usual. */ this.$nav.on('mousedown', function(event) { if (event.which === 3) { self.$nav.css('pointer-events', 'none'); self.$lightbox.one('contextmenu', function() { setTimeout(function() { this.$nav.css('pointer-events', 'auto'); }.bind(self), 0); }); } }); this.$lightbox.find('.lb-loader, .lb-close').on('click', function() { self.end(); return false; }); }; // Show overlay and lightbox. If the image is part of a set, add siblings to album array. Lightbox.prototype.start = function($link) { var self = this; var $window = $(window); $window.on('resize', $.proxy(this.sizeOverlay, this)); this.sizeOverlay(); this.album = []; var imageNumber = 0; function addToAlbum($link) { self.album.push({ alt: $link.attr('data-alt'), link: $link.attr('href'), title: $link.attr('data-title') || $link.attr('title') }); } // Support both data-lightbox attribute and rel attribute implementations var dataLightboxValue = $link.attr('data-lightbox'); var $links; if (dataLightboxValue) { $links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]'); for (var i = 0; i < $links.length; i = ++i) { addToAlbum($($links[i])); if ($links[i] === $link[0]) { imageNumber = i; } } } else { if ($link.attr('rel') === 'lightbox') { // If image is not part of a set addToAlbum($link); } else { // If image is part of a set $links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]'); for (var j = 0; j < $links.length; j = ++j) { addToAlbum($($links[j])); if ($links[j] === $link[0]) { imageNumber = j; } } } } // Position Lightbox var top = $window.scrollTop() + this.options.positionFromTop; var left = $window.scrollLeft(); this.$lightbox.css({ top: top + 'px', left: left + 'px' }).fadeIn(this.options.fadeDuration); // Disable scrolling of the page while open if (this.options.disableScrolling) { $('body').addClass('lb-disable-scrolling'); } this.changeImage(imageNumber); }; // Hide most UI elements in preparation for the animated resizing of the lightbox. Lightbox.prototype.changeImage = function(imageNumber) { var self = this; var filename = this.album[imageNumber].link; var filetype = filename.split('.').slice(-1)[0]; var $image = this.$lightbox.find('.lb-image'); // Disable keyboard nav during transitions this.disableKeyboardNav(); // Show loading state this.$overlay.fadeIn(this.options.fadeDuration); $('.lb-loader').fadeIn('slow'); this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide(); this.$outerContainer.addClass('animating'); // When image to show is preloaded, we send the width and height to sizeContainer() var preloader = new Image(); preloader.onload = function() { var $preloader; var imageHeight; var imageWidth; var maxImageHeight; var maxImageWidth; var windowHeight; var windowWidth; $image.attr({ 'alt': self.album[imageNumber].alt, 'src': filename });

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。