Movable Type 5 でスライドショーを実現する(その2:応用)

Movable Type 5 でスライドショーを実現する(その2:応用)

Posted at June 16,2010 12:55 PM
Tag:[Customize, MovableType, Slideshow]

Movable Type 4.3 でスライドショーを実現する(その1:基本動作)」で紹介したスライドショーは、メインページや、ブログ記事リストなど、1ページに複数記事がある場合に正常に動作しません。

本エントリーではその対処方法を紹介します。以下のサンプルでは、2つの記事にスライドショーを設定しており、それぞれが独立して動作します。

サンプル
サンプル

対処方法は、メインページやブログ記事リストのMTEntiesタグの中に、以下の青色部分を追加します。やっつけ仕事なのでエレガントなコードでありません。予めご了承ください。

<mt:Entries>
  <$mt:Include module="ブログ記事の概要"$>
<script type="text/javascript">
//<![CDATA[
var entryAssets<mt:EntryID /> = new Array(<mt:EntryAssets>'<mt:AssetThumbnailURL width="500">'<mt:Unless name="__last__">,</mt:Unless></mt:EntryAssets>);
 
if ( entryAssets<mt:EntryID />.length != 0) {
    var entrySlideshow<mt:EntryID /> = document.getElementById('entry-gallery<mt:EntryID />');
    var imgIndex<mt:EntryID /> = 0
 
    function viewImage<mt:EntryID />(direc) {
        if (direc == 'next') imgIndex<mt:EntryID />++;
        if (direc == 'prev') imgIndex<mt:EntryID />--;
        if (imgIndex<mt:EntryID /> >= entryAssets<mt:EntryID />.length) imgIndex<mt:EntryID /> = 0;
        if (imgIndex<mt:EntryID /> < 0 ) imgIndex<mt:EntryID /> = (entryAssets<mt:EntryID />.length - 1);
        slideshowImage<mt:EntryID />.setAttribute('src',entryAssets<mt:EntryID />[imgIndex<mt:EntryID />]);
        return false;
    }
 
    var slideshowImage<mt:EntryID /> = document.createElement('img');
    slideshowImage<mt:EntryID />.setAttribute('src',entryAssets<mt:EntryID />[imgIndex<mt:EntryID />]);
    slideshowImage<mt:EntryID />.setAttribute('alt','Slideshow Image');
    entrySlideshow<mt:EntryID />.appendChild(slideshowImage<mt:EntryID />);
 
    var slideshowNav<mt:EntryID /> = document.createElement('p');
 
    var slideshowPrev<mt:EntryID /> = document.createElement('a');
    slideshowPrev<mt:EntryID />.setAttribute('id','slideshow-prev');
    slideshowPrev<mt:EntryID />.innerHTML = '&laquo; Previous';
    slideshowPrev<mt:EntryID />.setAttribute('href','javascript:void(0)');
    slideshowPrev<mt:EntryID />.setAttribute('onclick','viewImage<mt:EntryID />("prev")');
    slideshowNav<mt:EntryID />.appendChild(slideshowPrev<mt:EntryID />);
 
    var slideshowNext<mt:EntryID /> = document.createElement('a');
    slideshowNext<mt:EntryID />.setAttribute('id','slideshow-next');
    slideshowNext<mt:EntryID />.setAttribute('href','javascript:void(0)');
    slideshowNext<mt:EntryID />.innerHTML = 'Next &raquo;';
    slideshowNext<mt:EntryID />.setAttribute('onclick','viewImage<mt:EntryID />("next")');
    slideshowNav<mt:EntryID />.appendChild(slideshowNext<mt:EntryID />);
 
    entrySlideshow<mt:EntryID />.appendChild(slideshowNav<mt:EntryID />);
}
//]]>
</script>
</mt:Entries>
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)