2011-12-24 7 views
0

現在、jQueryスライドショープラグインを変更しようとしています。私がしようとしているのは、html要素のセットの最初のスライドの代わりに、ページの読み込み時に中央のスライドを最初に表示させることです。私はすでに半透明のレイヤーをスライダーの両面をカバーし、中間のスライドを見えるようにする予定であるので、オーバーフローを可視化することができました。SimpleSlide Jquery sideshow mod?

マイ修正スライダーがhere

を見つけることができ、変更されたプラグインのjsファイルはhere

CSS/HTMLを見つけることができます:

<style type="text/css"> 
.simpleSlide-container { 
    margin: auto 0 auto 0; 
    width: 496px; 
    height: 300px; 
} 
.simpleSlide-window { 
    margin-left: 48px; 
} 
.buttons { 
    height: 48px; 
    width: 496px; 
    margin-top: -174px; 
    z-index: 9999; 

} 
.left-button { 
    background-image: url(arrows-left.png); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    height: 48px; 
    width: 48px; 
    background-position: -0px -0px; 
    z-index: 9999; 
    position:relative; 
    left: 24px; 
} 
.left-button:hover { 
    height: 48px; 
    width: 48px; 
    background-position: -48px -0px; 
} 
.right-button { 
    background-image: url(arrows-right.png); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    height: 48px; 
    width: 48px; 
    background-position: -0px -0px; 
    z-index: 9999; 
    position: relative; 
    left: 424px; 
    bottom: 48px; 
} 
.right-button:hover { 
    height: 48px; 
    width: 48px; 
    background-position: -48px -0px; 
} 
</style> 

<body> 
<div class="simpleSlide-container"> 
<div class="simpleSlide-window" rel="group_name"> 
    <div class="simpleSlide-tray" rel="group_name"> 

    <div class="simpleSlide-slide" rel="group_name" style="float: left; display: inline-block; opacity: 1;"> 
    <div><img src="13.jpg" /></div> 
    </div> 

    <div class="simpleSlide-slide" rel="group_name" style="float: left; display: inline-block; opacity: 1;"> 
    <div><img src="30.jpg" /></div> 
    </div> 


    <div class="simpleSlide-slide" rel="group_name" style="float: left; display: inline-block; opacity: 1;"> 
    <div><img src="31.jpg" /></div> 
    </div> 

    </div> 
</div> 
<div class="buttons"> 
<div class="left-button" rel="group_name"></div> 
<div class="right-button" rel="group_name"></div> 
</div> 
</div> 
</body> 

おかげ

答えて

0

はあなたを見てきましたJSスクリプトはまったくですか?

私は、次の、前のイベントを見つけ、私はその何かが下の2つのライン

var rel = $(this).attr('rel'); 

simpleSlideAction(this, rel); 
をどうすると言うでしょう上のスニペットからJUMPTOボタン

$('.left-button, .right-button, .jump-to').live('click', function() { 

     var rel = $(this).attr('rel'); 

     if (!$('div.simpleSlide-tray[rel="' + rel + '"]').is(':animated')) { 
      simpleSlideAction(this, rel); 
     }; 
});