お客さんが jQuery のプラグイン「Easy Slider」を使って作成されたスライドの中身を、管理画面から設定した内容で動的に変更したいという要件があったので調査。
管理画面で、「この画像は木曜日の夜 7時から 9時の間だけ出す」みたいな設定をしたら、そのとおりにスライドに反映するという仕組み作りだ。
「Easy Slider」をやめて、スライド部分の JavaScript も新規に作っちゃうという手もあるが、それも何か「車輪の再発明」的でやだなあ(^^;・・・と思ったので（工数も跳ね上がるし）、「Easy Slider」が読み込む画像リストを動的に変更する手でいこうかと、はい。
「Easy Slider」はソースのコメントに書かれているように、
<div id="slider"><ul><li><img src="images/01.jpg" alt="" /></li><li><img src="images/02.jpg" alt="" /></li><li><img src="images/03.jpg" alt="" /></li><li><img src="images/04.jpg" alt="" /></li><li><img src="images/05.jpg" alt="" /></li></ul></div>
といった "slider" という ID の div ブロックに含まれる li 要素を読み込んで表示するようである。
そこで、ul タグに "jumplist" という ID を振って、easySlider function が実行される前に、
var newImage = document.createElement("img");newImage.setAttribute("src", "images/test/img01.jpg");newImage.setAttribute("width", "390");newImage.setAttribute("height", "390");var newAnchor = document.createElement("a");newAnchor.setAttribute("href", "http://www.exsample.jp" );newAnchor.setAttribute("target", "_blank" );newAnchor.appendChild(newImage);var newLi = document.createElement("li");newLi.appendChild (newAnchor);var list = document.getElementById("jumplist");list.appendChild(newLi);
という具合に li 要素を足す JavaScript を実行してみると、ちゃんとスライドの画像にこの要素が足されようだ。
つーことで、JavaScript で毎回管理画面で設定された内容を見て、その内容を基に li 要素を作り直してやればいいわけだ。ふむ。この仕様で工数を見積もってみよう。
問題は、データの更新タイミングだな。
最低でも毎分自動更新を行いたいので、もしかしたら「Easy Slider」そのものにも手を入れんといかんかもなあ。
コメントする