[javascript] 画像をクリックすると大きな画像がポップアップさせる方法(lightbox)

画像をクリックすると大きな画像がポップアップさせる方法はこちら

まずHeaderに下記Scriptを貼り付け

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>

 

あとはクリックさせて表示させたい画像のimgタグを以下の通りにする

<a href="[画像のURL]" data-lightbox="group"><img src="[画像のURL]"></a>

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です