Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   JQuery Tolls Scrollable проблема с циклической прокруткой (https://javascript.ru/forum/jquery/22099-jquery-tolls-scrollable-problema-s-ciklicheskojj-prokrutkojj.html)

sniffysko 06.10.2011 13:52
JQuery Tolls Scrollable проблема с циклической прокруткой
 
Организовал на странице закольцованную прокрутку галереи в скроллере. Все бы хорошо, но цикличность хорошо работает только тогда, когда количество фоток в списке кратно количестру фоток в окне просмотра. Например: Окно просмотра вмещает 6 фоток. Тогда хорошо прокручивается галерея из 18 фоток. Т.е. три раза показывается группа фоток по 6 штук.
А мне надо, чтобы прокрутка производилась по одному элементу и количество этих элементов неизвестно изначально (фотки выбираются в админке и их может быть произвольно количество).
В моем случае список скроллируется нормально до тех пор, пока не показывается хвост списка. Потом изображения уползают за левый край, а справа начало списка не появляется. И только когда в скроллере остается последний элемент, появляется начало списка и прилепляется к последнему.
Структура списка примерно такая:

<div class="scrollable" id="bottom-scroller">
<div class="items">
<a href="">картинка</a>
<a href="">картинка</a>
<a href="">картинка</a>
<a href="">картинка</a>
<a href="">картинка</a>
<a href="">картинка</a>
<a href="">картинка</a>
</div>
</div>

Может кто сталкивался с такой проблемой и подскажет в чем дело? Это у меня руки кривые или просто особенность библиотеки?

ksa 06.10.2011 14:12
Цитата:
Сообщение от sniffysko (Сообщение 129858)
Структура списка примерно такая:

<div class="scrollable" id="bottom-scroller">
	<div class="items">
		<a href="">картинка</a>
		<a href="">картинка</a>
		<a href="">картинка</a>
		<a href="">картинка</a>
		<a href="">картинка</a>
		<a href="">картинка</a>
		<a href="">картинка</a>
	</div>
</div>
А это типа тестовый пример? :D

Ну хоть чуть напрягись. Сделай нормальный пример...

sniffysko 06.10.2011 14:44
Полный пример
 
Вот как в точности:
HTML
Код:
<div class="bottom-scroll-box">
        <a class="prev nav"></a>
        <div class="bottom-scroll" id="bottom-scroll">
                <div class="items">

                        <a href="">
                                <img src="images/w1.jpg" alt="">
                                <span class="disk-name">Kyowa KR210 HPB</span>
                                <span class="disk-param">7.0/16/40.0/5x114,3</span>
                        </a>
                        <a href="">
                                <img src="images/w1.jpg" alt="">
                                <span class="disk-name">Kyowa KR210 HPB</span>
                                <span class="disk-param">7.0/16/40.0/5x114,3</span>
                        </a>
                        <a href="">
                                <img src="images/w1.jpg" alt="">
                                <span class="disk-name">Kyowa KR210 HPB</span>
                                <span class="disk-param">7.0/16/40.0/5x114,3</span>
                        </a>
                        <a href="">
                                <img src="images/w1.jpg" alt="">
                                <span class="disk-name">Kyowa KR210 HPB</span>
                                <span class="disk-param">7.0/16/40.0/5x114,3</span>
                        </a>
                        <a href="">
                                <img src="images/w1.jpg" alt="">
                                <span class="disk-name">Kyowa KR210 HPB</span>
                                <span class="disk-param">7.0/16/40.0/5x114,3</span>
                        </a>
                        <a href="">
                                <img src="images/w1.jpg" alt="">
                                <span class="disk-name">Kyowa KR210 HPB</span>
                                <span class="disk-param">7.0/16/40.0/5x114,3</span>
                        </a>
                        <a href="">
                                <img src="images/w1.jpg" alt="">
                                <span class="disk-name">Kyowa KR210 HPB</span>
                                <span class="disk-param">7.0/16/40.0/5x114,3</span>
                        </a>
                </div>
        </div>
        <a class="nav next"></a>
</div>
CSS
Код:
.bottom-scroll-box {
        width: 960px;
        height: 155px;
        margin-top: 20px;
}
.bottom-scroll {
        float: left;
        width: 902px;
        height: 155px;
        margin: 0;
        position: relative;
        overflow: hidden;
}
.bottom-scroll .items {
        width:20000em;
        position:absolute;
        clear:both;
}
.items a {
        display: block;
        float:left;
        width:130px;
        margin: 0 10px;
        text-align: center;
        text-decoration: none;
}
.items a img {
        width: 100px;
        margin: 0 auto 15px;
}
.disk-name {
        display: block;
        margin: 0 auto 4px;
        color: #494c4d;
        font-size: 12px;
}
.disk-param {
        display: block;
        margin: 0 auto 4px;
        color: #f24100;
        font-size: 10px;
}

.bottom-scroll-box a.prev, .bottom-scroll-box a.next {
        display: block;
        float: left;
        width: 29px;
        height: 49px;
        margin-top: 30px;
        background-image: url(../img/arrow-scroll.gif);
        background-repeat: no-repeat;
        cursor: pointer;
}
.bottom-scroll-box a.prev:hover, .bottom-scroll-box a.prev:active {
        background-position: -29px 0;
}
.bottom-scroll-box a.next {
        background-position: right 0;
}
.bottom-scroll-box a.next:active, .bottom-scroll-box a.next:hover {
        background-position: -58px 0;
}
Вызов скроллера:
Код:
$(function(){
        $('#bottom-scroll').scrollable({
                circular: true,
                mousewheel: true
        }).autoscroll({
                interval:3000
        });
});

ksa 06.10.2011 15:05
На http://jquery-docs.ru/ нет ничего про scrollable()...

Как вариант, напиши сам, нужное тебе, скролирование (поэлементно и по кругу)...

Если деньга есть? Таки я тебе напишу :)

sniffysko 06.10.2011 15:09
Да я и сам могу написать. Тока облом. Хорошо же прицепить к сайту одно готовое, многофункциональное, а потом только функции включать.

ksa 06.10.2011 15:22
Цитата:
Сообщение от sniffysko
Да я и сам могу написать. Тока облом.
Это самые везкие аргументы. :lol:


Часовой пояс GMT +3, время: 05:48.