はいどうも〜UI/UXデザイナーのうっくんです。

今回は、以前よりやりたいと思っていた、「ウェブサイトで、クリックされた画像をなんでもかんでも全画面表示にするJavaScriptのご紹介です。

最初はなんとなく、クリックされた要素がimgだったらそいつに特別なCSSクラスをつけて、全画面表示になるように予めCSS書いとけばええんちゃん？

と思っていたのですが、これが案外うまく行かなくて結局StackOverflowで見つけたJavaScriptのソリューションに頼ることになりました。

こんな感じで動きます。

というわけで問題なく動きました。

一応コードはこちら。

    //Show image in full-screen on click.
   $('img[data-enlargable]').addClass('img-enlargable').click(function () {
       var src = $(this).attr('src');
       $('<div>').css({
           background: 'RGBA(0,0,0,.8) url(' + src + ') no-repeat center',
           backgroundSize: 'contain',
           width: '100%',
           height: '100%',
           position: 'fixed',
           zIndex: '10000',
           top: '0',
           left: '0',
           cursor: 'zoom-out'
       }).click(function () {
           $(this).remove();
       }).appendTo('body');
   });
    

JSの中にがっつりHTML/CSSが書き込まれているのが気持ち悪いので、JSではクラスとかをtoggleするだけにしたいのですが、とりあえず動いているのでヨシ！（あかん）

また気が向いたらリファクタリングしていきたいと思います。

p.s. 気が向いたのでリファクタリングしました。

HTMLとCSS側で事前に必要な要素を書いておいて、 js側ではクラスをつけたり外したりすることで表示／非表示を切り替えるようにコードを変更しました。以下の通り。

<!-- HTML -->
<div id="full-screen-image" class="">
</div>

HTMLには何もない空のdivをどこでもいいので書いておく。full-screen-imageは1つしか存在し得ないので、ID指定にしてます。ClassにisFullScreenというのを用意して、フラグを立てたりおろしたりすることでフルスクリーン表示をコントロールしています。

最初に紹介したコードよりは役割分担がはっきりしている分わかりやすい気がするのですが、ベストプラクティスかどうかは不明。

//CSS
#full-screen-image {
   display: none;
   background: RGBA(0,0,0,.8) no-repeat center;
   background-image: url();
   background-size: contain;
   width: 100%;
   height: 100%;
   position: fixed;
   z-index: 10000;
   top: 0;
   left: 0;
   cursor: zoom-out;
}

#full-screen-image.isFullScreen {
   display: block;
}

一方CSSは最初に紹介したStackOverflowのコードをほぼパクリつつ、display: none;を付け足しています。これで初期状態で非表示になります。isFullScreenのフラグが立ったときだけdisplay: blockにして表示するということです。

//JavaScript (jQuery)   
   $('img[data-enlargable]').click(function () {
       var url = "url" + "(" + $(this).attr('src') + ")";
       $('#full-screen-image').addClass('isFullScreen');
       $('#full-screen-image').css('background-image', url);
   });
   $('#full-screen-image').click(function () {
       $(this).removeClass('isFullScreen');
   });

前半部分はisFullScreenのクラスをつけることで、#full-screen-imageを表示。ついでにクリックした先の画像のsrcをとってきて、全画面表示先のbackground-imageにコピペしている感じです。上記コードではhtml上のimgタグに[data-enlargable]のメタ情報がついているときだけ、この機能が使えるようになっていますが、この指定を無くせばすべてのimgに対して効くはずです。
後半部分では、シンプルにisFullScreenのフラグを外して、全画面表示を終了しているだけです。

ついでにdisplay noneで要素をつけたり消したりするときはtransitionでのアニメーションが効かないので、animationというcssワザを使う必要があるみたいです。

https://qiita.com/gonshi_com/items/4ae066ef4bea6d519854