Помогите разобраться

Слайдер на jQuery карусель, плагин «carouFredSel»

1
2
Следующая
Показаны 1-15 из 18

#1 20 апреля 2013 в 10:25

есть набор картинок
необходимо сделать слайдер
У самого руки кривые — слайдер ни как не получается
followdesign.com/development/2011/11/19/jquery-karuseli-rotatory-i-skrollery-chast-1.html — ссылка на статью

JavaScript

$("#foo2").carouFredSel({
	circular: false,
	infinite: false,
	auto 	: false,
	prev	: {	
		button	: "#foo2_prev",
		key		: "left"
	},
	next	: { 
		button	: "#foo2_next",
		key		: "right"
	},
	pagination	: "#foo2_pag"
});

HTML

<div class="image_carousel">
	<div id="foo2">
		<img src="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
		<img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
		<img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
		<img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
		<img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
		<img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
		<img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
		<img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
		<img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
		<img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
		<img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
		<img src="/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
	</div>
	<div class="clearfix"></div>
	<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
	<a class="next" id="foo2_next" href="#"><span>next</span></a>
	<div class="pagination" id="foo2_pag"></div>
</div>

CSS

.image_carousel {
	padding: 15px 0 15px 40px;
	position: relative;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
a.prev, a.next {
	background: url(../images/miscellaneous_sprite.png) no-repeat transparent;
	width: 45px;
	height: 50px;
	display: block;
	position: absolute;
	top: 85px;
}
a.prev {			left: -22px;
					background-position: 0 0; }
a.prev:hover {		background-position: 0 -50px; }
a.prev.disabled {	background-position: 0 -100px !important;  }
a.next {			right: -22px;
					background-position: -50px 0; }
a.next:hover {		background-position: -50px -50px; }
a.next.disabled {	background-position: -50px -100px !important;  }
a.prev.disabled, a.next.disabled {
	cursor: default;
}
 
a.prev span, a.next span {
	display: none;
}
.pagination {
	text-align: center;
}
.pagination a {
	background: url(../images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
	width: 15px;
	height: 15px;
	margin: 0 5px 0 0;
	display: inline-block;
}
.pagination a.selected {
	background-position: -25px -300px;
	cursor: default;
}
.pagination a span {
	display: none;
}
.clearfix {
	float: none;
	clear: both;
}

Помогите пожалуйста, только подробней что и куда.

Заранее спасибо

#2 20 апреля 2013 в 14:06

Да поищите по сайту. По моему очень много готовых решений.

#3 20 апреля 2013 в 14:07

Так, сделаем проще
Есть код HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" /> 
<title>Click Carousel</title> 
<script type="text/javascript" src="click-carousel.js"></script>
<script type="text/javascript">
$(function(){
	$("#container").clickCarousel({margin: 10});	
});
</script>  
</head> 
<body> 
 
<div id="wrapper"> 
    <div id="container">   	
		<img src="img1.jpg" alt="Cuba" />
		<img src="img2.jpg" alt="Cuba" />
		<img src="img3.jpg" alt="Cuba" />
		<img src="img4.jpg" alt="Cuba" />
		<img src="img5.jpg" alt="Cuba" />
    </div><!-- container -->
	<img id="carouselLeft" src="leftArr.jpg" alt="Left Arrow" />
	<img id="carouselRight" src="rightArr.jpg" alt="Right Arrow" />
</div><!-- wrapper --> 
 
</body> 
</html>

Есть модуль вывода картинок

Что где прописывать?
что вписать в tpl модуля, что в template.php
может еще куда что прописать нужно

Сам архив слайдера — www.onextrapixel.com/examples/jquery-click-carousel-plugin/clickCarousel.zip

Знающие люди подскажите пожалуйста. У меня выводит набор картинок и кнопки пролистывания за ними и все.

Сегодня в 11:25

#4 20 апреля 2013 в 14:09

Да поищите по сайту. По моему очень много готовых решений.

Dost

у меня есть модуль который выводит из заказного компонента фотки, вот их и нужно вставить в слайдер

#5 20 апреля 2013 в 14:19

Есть офсайт плагина CarouFredSel
с исходниками, документацией и примерами.

#6 20 апреля 2013 в 14:21

Есть офсайт плагина CarouFredSel
с исходниками, документацией и примерами.

oll

Именно от туда и все делаю, но не хочет работать и все

#7 20 апреля 2013 в 14:22

Упростим момент еще
Кто готов за небольшую денежку помочь?

#8 20 апреля 2013 в 14:27

У меня выводит набор картинок и кнопки пролистывания за ними и все.
Значит неработает JS script.Подключи шаблоне add file jscript, а исполняемые функции оберни в literal.На примере других слайдеров легко понять что делать.

#9 20 апреля 2013 в 20:17

Ни фига у меня не выходит, работать не хочет и все!

#10 20 апреля 2013 в 22:06

Показывайте сайт, — помогу

#11 21 апреля 2013 в 00:44

Показывайте сайт, — помогу

IngDesign

serialcenter.ru
новое видео

#12 21 апреля 2013 в 01:01

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

http://watson-studio.com

#13 21 апреля 2013 в 01:51

все файлы которые подключал были доступны, что там и как я делаю не правильно, не понимаю. Не дано просто… Или завтра с нормальной, свежей головой буду ковыряться

#14 21 апреля 2013 в 10:28

все файлы которые подключал были доступны, что там и как я делаю не правильно, не понимаю. Не дано просто… Или завтра с нормальной, свежей головой буду ковыряться

skotskiy

у вас нет вот этого файла — /templates/octopus/js/click-carousel.jsclick-carousel.js. www.serialcenter.ru/templates/octopus/js/click-carousel.jsclick-carousel.js выдает 404. либо закинули не туда, либо назвали неправильно.

лучший сервер для Вашего сайта

#15 21 апреля 2013 в 12:24

это просто опечатка при последнем изменении, правил столько раз, что уже сам забыл где что правил.

Короче сделать сам не могу, хоть убейте. Кто готов помочь за "100 руб на телефон", дам доступ к сайту.

1
2
Следующая
Показаны 1-15 из 18

Что-то с правами(( напутал всё

Сайт стал долго грузится

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Помогите разобраться

Похожие темы

Помогите разобраться с размером изображения в списке

api помогите разобраться

Помогите разобраться))

Помогите разобраться с заголовком, SEO, тегами, тайтлом.

[ЕСТЬ РЕШЕНИЕ] Редактирование прав группы - group_perms, 404 ошибка

[ЕСТЬ РЕШЕНИЕ] Помогите разобраться с css

InstantCMS Team

О проекте

Поддержка

Дополнения