小粋空間  -  a cheap joke and a play on words site

Movable Type 5 でスライドショーを実現する（その2：応用）

「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>