【jQuery】データベース風な使い方を教えて下さい。

各画像は実際に別ページにする必要ありますか？
パッと思いついたというかjqueryで画像表示系のプラグインで、

1. サムネイル付き
2. キャプションや長めの説明などにも対応
3. ハッシュ(#)使ったリンクにも対応

といったのを使えば良いんじゃないかと思いました。
とりあえずググったところだと
http://fotorama.io/
https://narugaro.wordpress.com/2013/12/10/%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB%E4%BB%98%E3%81%8Djquery%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BCfotorama%E3%80%81%E7%94%BB%E5%83%8F%E3%81%AB%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88/
とか。

あとは、ローカルでphpなりで作ってhtmlをファイルを書きださせるとか、wgetでクロールするとかで静的ページ化するとか。

あとメンテナンスは？
それ考えるとローカルでphpってわけにはいかない（でもwshなら？）けど、
jqueryだとタグ書いていくことになりそう。
探せばjsonで別ファイルとか可能なのもあるかもしれませんが。

> 今回myAdmin等を使うことが出来ない環境
MySQL が使えないという意味ですよね？
態々面倒な事をしないで素直にデータベースを使っては？
MySQLが使えなくても、よほど古いサーバなければ SQLite が使えるはずです。

わざわざ別ページに飛ばなきゃならない理由はなんなんでしょ。
色々が本当に色々なんですかね。それでも探せばそれなりなプラグインはありそうですが。

楽なのは既存のプラグインに合わせてしまうことなんですけど、詳細に作り込みたいなら自作でしょうか。
しかし、それはそれで手間かかるけど。

二つのページでデータ共有するなら元データはjsonがいいでしょう。
http://www.webopixel.net/javascript/91.html
http://www.jquerybyexample.net/2013/04/how-to-display-load-images-from-json-file-jquery.html

これ参考に例えば
json

[
    [ "foo.jpg", "foo", "this is foo", "2/19", "abc" ],
    [ "bar.jpg", "bar", "hoge", "2/20", "def" ]
]

一覧

$(document).ready(function () {
  var jsonURL = "productList.json";
  $.getJSON(jsonURL, function (json) {
    var imgList= "";
    $.each(json, function (i, v) {
      imgList += '<a href="gallery.html#'+i+'"><img src="' + v[0] + '" alt="' + v[1] + '"></a>';
    });
    $('#dvProdList').append(imgList);
  });
});

画像

$(document).ready(function () {
  var jsonURL = "productList.json";
  $.getJSON(jsonURL, function (json) {
    var data = json[location.hash];
    var id_list = [ "title", "desc", "date", "etc" ];
    $('#img').attr('src', data.shift());
    $.each(id_list, function (i, v) {
      $('#'+v).text(data[i]);
    });
  });
});

こんなのでどうだろ？分かります？
jsonのデータ形式は単なる配列形式にしたけど、メンテ考えると連想配列の方がやっぱりわかりやすいのかな？

必要性を感じませんが、どうしても JavaScript でやりたいのならこんな感じ。

list.php

<?php
echo <<<EOL
<a href="detail.php?id=01"><img src="hogehoge.jpg"></a>
<a href="detail.php?id=02"><img src="hugahuga.jpg"></a>
EOL;

list.jp

var data = {
  "01":{"id":01, "text01":"説明テキスト1-01", "text02":"説明テキスト1-02", "img":"http://0123.jpg"},
  "02":{"id":02, "text01":"説明テキスト2-01", "text02":"説明テキスト2-02", "img":"http://0000.jpg"}
};

$(function(){
  $("#text01").append("<p>"+data[i].text01+"</p>");
  $("#text02").append("<p>"+data[i].text02+"</p>");
  $("#image").append('<img src="'+data[i].img+'">');
});

detail.php

<?php
if (isset($_GET['id'])) {
	$i = preg_replace('/[^0-9]/', '', $_GET['id']);
} else {
	$i = 0;
}
?>
...
<script>var i = "<?= $i ?>";</script>
<script src="list.js"></script>

<div id="text01"></div>
<div id="image"></div>
<div id="text02"></div>

でも、以下の様にしたら JavaScript は要らない。
detail.php

<?php
$data = array(
  "01"=>array("id"=>"01", "text01"=>"説明テキスト1-01", "text02"=>"説明テキスト1-02", "img"=>"http://example.com/img/0123.jpg"),
  "02"=>array("id"=>"02", "text01"=>"説明テキスト2-01", "text02"=>"説明テキスト2-02", "img"=>"http://example.com/img/4567.jpg"),
);
?>
...
<?php if (isset($data[$i])):?>
<div><?= '<p>', $data[$i]['text01'], '</p>'; ?></div>
<div><?= '<img src="', $data[$i]['text01'], '" />'; ?></div>
<div><?= '<p>', $data[$i]['text02'], '</p>'; ?></div>
<?php endif;?>