任意のフォルダに入れた画像を表示する

指定したフォルダに画像をアップするだけでブラウザに表示する

  • Magnific Popup.jsを併用して、クリックしたらモーダルウィンドウが開いて拡大表示するようにしています。
  • Magnific Popupの方で、一枚ずつ開くか次々連続して開くようにするか指定できる。

<link rel="stylesheet" href="magnific-popup.css">
<script src="jquery.magnific-popup.min.js"></script>


<ul class="flex parent-container">
<?php
$img_dir = "./images";//任意のフォルダ名。ここに画像を格納する。
if ($handle = opendir($img_dir)) {
	while (false !== ($file = readdir($handle))) {
		if($file==".." or $file==".")continue;
		print '<li><a href="' . $img_dir.'/'.$file . '">';
		print '<img src="'.$img_dir.'/'.$file.'" alt="">';
		print "</a></li>\n";
	}
}
?>
</ul>


.parent-container img {
		width: 30rem;
		margin:1em;
		}


// Single image lightbox
	$(function(){
		$('.popup-image').magnificPopup({
			type: 'image'
		});
	});
//Lightbox gallery
	$(function(){
		$('.parent-container').magnificPopup({
		delegate: 'a',
			type: 'image',
			gallery: {
				enabled:true
		}
		});
	});

TOP