https://cdn-contents.toranoana.jp/static/contentfiles/popImg.js?v=20260915152700

1$(function () {
2  // $(document) or $('body') on click handler's selector not working on iOS.
3  const popParent = $("#wrapper");
4
5  // const
6  const popPadding = 10;
7
8  // Open Popup
9  popParent.on("click", ".popimg", function (event) {
10    var clickObj = event.target;
11    if (clickObj.tagName == "IMG") {
12      if ($(clickObj).attr("src")) {
13        // calc client area
14        var cHeight = document.documentElement.clientHeight;
15        var cWidth = document.documentElement.clientWidth;
16        var cRatio = cHeight / cWidth;
17
18        // loading status
19        $("#poparea > div").css({
20          width: "100px",
21          height: "20px",
22          left: cWidth * 0.5 - 50 + "px",
23          top: cHeight * 0.5 - 10 + "px",
24          padding: "0px",
25          background: "#fff",
26          border: "1px solid #dedede",
27        });
28        $("#poparea > div").html("Loading...");
29        $("#poparea").addClass("popped");
30
31        // load image
32        var tempImg = new Image();
33        var imgSrc = $(clickObj).attr("pop")
34          ? $(clickObj).attr("pop")
35          : $(clickObj).attr("src");
36        tempImg.src = imgSrc;
37        tempImg.onload = function () {
38          // calc image area
39          var iHeight = tempImg.height;
40          var iWidth = tempImg.width;
41          var iRatio = iHeight / iWidth;
42
43          if (iRatio <= cRatio) {
44            if (cWidth <= iWidth + popPadding * 2) {
45              var popWidth = cWidth;
46              var popHeight =
47                (cWidth - popPadding * 2) * iRatio + popPadding * 2;
48            } else {
49              var popWidth = iWidth + popPadding * 2;
50              var popHeight = iHeight + popPadding * 2;
51            }
52          } else {
53            if (cHeight <= iHeight + popPadding * 2) {
54              var popHeight = cHeight;
55              var popWidth =
56                (cHeight - popPadding * 2) / iRatio + popPadding * 2;
57            } else {
58              var popHeight = iHeight + popPadding * 2;
59              var popWidth = iWidth + popPadding * 2;
60            }
61          }
62
63          // set style
64          $("#poparea > div").css({
65            width: popWidth + "px",
66            height: popHeight + "px",
67            left: cWidth * 0.5 - popWidth * 0.5 + "px",
68            top: cHeight * 0.5 - popHeight * 0.5 + "px",
69            padding: popPadding + "px",
70            background: "#fff",
71            border: "1px solid #dedede",
72          });
73
74          // add html
75          var imgHtml = "<img src=" + sanitizeSpecialChara(imgSrc) + ">";
76          $("#poparea > div").html(imgHtml);
77        };
78      }
79    }
80  });
81
82  // Close Popup
83  popParent.on("click", "#poparea.popped", function (event) {
84    $("#poparea").removeClass("popped");
85  });
86
87  // Resize Popup
88  $(window).resizeend(function () {
89    if ($("#poparea").hasClass("popped")) {
90      // calc client area
91      var cHeight = document.documentElement.clientHeight;
92      var cWidth = document.documentElement.clientWidth;
93      var cRatio = cHeight / cWidth;
94
95      // load image
96      var tempImg = new Image();
97      var imgSrc = $("#poparea img").attr("src");
98      tempImg.src = imgSrc;
99      tempImg.onload = function () {
100        // calc image area
101        var iHeight = tempImg.height;
102        var iWidth = tempImg.width;
103        var iRatio = iHeight / iWidth;
104
105        if (iRatio <= cRatio) {
106          if (cWidth <= iWidth + popPadding * 2) {
107            var popWidth = cWidth;
108            var popHeight = (cWidth - popPadding * 2) * iRatio + popPadding * 2;
109          } else {
110            var popWidth = iWidth + popPadding * 2;
111            var popHeight = iHeight + popPadding * 2;
112          }
113        } else {
114          if (cHeight <= iHeight + popPadding * 2) {
115            var popHeight = cHeight;
116            var popWidth = (cHeight - popPadding * 2) / iRatio + popPadding * 2;
117          } else {
118            var popHeight = iHeight + popPadding * 2;
119            var popWidth = iWidth + popPadding * 2;
120          }
121        }
122        // set style
123        $("#poparea > div").css({
124          width: popWidth + "px",
125          height: popHeight + "px",
126          left: cWidth * 0.5 - popWidth * 0.5 + "px",
127          top: cHeight * 0.5 - popHeight * 0.5 + "px",
128          padding: popPadding + "px",
129          background: "#fff",
130          border: "1px solid #dedede",
131        });
132      };
133    }
134  });
135});