2018-01-04

HTML中の画像をクリックでポップアップ表示する方法

プラグインLightBox2を使って，HTML中に表示したサムネイル画像をオンクリックでポップアップさせるようにした時の記録です．(2018.1月現在)

Lightbox2ダウンロード
必要なファイルの格納orアップロード
headタグ内のコード編集
画像表示のコード編集
その他

Lightbox2ダウンロード

以下のサイトに飛んで，ダウンロード． lightbox2-master.zipがダウンロードされる．

必要なファイルの格納orアップロード

lightbox2-master.zipを解凍すると，distフォルダの中に，css, js, imagesという3つのフォルダがあるので，それをhtmlファイルと同じ階層に格納orアップロードする．ちなみにexamples/index.htmlを開けばデモページが確認できる．なんかちょっと拡大が遅い...

headタグ内のコード編集

公式ページのgetting startedに沿ってhtmlのhead内に以下の処理を記述．

<link href="path/to/lightbox.css" rel="stylesheet">
<script src="path/to/lightbox.js"></script>

path/to/にはファイルまでのパスを入れてください．また，jQueryもロードする必要があります．

If you are not currently using jQuery, I've created a packaged file that includes both Lightbox and jQuery. Include dist/js/lightbox-plus-jquery.js instead of lightbox.js.

との記述があったので，以下のようにhead内に記述．この部分，バージョンに応じて変更されそうな気がするので注意してください．

<script src="js/lightbox-plus-jquery.js"></script>

画像表示のコード編集

    <a id="myimg_pop" href="path to image" data-lightbox="xyz"/>
      <img src="path to image" name="myimg" width="300" alt="">
    </a>

これで，aタグでポップアップ用の画像，imgタグでサムネイル用画像を表示することができます．

data-lightbox="xyz"

の""内は空白でなければなんでも良いようです．サムネイルとポップアップの画像に同じものを設定する場合，"path to image"には同じパスを記述してください．

その他

このサムネイル画像とポップアップ用画像をJavaScript側で制御したい時の処理については別途．

参考にさせていただいたページ． http://makasete-web.net/photo-pop-up

2017-12-31

htmlのラジオボタンの値をjavaのみでファイル出力

ラジオボタンの値をテキストファイルやcsvファイルなどに保存し，解析しやすくしたいと思って調べた．
phpのコードを別に用意せずに簡潔にjavascriptだけでできないかなーと思って書いたのでメモ．
ちなみに恥ずかしながら初めてjavascript書きました...

結論から先に

phpを経由せずにjavascriptでのみでできました
ファイル名指定やローカルへの直接保存はできず..
リンク先から拡張子なしでダウンロードすることはできました
javascriptで配列の値を直接受け取って出力することもできる

html側

<a id="myDownload" href="#">Click here to download.</a>

javascript側

var $id = function(id) { return document.getElementById(id); }
window.onload = function()
{
　$id("myDownload").addEventListener("click", function(){
　var href = "data:application/octet-stream,";
　var value = 1; // value to be output
　href = encodeURIComponent(value);
　this.setAttribute("href", href);
　}, false);
}

ただ，フォームを作っていると，ページを切り替えながら複数の回答を取得した配列値を同一ファイルに保存したくなることは結構あると思います．
その場合でもphpに値を渡さず，javaの配列に格納した値を直接ファイル出力することができます．

こんなかんじ

html側

<div id = "myForm">
  <!-- radio buttons -->
  <p>
  <input type="radio" id=5 value="5" name="rate" onclick="cl(4)"> 5 <br>
  <input type="radio" id=4 value="4" name="rate" onclick="cl(3)"> 4 <br>
  <input type="radio" id=3 value="3" name="rate" onclick="cl(2)"> 3 <br>
  <input type="radio" id=2 value="2" name="rate" onclick="cl(1)"> 2 <br>
  <input type="radio" id=1 value="1" name="rate" onclick="cl(0)"> 1 <br>
  <p>

  <!-- submit button -->
  <button type="submit" name="myButton" value="test" onClick="mySubmit();"> Submit score <br>
</div>

<a id="myDownload" href="#">Click here to download.</a>

java側

document.getElementById("myDownload").style.display = "none"; // hide download link
ScoreData = new Array(-1, -1, -1);
count = 0;
if(count == 3)
{
  document.getElementById("myDownload").style.display = "block"; // show download link
}

function mySubmit()
{
  var rates = document.getElementsByName("rate");
  var rate_value;
  for(var i = 0; i < rates.length; i++){
    if(rates[i].checked){
      rate_value = rates[i].value;
    }
  }
  ScoreData[ count ] = rate_value;
  document.getElementsByName("rate")[rate_value-1].checked = false;
  count++;
}