このエントリーをはてなブックマークに追加

ケース1.ごくシンプルなスライドをページ内に設置、画像はMagic Fields のイメージフィールドで直接アップロード、必要なだけフィールドを複製する。
スライドのスクリプトはkamome.js を利用。ごくシンプルで使いやすい。http://firstaudience.com/pages/javascript/kamome/ 参照。Magic Fields のコードは

<?php
$images = getFieldOrder('slide');
foreach($images as $image){
        echo "<li><img src='";
        echo get('slide',1,$image);
        echo "' width='xxx' height='xxx' alt='".get_bloginfo('name')."' /></li>";
} ?>

altタグを画像毎に変えたい場合は、フィールドグループとして複製すると良いでしょう。

ケース2.スライド画像の横幅が大きいので背景として表示。画像はやはりMagic Fields のイメージフィールドで直接アップロード、必要なだけフィールドを複製するが、上と違う点は設定用のページを設けてループ外に読み込む点。
背景のスライド切り替えはjQuery.bgSwitcherを利用。http://rewish.org/javascript/jquery_bg_switcher 参照。Magic Fields のコードはスクリプトの画像設定部分に

<?php
$images = getFieldOrder('slide',1,設定ページのID); 
        foreach($images as $k => $v){ ; 
        echo "'";
           echo get('slide',1,$v,0,設定ページのID); 
        echo "', ";
        } ?>

で、アップロードした画像のURLが読み込まれる。
設定ページを設けてループ外に読み込む方法は、タイトル画像などを後で簡単に変更できるようにしてほしいなどの要望の際にもよく使う。

2011.09.03 投稿 2015.04.05 更新

新しい情報を追記している場合はありますが、古い情報の修正はしていません。投稿日・文中の日付を参照してください。

Recent Articles