smartphoto 2.1.4 → 2.1.7

package/README.md

@@ -70,6 +70,14 @@ document.addEventListener('DOMContentLoaded',function(){
 </script>
 ```
 
+When SmartPhoto is constructed with a CSS selector string (as above), clicks are handled via a single delegated listener, so elements added to the page **after** construction (e.g. by Ajax/infinite scroll) are picked up automatically just by clicking them — no need to call `addItem()`/`addNewItem()` manually. Right before a photo is opened, SmartPhoto also reconciles that photo's group against the current DOM: newly appended matching elements are added, and elements that have since been removed from the DOM are dropped from the group (remaining indices are recalculated). This auto-detection only applies to the selector-string form; when a `NodeList`/`Element[]` is passed (or in data source mode below), add/remove items explicitly via `addItem()`/`addNewItem()`.
+
+A few things to keep in mind:
+- Reconciliation only happens **right before a photo is opened** (via a click, `show()`, or hash restoration) — not continuously. If an element disappears from the DOM while the viewer is already open and you `next()`/`prev()` through the same session, that removal isn't reflected until the viewer is opened again.
+- It does not support replacing an entire container's `innerHTML` (which recreates existing elements too, as brand-new DOM nodes) — that produces duplicate items, since the old and new elements aren't recognized as the same one. Only *appending*/*removing* individual elements is supported; if you regenerate the whole container, call `destroy()` and construct a new instance instead.
+- Changing `data-group` on an element that has already been opened/registered has no effect (the group is fixed at first registration). Changing it before the element is first interacted with is picked up correctly.
+- If multiple instances are built with overlapping selectors, avoid relying on distinguishing exactly which instance handles a click for elements that could match either.
+
 ### Programmatic usage (data source mode)
 
 Instead of scanning `<a>` elements in the page, you can pass an array of slide objects directly (inspired by [yet-another-react-lightbox](https://yet-another-react-lightbox.com/)). This is useful when your images come from an API or a JS-rendered list.
@@ -211,7 +219,7 @@ Slide fields:
 	<tr>
 		<td>animationSpeed</td>
 		<td>animation speed (ms) when switching/opening/closing images</td>
-		<td>300</td>
+		<td>450</td>
 	</tr>
 	<tr>
 		<td>forceInterval</td>
@@ -337,7 +345,7 @@ photo.on('zoomout',function(){
 	</tr>
 	<tr>
 		<td><code>addNewItem(element)</code></td>
-		<td>register a new <code>&lt;a&gt;</code> thumbnail element (HTML mode)</td>
+		<td>register a new <code>&lt;a&gt;</code> thumbnail element (HTML mode). Only needed when constructed with a <code>NodeList</code>/<code>Element[]</code> or otherwise not using a selector string — with a selector string, elements added later are auto-detected on click (see above)</td>
 	</tr>
 	<tr>
 		<td><code>show(indexOrId?, options?)</code></td>
@@ -353,7 +361,7 @@ photo.on('zoomout',function(){
 	</tr>
 	<tr>
 		<td><code>addItem(slideOrElement)</code></td>
-		<td>add a new item. Accepts a slide object (data source mode) or an <code>Element</code> (HTML mode, same as <code>addNewItem</code>)</td>
+		<td>add a new item. Accepts a slide object (data source mode, where explicit registration is always required) or an <code>Element</code> (HTML mode, same caveat as <code>addNewItem</code>)</td>
 	</tr>
 	<tr>
 		<td><code>currentIndex</code></td>
@@ -372,7 +380,7 @@ photo.on('zoomout',function(){
     <tr>
         <td>--smartphoto-animation-speed</td>
         <td>animation speed when switching/opening/closing images. Overridden per-instance by the <code>animationSpeed</code> JS option</td>
-        <td>300ms</td>
+        <td>450ms</td>
     </tr>
     <tr>
         <td>--smartphoto-animation-function</td>
@@ -395,7 +403,7 @@ Set these on `.smartphoto` (or `:root`) to override the defaults, no rebuild req
 
 ```css
 .smartphoto {
-  --smartphoto-animation-speed: 500ms;
+  --smartphoto-animation-speed: 450ms;
   --smartphoto-animation-function: ease-in-out;
   --smartphoto-backdrop-color: rgba(0, 0, 0, 0.9);
   --smartphoto-header-color: rgba(0, 0, 0, 0.4);

package/css/smartphoto.css

@@ -110,15 +110,26 @@
    * 対象に加えることで、opacity のフェードが完了するまでその適用を1フレーム分
    * 遅らせ、閉じる瞬間に「ぱっと」消えず滑らかにフェードアウトするようにする */
   transition:
-    opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out),
-    display var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out) allow-discrete,
-    overlay var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out) allow-discrete;
+    opacity var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out),
+    display var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out) allow-discrete,
+    overlay var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out) allow-discrete;
 }
 
 .smartphoto:not([open]) {
   opacity: 0;
 }
 
+/* ブラウザ標準の dialog:not([open]) { display: none } は、Bootstrap4 系の
+ * reboot.css 等が互換性維持のために `dialog { display: block; }` のような
+ * 要素セレクタ単体のルールを読み込んでいる場合、後勝ちで上書きされてしまう。
+ * 上書きされると閉じている dialog(position:fixed; inset:0)が画面全体に
+ * 残ったままクリックを吸収し続けるため、クラスセレクタを含めて詳細度を上げた
+ * フォールバックを明示しておく(要素セレクタ単体より詳細度が高いため、
+ * 読み込み順に関係なく確実に勝てる) */
+dialog.smartphoto:not([open]) {
+  display: none !important;
+}
+
 .smartphoto::backdrop {
   background-color: var(--smartphoto-backdrop-color, rgba(0, 0, 0, 1));
 }
@@ -127,11 +138,11 @@
  * ルート要素(html)の子として扱われ、dialog に設定した --smartphoto-animation-speed を
  * 継承しない。そのため JS 側では document.documentElement にも同じ変数を設定しており、
  * ここではその値を参照する。指定がなければブラウザ既定(実装依存, 概ね0.25s前後で
- * 速すぎるとの声があった)の代わりに 0.3s を使う */
+ * 速すぎるとの声があった)の代わりに 0.45s を使う */
 ::view-transition-group(smartphoto-hero),
 ::view-transition-old(smartphoto-hero),
 ::view-transition-new(smartphoto-hero) {
-  animation-duration: var(--smartphoto-animation-speed, 0.3s);
+  animation-duration: var(--smartphoto-animation-speed, 0.45s);
   animation-timing-function: var(--smartphoto-animation-function, ease-out);
 }
 
@@ -213,7 +224,7 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  transition: transform var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
+  transition: transform var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out);
 
   -webkit-user-drag: none;
 }
@@ -229,7 +240,7 @@
 }
 
 .smartphoto-img-elasticmove {
-  transition: transform var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
+  transition: transform var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out);
 }
 
 .smartphoto-img-wrap {
@@ -237,13 +248,13 @@
   opacity: 1;
   /* Pointer Events(ピンチ/ドラッグ)がブラウザ既定のスクロール・ズームと衝突しないようにする */
   touch-action: none;
-  -webkit-transition: opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
-  -moz-transition: opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
-  -ms-transition: opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
-  -o-transition: opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
-  transition: opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
+  -webkit-transition: opacity var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out);
+  -moz-transition: opacity var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out);
+  -ms-transition: opacity var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out);
+  -o-transition: opacity var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out);
+  transition: opacity var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out);
   animation-name: smartphoto-img-wrap;
-  animation-duration: var(--smartphoto-animation-speed, 0.3s);
+  animation-duration: var(--smartphoto-animation-speed, 0.45s);
   animation-timing-function: var(--smartphoto-animation-function, ease-out);
 }
 
@@ -265,7 +276,7 @@
   left: 0;
   opacity: 1;
   animation-name: smartphoto-appear;
-  animation-duration: var(--smartphoto-animation-speed, 0.3s);
+  animation-duration: var(--smartphoto-animation-speed, 0.45s);
   animation-timing-function: var(--smartphoto-animation-function, ease-out);
 }
 
@@ -282,7 +293,7 @@
   height: 30px;
   margin-top: -20px;
   box-sizing: content-box;
-  animation-duration: var(--smartphoto-animation-speed, 0.3s);
+  animation-duration: var(--smartphoto-animation-speed, 0.45s);
   animation-timing-function: var(--smartphoto-animation-function, ease-out);
   animation-name: smartphoto-appear;
 }
@@ -341,7 +352,7 @@
   width: 100%;
   opacity: 1;
   animation-name: smartphoto-appear;
-  animation-duration: var(--smartphoto-animation-speed, 0.3s);
+  animation-duration: var(--smartphoto-animation-speed, 0.45s);
   animation-timing-function: var(--smartphoto-animation-function, ease-out);
 }
 
@@ -417,7 +428,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  transition: all var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
+  transition: all var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out);
 }
 
 .smartphoto-list li:focus {
@@ -485,7 +496,7 @@
   z-index: 100;
   top: 0;
   left: 0;
-  transition: all var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
+  transition: all var(--smartphoto-animation-speed, 0.45s) var(--smartphoto-animation-function, ease-out);
 }
 
 .smartphoto-sr-only {

package/css/smartphoto.min.css

@@ -1 +1 @@
-@keyframes smartphoto{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-img-wrap{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-inner{0%{transform:translateY(100px)}to{transform:translate(0)}}@keyframes smartphoto-loader{0%{opacity:.4;transform:rotate(0deg)}50%{opacity:1;transform:rotate(180deg)}to{opacity:.4;transform:rotate(1turn)}}@keyframes smartphoto-appear{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-hide{0%{opacity:1}to{opacity:0}}:root:has(dialog.smartphoto[open]){overflow:hidden}.smartphoto{border:none;background:transparent;padding:0;margin:0;outline:none;position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;height:var(--smartphoto-vh,100dvh);max-height:var(--smartphoto-vh,100dvh);background-color:var(--smartphoto-backdrop-color,#000);opacity:1;font-family:sans-serif;cursor:pointer;transition:opacity var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out),display var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out) allow-discrete,overlay var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out) allow-discrete}.smartphoto:not([open]){opacity:0}.smartphoto::backdrop{background-color:var(--smartphoto-backdrop-color,#000)}::view-transition-group(smartphoto-hero),::view-transition-new(smartphoto-hero),::view-transition-old(smartphoto-hero){animation-duration:var(--smartphoto-animation-speed,.3s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-close{opacity:0}.smartphoto-count{display:inline-block;color:#fff;font-size:16px}.smartphoto-header{display:block;box-sizing:border-box;position:fixed;z-index:102;top:0;left:0;width:100%;height:50px;padding:15px;background-color:var(--smartphoto-header-color,rgba(0,0,0,.2))}.smartphoto-content{display:block;position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none}.smartphoto-dismiss{display:block;position:absolute;top:15px;right:10px;width:20px;height:20px;padding:0;border:none;background-color:transparent;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTU3Ni40MiAxNDA2Ljc2IDI3ODQgMTk5LjE5YTU2Ljg2IDU2Ljg2IDAgMCAwIDAtODAuMThsLTc4LjkyLTc4LjkyYTU2Ljg2IDU2Ljg2IDAgMCAwLTgwLjE4IDBMMTQxNy4zMiAxMjQ3LjY2IDIwOS43NSA0MC4wOWE1Ni44NiA1Ni44NiAwIDAgMC04MC4xOCAwTDUwLjY1IDExOWE1Ni44NiA1Ni44NiAwIDAgMCAwIDgwLjE4bDEyMDcuNTggMTIwNy41OEw1MC42NSAyNjE0LjM0YTU2Ljg2IDU2Ljg2IDAgMCAwIDAgODAuMThsNzguOTIgNzguOTJhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGwxMjA3LjU3LTEyMDcuNThMMjYyNC45IDI3NzMuNDRhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGw3OC45Mi03OC45MmE1Ni44NiA1Ni44NiAwIDAgMCAwLTgwLjE4WiIvPjwvc3ZnPg==);text-shadow:0 1px 0 #fff;color:#fff;font-size:30px;text-decoration:none;cursor:pointer;line-height:1}.smartphoto-body{z-index:102;margin:0 auto}.smartphoto-body,.smartphoto-inner{position:relative;width:100%;height:100%}.smartphoto-inner{vertical-align:top}.smartphoto-img{display:none;max-width:none;width:auto;height:auto;cursor:zoom-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out);-webkit-user-drag:none}.smartphoto-img.active{display:block}.smartphoto-img-onmove{cursor:grab;cursor:-webkit-grab;transition:none}.smartphoto-img-elasticmove{transition:transform var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out)}.smartphoto-img-wrap{display:inline-block;opacity:1;touch-action:none;-webkit-transition:opacity var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out);-moz-transition:opacity var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out);-ms-transition:opacity var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out);-o-transition:opacity var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out);transition:opacity var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out);animation-name:smartphoto-img-wrap;animation-duration:var(--smartphoto-animation-speed,.3s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-img-left{transform:translateX(150%)!important}.smartphoto-img-right{transform:translateX(-150%)!important}.smartphoto-arrows{list-style-type:none;margin:0;padding:0;position:relative;z-index:1002;top:50%;left:0;opacity:1;animation-name:smartphoto-appear;animation-duration:var(--smartphoto-animation-speed,.3s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-arrows[aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows li{display:block;position:absolute;top:50%;width:30px;height:30px;margin-top:-20px;box-sizing:content-box;animation-duration:var(--smartphoto-animation-speed,.3s);animation-timing-function:var(--smartphoto-animation-function,ease-out);animation-name:smartphoto-appear}.smartphoto-arrows li:focus{outline:none}.smartphoto-arrows [aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows button{appearance:none;display:block;width:100%;height:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer}.smartphoto-arrow-right{right:0;padding:5px 0;background-color:rgba(0,0,0,.5)}.smartphoto-arrow-right button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTgzNy44OCAxNDE3LjMyIDY0My41OSAyMjNhNzIuMjEgNzIuMjEgMCAwIDEgMC0xMDEuODJMNzQzLjgyIDIxYTcyLjIxIDcyLjIxIDAgMCAxIDEwMS44MiAwbDEyNDUuMTkgMTI0NS4xOSAxMDAuMjMgMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAxIDAgMTAxLjgyTDg0NS42NCAyODEzLjY1YTcyLjIxIDcyLjIxIDAgMCAxLTEwMS44MiAwbC0xMDAuMjMtMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAxIDAtMTAxLjgyWiIvPjwvc3ZnPg==)}.smartphoto-arrow-left{left:0;padding:5px 0;background-color:rgba(0,0,0,.5)}.smartphoto-arrow-left button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNOTk2Ljc3IDE0MTcuMzIgMjE5MS4wNiAyMjNhNzIuMjEgNzIuMjEgMCAwIDAgMC0xMDEuODJMMjA5MC44MyAyMUE3Mi4yMSA3Mi4yMSAwIDAgMCAxOTg5IDIxTDc0My44MiAxMjY2LjE5bC0xMDAuMjMgMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAwIDAgMTAxLjgyTDE5ODkgMjgxMy42NWE3Mi4yMSA3Mi4yMSAwIDAgMCAxMDEuODIgMGwxMDAuMjMtMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAwIDAtMTAxLjgyWiIvPjwvc3ZnPg==)}.smartPhotoArrowHideIcon{display:none}.smartphoto-nav{position:absolute;bottom:0;left:0;width:100%;opacity:1;animation-name:smartphoto-appear;animation-duration:var(--smartphoto-animation-speed,.3s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-nav[aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-nav ul{display:block;overflow-x:auto;list-style:none;margin:0;padding:0;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.smartphoto-nav li{display:inline-block;overflow:hidden;width:50px;height:50px}.smartphoto-nav button{appearance:none;display:block;width:100%;height:100%;margin:0;padding:0;border:none;background-color:#fff;background-position:50%;background-size:cover;opacity:.5;cursor:pointer}.smartphoto-nav button:focus{opacity:.8}.smartphoto-nav button.current{opacity:1}.smartphoto-nav img{width:auto;height:100%}.smartphoto-list{list-style-type:none;position:absolute;z-index:101;top:0;left:0;margin:0;padding:0;white-space:nowrap}.smartphoto-list li{display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:all var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out)}.smartphoto-list li:focus{outline:none}.smartphoto-list-onmove{transition:all .3s var(--smartphoto-animation-function,ease-out)}.smartphoto-caption{overflow:hidden;box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:50px;padding:0 50px;color:#fff;font-size:12px;text-align:center;line-height:50px;white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:400}.smartphoto-caption:focus{outline:none}.smartphoto-loader-wrap{display:block;position:relative;z-index:103;width:0;height:0;transform:translate(50vw,50vh);transform:translate(50vw,50dvh);transform:translate(50vw,calc(var(--smartphoto-vh, 100dvh)/2))}.smartphoto-loader{position:absolute;z-index:101;top:0;left:0;width:30px;height:30px;margin-top:-25px;margin-left:-25px;border:8px solid #17cddd;border-right-color:transparent;border-radius:50%;animation:smartphoto-loader .5s linear infinite}.smartphoto-img-clone{position:fixed;z-index:100;top:0;left:0;transition:all var(--smartphoto-animation-speed,.3s) var(--smartphoto-animation-function,ease-out)}.smartphoto-sr-only{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0)}
+@keyframes smartphoto{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-img-wrap{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-inner{0%{transform:translateY(100px)}to{transform:translate(0)}}@keyframes smartphoto-loader{0%{opacity:.4;transform:rotate(0deg)}50%{opacity:1;transform:rotate(180deg)}to{opacity:.4;transform:rotate(1turn)}}@keyframes smartphoto-appear{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-hide{0%{opacity:1}to{opacity:0}}:root:has(dialog.smartphoto[open]){overflow:hidden}.smartphoto{border:none;background:transparent;padding:0;margin:0;outline:none;position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;height:var(--smartphoto-vh,100dvh);max-height:var(--smartphoto-vh,100dvh);background-color:var(--smartphoto-backdrop-color,#000);opacity:1;font-family:sans-serif;cursor:pointer;transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out),display var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out) allow-discrete,overlay var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out) allow-discrete}.smartphoto:not([open]){opacity:0}dialog.smartphoto:not([open]){display:none!important}.smartphoto::backdrop{background-color:var(--smartphoto-backdrop-color,#000)}::view-transition-group(smartphoto-hero),::view-transition-new(smartphoto-hero),::view-transition-old(smartphoto-hero){animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-close{opacity:0}.smartphoto-count{display:inline-block;color:#fff;font-size:16px}.smartphoto-header{display:block;box-sizing:border-box;position:fixed;z-index:102;top:0;left:0;width:100%;height:50px;padding:15px;background-color:var(--smartphoto-header-color,rgba(0,0,0,.2))}.smartphoto-content{display:block;position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none}.smartphoto-dismiss{display:block;position:absolute;top:15px;right:10px;width:20px;height:20px;padding:0;border:none;background-color:transparent;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTU3Ni40MiAxNDA2Ljc2IDI3ODQgMTk5LjE5YTU2Ljg2IDU2Ljg2IDAgMCAwIDAtODAuMThsLTc4LjkyLTc4LjkyYTU2Ljg2IDU2Ljg2IDAgMCAwLTgwLjE4IDBMMTQxNy4zMiAxMjQ3LjY2IDIwOS43NSA0MC4wOWE1Ni44NiA1Ni44NiAwIDAgMC04MC4xOCAwTDUwLjY1IDExOWE1Ni44NiA1Ni44NiAwIDAgMCAwIDgwLjE4bDEyMDcuNTggMTIwNy41OEw1MC42NSAyNjE0LjM0YTU2Ljg2IDU2Ljg2IDAgMCAwIDAgODAuMThsNzguOTIgNzguOTJhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGwxMjA3LjU3LTEyMDcuNThMMjYyNC45IDI3NzMuNDRhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGw3OC45Mi03OC45MmE1Ni44NiA1Ni44NiAwIDAgMCAwLTgwLjE4WiIvPjwvc3ZnPg==);text-shadow:0 1px 0 #fff;color:#fff;font-size:30px;text-decoration:none;cursor:pointer;line-height:1}.smartphoto-body{z-index:102;margin:0 auto}.smartphoto-body,.smartphoto-inner{position:relative;width:100%;height:100%}.smartphoto-inner{vertical-align:top}.smartphoto-img{display:none;max-width:none;width:auto;height:auto;cursor:zoom-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-webkit-user-drag:none}.smartphoto-img.active{display:block}.smartphoto-img-onmove{cursor:grab;cursor:-webkit-grab;transition:none}.smartphoto-img-elasticmove{transition:transform var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out)}.smartphoto-img-wrap{display:inline-block;opacity:1;touch-action:none;-webkit-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-moz-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-ms-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-o-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);animation-name:smartphoto-img-wrap;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-img-left{transform:translateX(150%)!important}.smartphoto-img-right{transform:translateX(-150%)!important}.smartphoto-arrows{list-style-type:none;margin:0;padding:0;position:relative;z-index:1002;top:50%;left:0;opacity:1;animation-name:smartphoto-appear;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-arrows[aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows li{display:block;position:absolute;top:50%;width:30px;height:30px;margin-top:-20px;box-sizing:content-box;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out);animation-name:smartphoto-appear}.smartphoto-arrows li:focus{outline:none}.smartphoto-arrows [aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows button{appearance:none;display:block;width:100%;height:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer}.smartphoto-arrow-right{right:0;padding:5px 0;background-color:rgba(0,0,0,.5)}.smartphoto-arrow-right button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTgzNy44OCAxNDE3LjMyIDY0My41OSAyMjNhNzIuMjEgNzIuMjEgMCAwIDEgMC0xMDEuODJMNzQzLjgyIDIxYTcyLjIxIDcyLjIxIDAgMCAxIDEwMS44MiAwbDEyNDUuMTkgMTI0NS4xOSAxMDAuMjMgMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAxIDAgMTAxLjgyTDg0NS42NCAyODEzLjY1YTcyLjIxIDcyLjIxIDAgMCAxLTEwMS44MiAwbC0xMDAuMjMtMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAxIDAtMTAxLjgyWiIvPjwvc3ZnPg==)}.smartphoto-arrow-left{left:0;padding:5px 0;background-color:rgba(0,0,0,.5)}.smartphoto-arrow-left button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNOTk2Ljc3IDE0MTcuMzIgMjE5MS4wNiAyMjNhNzIuMjEgNzIuMjEgMCAwIDAgMC0xMDEuODJMMjA5MC44MyAyMUE3Mi4yMSA3Mi4yMSAwIDAgMCAxOTg5IDIxTDc0My44MiAxMjY2LjE5bC0xMDAuMjMgMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAwIDAgMTAxLjgyTDE5ODkgMjgxMy42NWE3Mi4yMSA3Mi4yMSAwIDAgMCAxMDEuODIgMGwxMDAuMjMtMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAwIDAtMTAxLjgyWiIvPjwvc3ZnPg==)}.smartPhotoArrowHideIcon{display:none}.smartphoto-nav{position:absolute;bottom:0;left:0;width:100%;opacity:1;animation-name:smartphoto-appear;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-nav[aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-nav ul{display:block;overflow-x:auto;list-style:none;margin:0;padding:0;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.smartphoto-nav li{display:inline-block;overflow:hidden;width:50px;height:50px}.smartphoto-nav button{appearance:none;display:block;width:100%;height:100%;margin:0;padding:0;border:none;background-color:#fff;background-position:50%;background-size:cover;opacity:.5;cursor:pointer}.smartphoto-nav button:focus{opacity:.8}.smartphoto-nav button.current{opacity:1}.smartphoto-nav img{width:auto;height:100%}.smartphoto-list{list-style-type:none;position:absolute;z-index:101;top:0;left:0;margin:0;padding:0;white-space:nowrap}.smartphoto-list li{display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:all var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out)}.smartphoto-list li:focus{outline:none}.smartphoto-list-onmove{transition:all .3s var(--smartphoto-animation-function,ease-out)}.smartphoto-caption{overflow:hidden;box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:50px;padding:0 50px;color:#fff;font-size:12px;text-align:center;line-height:50px;white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:400}.smartphoto-caption:focus{outline:none}.smartphoto-loader-wrap{display:block;position:relative;z-index:103;width:0;height:0;transform:translate(50vw,50vh);transform:translate(50vw,50dvh);transform:translate(50vw,calc(var(--smartphoto-vh, 100dvh)/2))}.smartphoto-loader{position:absolute;z-index:101;top:0;left:0;width:30px;height:30px;margin-top:-25px;margin-left:-25px;border:8px solid #17cddd;border-right-color:transparent;border-radius:50%;animation:smartphoto-loader .5s linear infinite}.smartphoto-img-clone{position:fixed;z-index:100;top:0;left:0;transition:all var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out)}.smartphoto-sr-only{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0)}

package/js/jquery-smartphoto.js

@@ -1,5 +1,5 @@
 /*!
- * SmartPhoto v2.1.4
+ * SmartPhoto v2.1.7
  * (c) appleple
  * Released under the MIT License.
  */
@@ -114,7 +114,7 @@
     loadOffset: 2,
     resizeStyle: "fit",
     lazyAttribute: "data-src",
-    animationSpeed: 300
+    animationSpeed: 450
   };
   function deepFreeze(obj) {
     Object.keys(obj).forEach((key) => {
@@ -128,7 +128,11 @@
   function createState(settings) {
     return {
       options: deepFreeze(
-        extend({}, defaults, settings)
+        extend(
+          {},
+          defaults,
+          settings
+        )
       ),
       viewer: {
         isOpen: false,
@@ -793,6 +797,7 @@
     const dialog = document.createElement("dialog");
     dialog.className = classNames.smartPhoto;
     dialog.setAttribute("aria-labelledby", `smartphoto-${id}-title`);
+    dialog.style.display = "none";
     dialog.style.setProperty(
       "--smartphoto-animation-speed",
       `${options.animationSpeed}ms`
@@ -1139,6 +1144,44 @@
       this.timeouts = [];
       this.loadAllFired = /* @__PURE__ */ new Set();
       this.syncedGroupId = null;
+      // 文字列セレクタで構築された場合のみ設定される。Ajax等で後から追加された
+      // 要素をクリック時に動的検出するための再スキャン起点(§discoverGroupElements)
+      this.rootSelector = null;
+      // クリックされた要素(またはその祖先)から登録済み Item を逆引きするための
+      // キャッシュ。documentへのイベントデリゲーションで祖先チェーンを辿る際に使う
+      this.itemsByElement = /* @__PURE__ */ new Map();
+      // サムネイルクリックはこの1本の document デリゲーションリスナーだけで処理する
+      // (個別バインドは廃止)。同じクリックイベントを複数の SmartPhoto インスタンスが
+      // 二重処理しないよう、処理済みマーカーをイベント自体に立てて後続インスタンスに
+      // 早期returnさせる(セレクタが重複するインスタンスが同時に存在するケース)
+      this.handleDocumentClick = (e) => {
+        if (!(e.target instanceof Element)) {
+          return;
+        }
+        const marker = e;
+        if (marker.__smartphotoClaimed) {
+          return;
+        }
+        let matched = this.findRegisteredAncestor(e.target);
+        if (!matched && this.rootSelector) {
+          matched = e.target.closest(this.rootSelector);
+        }
+        if (!matched) {
+          return;
+        }
+        e.preventDefault();
+        marker.__smartphotoClaimed = true;
+        if (!this.itemsByElement.has(matched) && this.rootSelector) {
+          const groupId = groupIdFromElement(matched);
+          if (this.resyncGroupFromDom(groupId)) {
+            this.syncCurrentGroupView();
+          }
+        }
+        const item = this.itemsByElement.get(matched);
+        if (item) {
+          this.openPhoto(item, matched);
+        }
+      };
       // ---- 内部: window イベント ----
       this.updateViewportHeight = () => {
         this.view.refs.dialog.style.setProperty(
@@ -1150,6 +1193,7 @@
         if (!currentItems(this.state)) {
           return;
         }
+        this.updateViewportHeight();
         this.resetTranslateCurrent();
         this.setPosByCurrentIndex();
         this.setSizeByScreen();
@@ -1172,6 +1216,7 @@
         if (!currentItems(this.state)) {
           return;
         }
+        this.updateViewportHeight();
         this.resetTranslateCurrent();
         this.setPosByCurrentIndex();
         this.setHashByCurrentIndex();
@@ -1182,6 +1227,7 @@
         const poll = (time) => {
           this.scheduleTimeout(() => {
             if (prevWidth !== getWindowWidth()) {
+              this.updateViewportHeight();
               this.resetTranslateCurrent();
               this.setPosByCurrentIndex();
               this.setHashByCurrentIndex();
@@ -1194,6 +1240,7 @@
         };
         poll(0);
       };
+      this.rootSelector = typeof source === "string" ? source : null;
       this.state = createState(settings != null ? settings : {});
       this.view = createView(
         { id: this.id, options: this.state.options },
@@ -1215,15 +1262,14 @@
         },
         { signal: this.abortController.signal }
       );
+      document.addEventListener("click", this.handleDocumentClick, {
+        signal: this.abortController.signal
+      });
       this.ingestSource(source);
       this.syncCurrentGroupView();
       const restored = this.restoreFromHash();
       if (restored) {
-        if (restored.element) {
-          triggerEvent(restored.element, "click");
-        } else {
-          this.openPhoto(restored, null);
-        }
+        this.openPhoto(restored, restored.element);
       }
       this.updateViewportHeight();
       if (window.visualViewport) {
@@ -1268,6 +1314,7 @@
         clearTimeout(id);
       });
       this.timeouts = [];
+      this.itemsByElement.clear();
       this.gestures.detach();
       this.view.destroy();
     }
@@ -1382,7 +1429,7 @@
       this.gotoSlide(this.state.viewer.prev);
     }
     addItem(slideOrElement) {
-      const item = slideOrElement instanceof Element ? this.addElementItem(slideOrElement) : this.addSlideItem(slideOrElement);
+      const item = slideOrElement instanceof HTMLElement ? this.addElementItem(slideOrElement) : this.addSlideItem(slideOrElement);
       this.syncCurrentGroupView();
       return item;
     }
@@ -1414,7 +1461,7 @@
       );
       addItemToGroup(this.state, item);
       this.loadAllFired.delete(groupId);
-      this.bindThumbnailClick(element, item);
+      this.itemsByElement.set(element, item);
       return item;
     }
     addSlideItem(slide) {
@@ -1426,15 +1473,73 @@
       this.loadAllFired.delete(groupId);
       return item;
     }
-    bindThumbnailClick(element, item) {
-      element.addEventListener(
-        "click",
-        (e) => {
-          e.preventDefault();
-          this.openPhoto(item, element);
-        },
-        { signal: this.abortController.signal }
-      );
+    // クリックされた要素(またはその祖先。<a><img></a> の img がクリックされる
+    // ケースを含む)から、登録済み Item を持つ要素まで祖先チェーンを遡って探す
+    findRegisteredAncestor(target) {
+      let node = target;
+      while (node) {
+        if (this.itemsByElement.has(node)) {
+          return node;
+        }
+        node = node.parentElement;
+      }
+      return null;
+    }
+    // rootSelector(文字列セレクタで構築した場合のみ設定される)を再スキャンし、
+    // 指定グループを現在のDOM状態に合わせて丸ごと再構築する(追加・削除・並び順の
+    // 変化を一度に反映)。既知要素は既存の Item オブジェクトをそのまま再利用する
+    // ため loaded/width/height は保持され、DOM から消えた要素だけ itemsByElement
+    // からも除去する。index/translateX は resetTranslate() で再計算する。
+    // 呼び出し元(openPhoto)がこの結果を使い、変化があった場合のみ view を
+    // 再同期する(§ダイアログを開く瞬間に整合を取る。開いている間の next()/prev()
+    // では呼ばれないため、この間の追加/削除は次に開き直すまで反映されない)
+    resyncGroupFromDom(groupId) {
+      var _a;
+      if (!this.rootSelector) {
+        return false;
+      }
+      const domElements = Array.from(
+        document.querySelectorAll(this.rootSelector)
+      ).filter((el) => groupIdFromElement(el) === groupId);
+      const domElementSet = new Set(domElements);
+      const previous = (_a = this.state.groups.get(groupId)) != null ? _a : [];
+      const previousByElement = /* @__PURE__ */ new Map();
+      previous.forEach((it) => {
+        if (it.element) {
+          previousByElement.set(it.element, it);
+        }
+      });
+      let changed = domElements.length !== previous.length;
+      const rebuilt = domElements.map((el, index) => {
+        const existing = previousByElement.get(el);
+        if (existing) {
+          if (existing.index !== index) {
+            changed = true;
+            existing.index = index;
+          }
+          return existing;
+        }
+        changed = true;
+        const item = itemFromElement(
+          el,
+          this.state.options,
+          index,
+          getWindowWidth()
+        );
+        this.itemsByElement.set(el, item);
+        return item;
+      });
+      previous.forEach((it) => {
+        if (it.element && !domElementSet.has(it.element)) {
+          this.itemsByElement.delete(it.element);
+        }
+      });
+      resetTranslate(rebuilt, getWindowWidth());
+      this.state.groups.set(groupId, rebuilt);
+      if (changed) {
+        this.loadAllFired.delete(groupId);
+      }
+      return changed;
     }
     syncCurrentGroupView() {
       const items = currentItems(this.state);
@@ -1503,10 +1608,12 @@
     syncDialog() {
       const { dialog, caption } = this.view.refs;
       if (this.state.viewer.isOpen && !dialog.open) {
+        dialog.style.removeProperty("display");
         dialog.showModal();
         caption.focus();
       } else if (!this.state.viewer.isOpen && dialog.open) {
         dialog.close();
+        dialog.style.display = "none";
       }
     }
     commit() {
@@ -1692,10 +1799,11 @@
       });
     }
     openPhoto(item, trigger) {
+      const groupChanged = this.rootSelector ? this.resyncGroupFromDom(item.groupId) : false;
       this.lastTriggerElement = trigger;
       this.state.viewer.currentGroup = item.groupId;
       this.state.viewer.currentIndex = item.index;
-      if (this.syncedGroupId !== item.groupId) {
+      if (this.syncedGroupId !== item.groupId || groupChanged) {
         this.syncCurrentGroupView();
       }
       this.setHashByCurrentIndex();
@@ -1787,6 +1895,7 @@
       this.state.viewer.photoPosX = 0;
       this.state.viewer.photoPosY = 0;
       this.state.viewer.onMove = true;
+      this.updateViewportHeight();
       this.setPosByCurrentIndex();
       this.setHashByCurrentIndex();
       this.setSizeByScreen();