サイトの改装に向けてイメージビューアのようなものをjavascriptで作りたいと考えてます。

最近利用し始めたCi-enにはギャラリーっていう機能があって、画像を数枚まとめて置いておけたりしてとても便利なんですよね！

「明日、初めて彼女と❤」のスピンオフ漫画「アヤの前日譚」でもlaymicという漫画ビューアを利用させていただいていて、画像をまとまりで扱えるのがとても便利です！

ということでイメージビューアの仕様を練ってみました！



仕様

・javascriptは必要に応じて読み込むというようなことができるので、サムネイル画像はキャッシュしておいて大きな画像は初めて表示されるときに読み込む

・imgタグのsrcにサムネイルurl、data-srcに原寸画像を埋め込んで（そうするとブラウザではsrcのサムネイルが表示される）、クリックされたらdata-srcを読み込んで画面いっぱいにビューアを描画

・image-viewerセレクタのタグでくくったまとまりで画像を行き来できるようにする

・ビューアを×ボタンで閉じられるようにする



こんな感じでとりあえず作り始めました！

javascriptは超初心者ですが完成したらさっそく導入していきたいと思ってます！



というわけで、今週も頑張りますぞ～！