画像をクリックしたら拡大する方法

久しぶりの投稿になります。ヤマラボです。

今回はよくあります、画像をクリックすると拡大する方法をご紹介します。

デモサイトをご用意しましたので、ご参考までにご確認下さい。

デモサイト

サンプルコードになります。

head箇所に下記コードを記載します。


<head>
<!--拡大表示-->
<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>
<!--end-->
</head>

body箇所には下記の画像出力コードを記載します。

※イメージのリンク先は任意のURLを指定して下さい。


<a href="img/icon.jpeg" data-lightbox="group"><img src="img/icon.jpeg" width="77" /></a>

ご参考になれば幸いです。

画像をクリックしたら拡大する方法
トップへ戻る