電気ウナギ的○○

About Home

「Easy Slider」を使ったスライドの中身を動的に変更する

shinoda (2013年4月 1日 19:30)
お客さんが 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」そのものにも手を入れんといかんかもなあ。

電気ウナギ的○○

電気ウナギ的○○

About Back

コメント(0)

電気ウナギ的○○

電気ウナギ的○○

About Back

トラックバック(0)

トラックバックURL: https://blog.netandfield.com/mt/mt-tb.cgi/2422

電気ウナギ的○○

About This Site

電気ウナギ的○○
岩国在住。広島で働く超零細IT企業社長のいわゆる社長日記。
何か、酒と食い物のことばかり書いているようで・・・お察しのとおり、肥満体です:-)


2011/06/24
iPhone用サイト公開

Create with jQuery, jQTouch.


CLOSE