クリックすると画像がふわっとポップアップで浮かび上がる仕組みのギャラリーに、クリックした後の拡大画像を画像比較スライダーが動かせる機能を実装したいのですがうまくいきません。
ギャラリーと画像比較スライダーはそれぞれ実装できたのですが...
ギャラリーは、<a>タグで<img>を包んでいる感じで↓
<div class="contents">
<a href="ポップアップ後の画像.jpg" data-caption="キャプション">
<img src="サムネイル状態での表示画像.jpg" alt=" "></a>
</div>
が連なってギャラリーを成しています。
画像比較スライダーのライブラリはcocoenです。なので↓
<div class="container">
<div class="cocoen">
<img src="./illustdata/ALL/e(6).jpg">
<img src="./illustdata/ALL/e(7).jpg">
</div>
</div>
を設置する必要があります。
ギャラリーの<a href>のところをこれに置き替えるのも、別に画像比較スライダーを設置するhtmlを作ってそのパスを書くのも試しましたが無理でした。
ついでにcocoenでは二つ目の画像比較スライダーはおけないのでそれも課題です。
何かこれを実現する方法はありませんでしょうか...
ギャラリーまでできてるなら画像比較部分は作るのが早くて動作安定すると思います。
比較画像の要素をpositionで重ねて、初期値はoverflow:hidden;とwidth:50%;で。あとはマウス操作に合わせてjsでwidthの値を変えれば完成。
なるほど…positionは盲点でした。
試してみます。ありがとうございます