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>"; }