Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2011, 13:52
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 79

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>

Может кто сталкивался с такой проблемой и подскажет в чем дело? Это у меня руки кривые или просто особенность библиотеки?
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2011, 14:12
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от sniffysko Посмотреть сообщение
Структура списка примерно такая:

<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>
А это типа тестовый пример?

Ну хоть чуть напрягись. Сделай нормальный пример...
Ответить с цитированием
  #3 (permalink)  
Старый 06.10.2011, 14:44
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 79

Полный пример
Вот как в точности:
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
	});
});
Ответить с цитированием
  #4 (permalink)  
Старый 06.10.2011, 15:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

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

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

Если деньга есть? Таки я тебе напишу
Ответить с цитированием
  #5 (permalink)  
Старый 06.10.2011, 15:09
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 79

Да я и сам могу написать. Тока облом. Хорошо же прицепить к сайту одно готовое, многофункциональное, а потом только функции включать.
Ответить с цитированием
  #6 (permalink)  
Старый 06.10.2011, 15:22
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от sniffysko
Да я и сам могу написать. Тока облом.
Это самые везкие аргументы.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с кодировкой в Jquery snizhok jQuery 3 27.06.2011 20:53
Ошибка в jQuery 1.5.1. Не понимаю в чем проблема? viatcheslav AJAX и COMET 0 16.05.2011 11:38
Проблема с вкладками на jquery tomclancys Общие вопросы Javascript 0 11.03.2010 08:44
Проблема при работе с плагином jQuery Map Hilight REp0rtER jQuery 3 29.07.2009 22:10
jquery tabs (проблема с отображением) Extern Элементы интерфейса 0 16.03.2009 17:42