SimpleSlide JQuery мод для показа? - PullRequest
0 голосов
/ 24 декабря 2011

В настоящее время я пытаюсь изменить плагин для слайдшоу jQuery. Я пытаюсь сделать так, чтобы средний слайд был виден первым при загрузке страницы вместо первого слайда в наборе html-элементов. Я уже успел увидеть переполнение видимым, так как планирую иметь полупрозрачный слой, покрывающий две стороны слайдера, оставляя средний слайд видимым

Мой модифицированный слайдер можно найти здесь

И модифицированный js-файл плагина можно найти здесь

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>

Спасибо

1 Ответ

0 голосов
/ 24 декабря 2011

Вы смотрели на свой JS-скрипт вообще?

Я нашел события для кнопок prev, next, 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);
        };
});

Из приведенного выше фрагмента я бы сказал, что это что-тоделать с нижеследующими двумя строками

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

simpleSlideAction(this, rel);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...