0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

lighting box(ポップアップで画像拡大)

Last updated at Posted at 2020-11-04

2020年11月3日。

データ消失。

200個程あったメモ用デモファイルが全て消失。

自作パソコンが壊れ、デスクトップにあったデータがすべて消えたのでQiitaをメモ代わりに。

#1
lighting box(ポップアップで画像拡大)

下記のサイトからzipファイルをダウンロード。
https://lokeshdhakar.com/projects/lightbox2/

ダウンロード出来たら同じ階層に
js
css
img
それぞれのファイルを置く。

とりあえず完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="css/lightbox.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="js/lightbox.min.js"></script>
  
</head>
<body>
  
  <a href="new-battery01.jpg" data-lightbox="demo-group"><img class="box" style="" src="new-battery01.jpg" alt="詳細画像"></a>
  <a href="new-battery01.jpg" data-lightbox="demo-group"><img class="box" style="" src="new-battery01.jpg" alt="詳細画像"></a>
  <a href="new-battery01.jpg" data-lightbox="demo-group"><img class="box" style="" src="new-battery01.jpg" alt="詳細画像"></a>
  <a href="new-battery01.jpg" data-lightbox="demo-group"><img src="new-battery01.jpg" /></a>
  </body>
</html>

参考:http://webnonotes.com/javascript-2/jquerypopup/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?