28.01.2013, 07:11
|
|
Интересующийся
|
|
Регистрация: 09.01.2013
Сообщений: 19
|
|
|
Остановка слайдера если кончаются объекты
Имею написанный вручную слайдер (предложение пользоваться готовыми не актуально). Принцип работы слайдера - из базы берутся объекты(картинки) из них по ширине экрана выставляется количества объектов, Есть 2 стрелки влево и вправо, при нажатии которых линейка объектов сдвигается влево или в право, никак не могу сообразить как сделать остановку на последнем объекте.
Если по простому в базе беру 27 картинок. по ширине у меня помещаются 8 картинок, При нажатии на стрелку вправо, сладер проматывается на 8 картинок, но в конце у меня остается 3 картинки и все остальное пространство белое, как сделать что бы самая последняя картинка была с право и не было пустого пространства
<script type="text/javascript">
$(document).ready(function () {
var sliderObjects = $('#slider-objects');
var butParent = $('.slider-but-parent', sliderObjects);
var butNext = $('.slider-but-next', sliderObjects);
var listObjects = $('ul', sliderObjects);
var objectWidth = 184;
var _width, _placed;
var corectPosition = 0;
var countObject = 0;
var positionPage = 0;
$(window).resize(function() {
_width = $(window).width();
_placed = Math.floor((_width - 122) / objectWidth);
});
$(window).resize();
countObject = listObjects.children().length;
listObjects.width((objectWidth * countObject) + 122);
butParent.live('click', function() {
var positionX = ((objectWidth + 1) * _placed);
listObjects.stop().animate({
left: corectPosition + positionX,
}, 500,function(){
corectPosition += positionX;
console.log(corectPosition);
});
});
butNext.live('click', function() {
var positionX = -((objectWidth + 1) * _placed);
butParent.show();
var pageObject = Math.floor(countObject / _placed);
console.log(positionPage, pageObject);
console.log(countObject - (pageObject * _placed));
if (positionPage <= pageObject - 1) {
listObjects.stop().animate({
left: corectPosition + positionX,
}, 500,'swing',function(){
corectPosition += positionX;
console.log(corectPosition);
positionPage ++;
});
};
});
});
</script>
<section id="slider-objects" class="shadow-10 open">
<a class="slider-but-parent" href="javascript: void(0);"></a>
<div class="slider-overflow">
<ul style="width: 5000px">
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/2"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/3"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/4"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/5"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/6"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
<li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li>
</ul>
</div>
<a class="slider-but-next" href="javascript: void(0);"></a>
</section>
|
|
28.01.2013, 07:29
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
допишите run в BB-тег HTML и добавьте библиотеку jQuery в начало кода
Тогда можно глянуть на действующую модель(или ссылку на тест страницу
[HTML run]
...
[/html]
|
|
28.01.2013, 07:46
|
|
Интересующийся
|
|
Регистрация: 09.01.2013
Сообщений: 19
|
|
<!DOCTYPE html>
<!-- saved from url=(0023)http://pokazdoma.local/ -->
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style=""><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">@media print { .gmnoprint { display:none }}@media screen { .gmnoscreen { display:none }}</style>
<meta content="charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="language" content="ru">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description">
<meta name="keywords">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="icon" type="image/x-icon" href="http://pokazdoma.local/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="http://pokazdoma.local/favicon.ico">
<link sizes="16x16" rel="icon" href="http://pokazdoma.local/favicon.png">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/normalize.min.css" media="all">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/960.css" media="all">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style.17012013.css" media="all">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style.css" media="0">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style(1).css" media="0">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style(2).css" media="0">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style(3).css" media="0">
<script type="text/javascript" src="./pokazdoma.local_files/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./pokazdoma.local_files/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="./pokazdoma.local_files/script.js"></script>
<script type="text/javascript" src="./pokazdoma.local_files/plugins.17012013.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
var baseUrl = "";
/*]]>*/
</script>
<title></title>
<script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/{common,util,marker,map}.js"></script><script type="text/javascript" src="chrome-extension://nhgcieglcpdegkhamigiokdphfhhnlhh/js/injected.js" charset="utf-8"></script><script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/{onion}.js"></script><script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/{controls,infowindow,overlay,stats}.js"></script><script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/ft"></script></head>
<body>
<section id="navigation" class="shadow-10">
<div class="container_12">
<div class="grid_12">
<div class="left-block">
<div id="logo">
<a href="./pokazdoma.local_files/pokazdoma.local.htm"><img src="./pokazdoma.local_files/logo.png" alt=""></a>
</div>
<div id="city">
<script type="text/javascript">
$(document).ready(function () {
var citySelect = $('#city');
var cityClick = $('.dropdown-toggle', citySelect);
var cityLists = $('.dropdown-menu');
var cityDropdown = $('.dropdown > li');
var showMenu = function () {
cityClick.addClass('open');
cityLists.show();
}
var hideMenu = function () {
cityClick.removeClass('open');
cityLists.hide();
}
cityDropdown.live('mouseenter', function() {
showMenu();
}).live('mouseleave', function() {
hideMenu();
});
$('li > a', cityLists).live('click', function() {
hideMenu();
});
});
</script>
<ul class="dropdown">
<li class=""><a class="dropdown-toggle radius-5" href="javascript: void(0);">Алматы<pre class="caret"></pre></a>
<ul class="dropdown-menu shadow-8-5 radius-5" style="display: none;">
<li class="item"><a href="javascript: void(0);">Алматы</a></li>
<li class="item"><a href="javascript: void(0);">Астана</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="main-but">
<a class="btn btn-red" href="javascript: void(0);">Разместиться</a>
</div>
<nav id="menu-main">
<ul>
<li class="item active"><span>Карта</span><pre></pre></li>
<li class="item"><a href="http://pokazdoma.local/object">Недвижимость</a></li>
<li class="item"><a href="http://pokazdoma.local/agency">Агентства</a></li>
</ul>
</nav>
</div>
</div>
</section> <section id="map" style="height: 896px; left: 340px; margin-right: 680px;">
<script type="text/javascript" src="./pokazdoma.local_files/js"></script><script src="./pokazdoma.local_files/main.js" type="text/javascript"></script>
<script type="text/javascript" src="./pokazdoma.local_files/markerwithlabel.js"></script>
<script type="text/javascript" src="./pokazdoma.local_files/markerclusterer.js"></script>
</section><script type="text/javascript">
$(document).ready(function () {
var sliderObjects = $('#slider-objects');
var butParent = $('.slider-but-parent', sliderObjects);
var butNext = $('.slider-but-next', sliderObjects);
var listObjects = $('ul', sliderObjects);
var objectWidth = 184;
var _width, _placed;
var corectPosition = 0;
var countObject = 0;
var positionPage = 0;
$(window).resize(function() {
_width = $(window).width();
_placed = Math.floor((_width - 122) / objectWidth);
});
$(window).resize();
countObject = listObjects.children().length;
listObjects.width((objectWidth * countObject) + 122);
butParent.live('click', function() {
var positionX = ((objectWidth + 1) * _placed);
listObjects.stop().animate({
left: corectPosition + positionX,
}, 500,function(){
corectPosition += positionX;
console.log(corectPosition);
});
});
butNext.live('click', function() {
var positionX = -((objectWidth + 1) * _placed);
butParent.show();
var pageObject = Math.floor(countObject / _placed);
console.log(positionPage, pageObject);
console.log(countObject - (pageObject * _placed));
if (positionPage <= pageObject - 1) {
listObjects.stop().animate({
left: corectPosition + positionX,
}, 500,'swing',function(){
corectPosition += positionX;
console.log(corectPosition);
positionPage ++;
});
};
});
});
</script>
<section id="slider-objects" class="shadow-10 open">
<a class="slider-but-parent" href="javascript: void(0);" style="display: inline;"></a>
<div class="slider-overflow">
<ul style="width: 5090px; left: -4440px;">
<li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li>
<li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li>
<li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li>
<li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li>
<li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li>
</ul>
</div>
<a class="slider-but-next" href="javascript: void(0);"></a>
</section> <section id="dock" class="shadow-10 open" style="height: 866px;">
<div class="dock-content">
<ul id="dock-menu" class="">
<li class="item active">
<div class="icons">
<span class="icon icon-cabinet"></span>
<span class="icon-selected icon-cabinet-active"></span>
</div>
</li>
<li class="item">
<div class="icons">
<span class="icon icon-bookmark"></span>
<span class="icon-selected icon-bookmark-active"></span>
</div>
</li>
</ul>
<div id="panel-cabinet">
Личный кабинет
</div>
</div>
</section> <section id="dock-filter" class="shadow-10 open" style="height: 866px;">
<div>Найти</div>
</section>
</body></html>
|
|
28.01.2013, 07:46
|
|
Интересующийся
|
|
Регистрация: 09.01.2013
Сообщений: 19
|
|
css
/* Скроллинг объектов */
#slider-objects {position: absolute; bottom: 0; left: 0; right: 0; z-index: 10000; background: #efefef; height: 140px;}
#slider-objects .slider-overflow {position: relative; overflow: hidden; margin: 0 61px; height: 140px;}
#slider-objects ul {position: absolute; margin: 1px 0; padding: 0; top:0; left: 0;}
#slider-objects ul li {position: relative; margin: 0 1px 0 0; width: 184px; height: 138px; overflow: hidden; float: left;}
#slider-objects ul li img {width: 184px; height: 138px;}
#slider-objects .slider-but-parent, #slider-objects .slider-but-next {position: absolute; display: block; width: 60px; height: 138px; top: 1px; background: #fff url('/static/images/images_sprite.png');}
#slider-objects .slider-but-parent {left: 0; background-position: 0px 0px; display: none;}
#slider-objects .slider-but-next {right: 0; background-position: 60px 0px;}
|
|
28.01.2013, 07:52
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Цитата:
|
|
как сделать что бы самая последняя картинка была с право и не было пустого пространства
|
Как вариант - проставить последней картинке некий класс, которому css - присвоить float:right; |
|
28.01.2013, 07:55
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от Deff
|
|
и не было пустого пространства
|
Пойду спать - сделайте скриншот - расположите в последнем окне картинки, как желаемо.
Залить и выложить ссылкой(желательно не картинкой - раcтянет топик), можно сюда => http://uploads.ru/
alert("Пока!")
|
|
28.01.2013, 07:57
|
|
Интересующийся
|
|
Регистрация: 09.01.2013
Сообщений: 19
|
|
|
Дело в том что объекты будут постоянно добавлятся и убираться в базе заказчиком.поэтому я думал сделать что бы скрипт просчитывал, но встал в тупике с формулой. в java я новичок
|
|
28.01.2013, 08:12
|
|
Интересующийся
|
|
Регистрация: 09.01.2013
Сообщений: 19
|
|
|
|
|
28.01.2013, 09:11
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
Заклонировать недостаток объектов до полной ширины http://jquery-docs.ru/Manipulation/clone/
Установка класса последнему элементу - очень проста,
var obj = $(".slider-overflow > ul > li > a > img");
var LngObj = obj.length; //Длина массива картинок
obj.eq(LngObj-1).addClass('EndElem'); //Установили класс на последний
Хотя при клонировани до полноразмера - вродь ухищрений не нужно |
|
28.01.2013, 09:44
|
|
Интересующийся
|
|
Регистрация: 09.01.2013
Сообщений: 19
|
|
Сообщение от Deff
|
Заклонировать недостаток объектов до полной ширины http://jquery-docs.ru/Manipulation/clone/
Установка класса последнему элементу - очень проста,
var obj = $(".slider-overflow > ul > li > a > img");
var LngObj = obj.length; //Длина массива картинок
obj.eq(LngObj-1).addClass('EndElem'); //Установили класс на последний
Хотя при клонировани до полноразмера - вродь ухищрений не нужно
|
Не смогли уснуть DEFF?
Попробовал класс прописывается но не срабатывает =(
вот результат http://uploads.ru/7krlM.png
Идея хороша. С клонированием оставлю как запасной вариант, есть мысли почему не срабатывает float? |
|
|
|
