Перейти к содержимому

Фотография
- - - - -

Как переделать скрипт слайдера для динамически создаваемых картинок


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
В теме одно сообщение

#1 spocher102

spocher102

    Прохожий

    Топикстартер
  • Участник
  • 0
    13 сообщ.

Отправлено 21 Апрель 2016 в 16:16

есть вот такой простенький слайдер, отлично работает для статично созданных картинок

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/css/index.css">
<script src="/js/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function () {
var small = $("#smallfoto li img"),
    big = $("#bigfoto img");
small.each(function (i, el) {
var next = i + 1 == small.size() ? 0 : i + 1;
$(el).click(function (event) {
			   event.preventDefault();
			   if(big.data("next") == next) return;
			   big.fadeTo(00, 0.1, function () {
				   big.attr({
					   "src": $(el)
						   .parent()
						   .attr("href")
				   })
					   .data({
						   "next": next
					   });
			   });
			   big.fadeTo(800, 1);
		   }
   )
});
big.data({
   "next": 1
})
   .click(function (event) {
	   small.eq($(this)
		   .data("next"))
		   .click()
   })
});
</script>
</head>
<body>
<div id="bigfoto"><img src=""></div>
<ul id="smallfoto">
        <li><a href=""><img src=""></a></li>
        <li><a href=""><img src=""></a></li>
        <li><a href=""><img src=""></a></li>
        <li><a href=""><img src=""></a></li>
        <li><a href=""><img src=""></a></li>
        <li><a href=""><img src=""></a></li>
</ul>
</body>
</html>
 

Но вот стал он нужен для динамически создаваемых картинок(т.е. все что сейчас заключено между тегами body, подставляется динамически), и он их не листает. Подскажите что нужно подправить, понимаю что нужно через $('body').on, да только куда его прикреплять?


  • 0

Спонсор

#2 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 983
    3 516 сообщ.

Отправлено 22 Апрель 2016 в 03:05

Что-то не получилось запустить.

 

Самое простое - это обернуть весь этот кусок (то что внутри ready) в функцию (функцию вынести за ready, а в ready вызывать эту функцию).

Затем при появление нового элемента - копировать всё в буфер через html() (уже с новыми элементами), уничтожать весь блок, затем из буфера возвращать всё и заново запускать функцию.

 

Это конечно не очень хорошие костыли. Минус от этого - вероятно моргание слайдера во время удаления и создания, слайдер начнётся сначала.

 

Выложи данный код на JSFiddle или ещё куда-то. Может тогда будет более правильное решение.


  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей