spocher102
Member
- Регистрация
- 22.01.2016
- Сообщения
- 13
есть вот такой простенький слайдер, отлично работает для статично созданных картинок
<!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, да только куда его прикреплять?
<!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, да только куда его прикреплять?
