ナビの下にスライドショー表示。アコーディオンメニューを表示

FrontPage

画像1 画像2 画像3

ナビの下にスライドショーを表示する。

◆解説

  1. jQueryで navigator IDを検索してそこに画像を追加します。ナビとコンテンツの間に画像が追加されます。
  2. 追加した領域に、headinfクラスで定義した領域を上から被せます。
  3. そのheadinfクラス内で #slideshowプラグインによりスライドショーを行います。

◆設置手順

  1. 画像をSWFUでアップします。この例では 横750px 縦180pxの画像を3つ使用しています。
  2. 以下のコードを編集画面に入れてください。全部の画面に適用したいときは、メニュー管理からナビ2画面を開いてそこに入れてください。

注意

  • W3Cの文法チェックで1つだけエラーが出ていますが、正常に表示されます。只今、このエラーを取る努力をしています....

コード

#beforescript{{
<style type="text/css">
<!--
#wrapper{
position: relative;
}  
.headinf{
width: 750px;
height: 180px;
position: absolute;
top: 84px; 
left: 0px;
}
--> 
</style>
}}

#beforescript{{
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#navigator").append('<img src="swfu/d/img750x180_1.jpg" />')
});
</script>
}}

#html2(<div class="headinf">)
#slideshow(180,false,4){{
http://qhmtips.com/qhm_n03/swfu/d/img750x180_1.jpg,画像1
http://qhmtips.com/qhm_n03/swfu/d/img750x180_2.jpg,画像2
http://qhmtips.com/qhm_n03/swfu/d/img750x180_3.jpg,画像3
}}
#html2(</div>)

ご意見箱

皆様のご意見をお待ちします。


認証コード(8460)

当ページは役に立ちましたか?

選択肢 投票
たいへん役に立った 13  
ちょっとだけ役に立った 0  
普通 0  
あんまり 0  

powered by QHM 6.0.9 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional