デジタル掲示板② lightbox2を使う
jimdoで簡単にデジタル掲示板ができましたこれでは、子供たちのプログラミングに使えないので、プログラミングで行うとどうなるかを提示したいligihtbox2のjavascriptライブラリを使うと、とても簡単に作成できます。クリックすると画像が拡大されますjimdoとプログラミングの比較に面白いですフォルダーcontentsに画像が入っていますajaxでこれらのタグを生成するPHPを呼びます<!DOCTYPE html><html lang="jp"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>デジタル掲示板</title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="css/lightbox.css"></head><body> <h1>デジタル掲示板</h1> <div class="gallery" id="gallery"> </div> <script src="js/jquery.min.js"></script> <script src="js/lightbox.js"></script> <script> lightbox.option({ alwaysShowNavOnTouchDevices: true, resizeDuration: 10, wrapAround: true, fadeDuration: 10, imageFadeDuration: 10, }); $.get("getImagelist.php", function (data) { $("#gallery").html(data); } ); </script></body></html>画像一覧作成 getImageList.php $images = glob('contents/*.*'); foreach ($images as $v) { echo "<a href=\"$v\" data-lightbox=\"im\"><img src=\"$v\"/></a>"; }Lightbox2Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.lokeshdhakar.com
