Впервые пришлось писать на форуме, не найдя ответа у всезнающих поисковиков. Может формулирую не верно, а может ещё что. Но, надеюсь на помощь.
История следующая: есть картинки, сгруппированные по 2-3, формирует одинаковый атрибут "rel". Организовал простейшую листалку внутри группы. Идея такая: при нажатии на следующий-предыдущий находится "rel" последнего показанного элемента, записывается в rel стрелок крутилки как "rel элемента | индекс элемента в группе".
При следующем вызове листалки всё повторяется. И всё отлично работало на сайтике с jQuery, но вчера зашёл на него после большого перерыва - и ужаснулся - крутилка работает только раз, потом в "rel" записывает "NaN".
Вот HTML картинок и листалки
<!-- Дивы с картинками -->
<div class = "responsesOutContainer">
<div class = "responsesImgContainer" style ="">
<div class = "mainRespPic" rel = "a601" style ="background: url('http://site.ru/images/responses/result624_1.jpg')"></div>
<div class = "minRespPic" rel = "a601" style ="background: url('http://site.ru/images/responses/result624_2.jpg')"></div>
</div>
<div class = "responseTextContainer">
<p>текст-текст</p>
</div>
</div>
<div class = "responsesOutContainer">
<div class = "responsesImgContainer" style ="">
<div class = "mainRespPic" rel = "a602" style ="background: url('http://site.ru/images/responses/result625_1.jpg')"></div>
<div class = "minRespPic" rel = "a602" style ="background: url('http://site.ru/images/responses/result625_2.jpg')"></div>
</div>
<div class = "responseTextContainer">
<p>текст-текст</p>
</div>
</div>
<div class = "responsesOutContainer">
<div class = "responsesImgContainer" style ="">
<div class = "mainRespPic" rel = "a603" style ="background: url('http://site.ru/images/responses/result628_1.jpg')"></div>
<div class = "minRespPic" rel = "a603" style ="background: url('http://site.ru/images/responses/result628_2.jpg')"></div>
</div>
<div class = "responseTextContainer">
<p>текст-текст</p>
</div>
</div>
<!-- Вывод в листалку -->
<div id = 'showBigPhoto' style = "display: none;">
<div class = 'switchPics leftArrow'></div>
<div class = 'switchPics rightArrow'></div>
<img src = 'http://site.ru/images/close_pic.png' class = 'closePic'>
<img src = "" id = "showBigPhotoImg" />
</div>
И javascript, который работал
$(".minRespPic").click(function(){
showPics($(this));
});
$(".mainRespPic").click(function(){
showPics($(this));
});
function showPics($that) {
var $set = $that.attr("rel"), // Наша группа
$image = $that.css("background"),
$aparts = $image.split("url("), // выдёргиваем картинку из background: url('')
$parts,
$index = $that.index("[rel = "+$set+"]"),
$next = ($index + 1) >= $("[rel = "+$set+"]").length ? 0 : $index + 1,
$prev = $index <= 0 ? $("[rel = "+$set+"]").length-1 : $index - 1,
mrgTop = 0, mrgLeft = 0, $pPrev = "", $pNext = "";
$parts = $aparts[1].split(") ");
$image = $parts[0]; // здесь картинка, всё ок
$pPrev = ""+$set+"|"+$prev+""; // То, что и должно быть в rel, к примеру "a621|0" или "a621|1"
$pNext = ""+$set+"|"+$next+"";
console.log('prev = ',$pPrev,' next = ',$pNext, 'types = ',typeof($pPrev),typeof($pNext)); // проверяем, выводит всё верно
/****** всё эпичное где-то здесь ******/
$("#showBigPhoto .leftArrow").attr("rel", $pPrev); // При вызове со стрелки выводит NaN
$("#showBigPhoto .rightArrow").attr("rel", $pNext); // При вызове со стрелки выводит NaN
/****** всё, уже не работает ******/
$("#showBigPhotoImg").attr("src", $image);
$("#showBigPhoto").fadeIn();
/*Просто косметика*/
mrgTop = -1/2*$("#showBigPhotoImg").height();
mrgLeft = -1/2*$("#showBigPhotoImg").width();
$("#showBigPhotoImg").css("marginLeft", mrgLeft).css("marginTop", mrgTop);
}
$(".switchPics").click(function(){ // обработка нажатия кнопок листалки
var $that = $(this),
$slide = $that.attr("rel"),
$attrs = $slide.split("|"), // attrs[0] - группа, attrs[1] - индекс
$pointer = $("[rel = "+$attrs[0]+"]").eq($attrs[1]); // селектор
console.log($attrs, $slide); // всё ок, показывает что надо
showPics($pointer);
});
Очень нужна ваша помощь!
