Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.02.2014, 14:57
Новичок на форуме
Отправить личное сообщение для Kasper28 Посмотреть профиль Найти все сообщения от Kasper28
 
Регистрация: 09.02.2014
Сообщений: 9

Отображение скрытого блока из карусели
Всем доброго времени суток.
Пробую реализовать отображение скрытых блоков при нажатии на элемент карусели. Карусель зацикленная и проблема в том, что на повторной прокрутке карусели, или когда листаешь назад, скрытые блоки не отображаются.
Причина, как я понимаю, в том, что в зацикленной карусели уже прокрученные элементы удаляются, а в начало уже встают как бы новые. Возможно, поэтому мой скрипт отображения/скрытия их не видит. Не могу решить проблему.
Если ваш стиль помощи - наводки и подсказки, пусть они будут максимально прозрачными Буду благодарен за помощь.

Скрытый блок
<div id='container'>
<div id="d1" class="up">
<div id="close" class="scroll-up">Сверунть</div>
</div>
				
<div id="d2" class="up">
<div id="close" class="scroll-up">Свернуть</div>
</div>
				
<div id="dn" class="up">
<div  id="close" class="scroll-up"></div>
</div>


Карусель
<ul id='spisok'>
  <li data-id='1'>
    <div class="b-carousel-block" >
      <img src="" alt="image-carusel" />
    </div>
  </li>
  <li data-id='2'>
    <div class="b-carousel-block" >
      <img src="" alt="image-carusel" />
  </div>
		...
   <li data-id='n'>
     <div class="b-carousel-block"> 
         <img src="" alt="image-carusel" />
     </div>
   </li>
</ul>


JS карусели
$(document).ready(function(){
	$(".b-carousel-button-right").click(function(){ 
		$(".h-carousel-items").animate({left: "-242px"}, 200); 
		setTimeout(function () { 
			$(".h-carousel-items .b-carousel-block").eq(0).clone().appendTo(".h-carousel-items"); 
			$(".h-carousel-items .b-carousel-block").eq(0).remove(); 	
			$(".h-carousel-items").css({"left":"0px"}); 
		}, 300);
	});
	$(".b-carousel-button-left").click(function(){ 		
		$(".h-carousel-items .b-carousel-block").eq(-1).clone().prependTo(".h-carousel-items"); 
		$(".h-carousel-items").css({"left":"-242px"}); 	
		$(".h-carousel-items").animate({left: "0px"}, 200); 
		$(".h-carousel-items .b-carousel-block").eq(-1).remove(); 
	});
});


JS скрытого блока
$(document).ready(function (){
	$('#spisok > li').click(function (){
		$('#container > div').hide();
		var i=$(this).data('id');
		$('#d'+i).slideDown();
	});
	    $(".scroll-up").click(function () {
        $('#container > div').slideUp();
    })
});
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2014, 15:05
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А где вживую увидеть можно?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2014, 15:20
Новичок на форуме
Отправить личное сообщение для Kasper28 Посмотреть профиль Найти все сообщения от Kasper28
 
Регистрация: 09.02.2014
Сообщений: 9

http://dmitriy.pro/
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2014, 15:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Kasper28,
нутро div из li вынули -- выглядит всё одинаково -- но сейчас над картинкой нет никакого li и нет никакого var i=$(this).data('id');

список li пуст кликать неначего $('#spisok > li') ==
<ul id="spisok">
							<li data-id="1">
							
							</li>
							
							<li data-id="2">
							
							</li>
							
							<li data-id="3">
							
							</li>
							
							<li data-id="4">
							
							</li>
							
							<li data-id="5">
							
							</li>

							<li data-id="6">
							
							</li>

							<li data-id="7">
							
							</li>
							
							</ul>


ну и так на всякий
<div class="scroll-up" id="close">Сверунть<img src="http://dmitriy.pro/wp-content/themes/dima/img/scroll2.png"></div>
Ответить с цитированием
  #5 (permalink)  
Старый 11.02.2014, 16:03
Новичок на форуме
Отправить личное сообщение для Kasper28 Посмотреть профиль Найти все сообщения от Kasper28
 
Регистрация: 09.02.2014
Сообщений: 9

Сообщение от рони
div из li вынули -- выглядит всё одинаково -- но сейчас над картинкой нет никакого li и нет никакого var i=$(this).data('id');

список li пуст кликать неначего $('#spisok > li') ==
Не понимаю, объясните, пожалуйста, более развернуто
Ответить с цитированием
  #6 (permalink)  
Старый 11.02.2014, 16:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Kasper28,
это первый скрипт
$(document).ready(function(){

	$(".b-carousel-button-right").click(function(){ // при клике на правую кнопку запускаем следующую функцию:
		$(".h-carousel-items").animate({left: "-242px"}, 200, function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
            var first = $("#spisok li:first");
            first.clone().appendTo("#spisok"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
			first.remove(); // удаляем первый элемент карусели
			$(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
		}); // производим анимацию: блок с набором картинок уедет влево на 230 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.

	});

	$(".b-carousel-button-left").click(function(){ // при клике на левую кнопку выполняем следующую функцию:
        var last = $("#spisok li:last");
        last.clone().prependTo("#spisok"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора
		$(".h-carousel-items").css({"left":"-242px"}); // устанавливаем смещение набора -222px
		$(".h-carousel-items").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
		last.remove(); // выбираем последний элемент карусели и удаляем его
	});

});


это второй
$(document).ready(function (){
	$('#spisok').on('click', 'li', function (){
        var i=$(this).data('id');
        $('#container > div').not($('#d'+i)).hide();
		$('#d'+i).slideDown();
	});
	    $(".scroll-up").click(function () {
        $('#container > div').slideUp();
    })

});


поменяйте

Сообщение от Kasper28
Не понимаю, объясните, пожалуйста, более развернуто
это удалить div $(".h-carousel-items .b-carousel-block").eq(0).remove(); из li -- li пуст

если удалили но ничего невернули по какому месту кликнуть чтоб это $('#spisok > li').click произошло?
Ответить с цитированием
  #7 (permalink)  
Старый 11.02.2014, 16:40
Новичок на форуме
Отправить личное сообщение для Kasper28 Посмотреть профиль Найти все сообщения от Kasper28
 
Регистрация: 09.02.2014
Сообщений: 9

Помогло. Спасибо вам большое! Сейчас буду вникать в исправление
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отображение при клике + закрытие предыдущего Galyanov jQuery 8 13.11.2013 20:01
слайд панели tadjik1 Элементы интерфейса 22 02.04.2012 17:13
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21
отображение скрытого div`a по типу диалоговых окон eskamilho Элементы интерфейса 1 09.01.2010 22:36
размер скрытого блока hangover Общие вопросы Javascript 4 04.12.2009 13:40