Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   $(this).find('.superbox-img').data('img'); (https://javascript.ru/forum/jquery/58875-%24-find-%27-superbox-img%27-data-%27img%27-%3B.html)

Nikitos* 15.10.2015 01:46
$(this).find('.superbox-img').data('img');
 
Уважаемые нужна помощь, всю голову уже сломал.

Имеем карточку товара (DIV), открывается (display: block;) при клике на кнопку товара. На карточке, 4 превью и 1 большая фотография. Карточка при открытии заполняется следующим образом:

...
var src_image1s = "http://.../111111.jpg";
$('.superbox-img').attr("src", src_image1s);
...



При клике на превью большая фотография меняется, реализовал вот так:

$('.superbox-list').click(function() {

				var step1 = $("div").find('.head1').find('.zoom').find('img');
				
        		var imgData = $(this).find('.superbox-img').data('img');
								
				step1.attr('src', imgData);
				
		alert(imgData);		
		
			});


т.е. я ищу src фотки из одного DIV и обновляю во втором, и вроде все хорошо. Закрываем DIV (display: none;).

Открываем его снова, но с уже другой кнопки и пихаем другие фотографии:

...
var src_image1s = "http://.../222222.jpg";
$('.superbox-img').attr("src", src_image1s);
...


Видим в превью новую фотографию 222222.jpg
Кликаем на превью (вызываем туже функцию, что и в первый раз):

$('.superbox-list').click(function() {

				var step1 = $("div").find('.head1').find('.zoom').find('img');
				
        		var imgData = $(this).find('.superbox-img').data('img');
								
				step1.attr('src', imgData);
				
		alert(imgData);		
		
			});


И тут какая-то фигня, большая фотография всплывает из первого кейса. Алерт показывает src первой фотографии.

Хотя физически src источника обновляется при каждом открытии DIV (новое содержание DIV видно в отладчике), и функция уже должна тянуть его, а она откуда-то тянет первую ссылку.

В какую сторону копать?

рони 15.10.2015 07:44
Nikitos*,
сделайте полноценный макет, так можно только гадать то ли картинка не успевает прогрузится толи вы берёте данные только из первого превью куда бы ни кликнули.

Nikitos* 15.10.2015 10:57
Сделал макет целиком. Алгоритм действий такой: Кнопка 1, кликаем по всем превьюшкам, закрываем крестиком, Кнопка 2, кликаем по новым превьюшкам ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Пример</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

;(function($) {
		
	$.fn.SuperBox = function(options) {
		
			return this.each(function() {

			$('.superbox-list').click(function() {

				var step1 = $("div").find('.head1').find('.zoom').find('img');

        		var imgData = $(this).find('.superbox-img').data('img');
								
				step1.attr('src', imgData);
			
			//alert(imgData);		
		
			});
				
			
		});
	};
})(jQuery);

$(function() {
		
	// Call SuperBox
	$('.superbox').SuperBox();
		
	});

$(function() {

	$('.superbox-close').click(function() {

$('.head0').fadeToggle('fast');
    
    
	});
});


</script>

<style type="text/css">

.head0 {
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    outline: medium none;
    position: fixed;
    width: 300px;
    height: 453px;
    min-height: 453px;
    padding: 10px;
    border-radius: 4px;
    background: -moz-linear-gradient(top,#f7f7f7,#efefef);
    background: -webkit-gradient(linear,left top,left bottom,from(#f7f7f7),to(#efefef));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f7f7f7',endColorstr='#efefef');
    zoom: 1;	
    background: linear-gradient(to bottom,#f7f7f7,#efefef);
    box-shadow: 0 0px 5px rgba(0,0,0,0.28);
    text-transform: none;
    line-height: 18px;
    color: #555;
    font-size: 14px;
    line-height: 18px;
    font-family: Arial, Helvetica, sans-serif;
    opacity: 1;
    z-index: 1101;
}


.head1{
    width: 300px;
    height: 370px;
    position: relative;
    
    border: 0px solid #cecece;
    overflow: hidden;
}

/* SuperBox */
.superbox {
    top: 9px;
    position: relative;
    width: 300px;
    }


.superbox-list {
	display:inline-block;
	*display:inline;
	zoom:1;
	width: 71px;
	height: 71px;
	padding: 2px;
}

.superbox-img {
	max-width:71px;
	width:71px;
	height: 71px;
 	cursor:pointer;
	border: 1px solid #bbb;
}

.superbox-img:hover {
	opacity:0.8;
}

.superbox-close {
	opacity:0.7;
	cursor:pointer;
	position:absolute;
	top: -30px;
	right: -30px;
	background:url([url]http://media.lpgenerator.ru/images/250617/close.gif[/url]) no-repeat center center;
	width:35px;
	height:35px;
}
.superbox-close:hover {
	opacity:1;
	z-index: 6;
}



</style>

</head>

<body bgcolor="#000">

<input type=submit id="block-new483" value="Кнопка 1" />
<input type=submit id="block-new485" value="Кнопка 2" />

<div class="head0">
		<div class ="head1"> 
			<span class="zoom" id="ex1" style="position: relative; overflow: hidden;">
				<img id="my_image" src="http://media.lpgenerator.ru/images/250617/transparent.png" class="headimg" alt="">
			</span>
		</div>

		<!-- SuperBox -->
		<div class="superbox">
			<div class="superbox-list">
				<img id="my_image1" src="" data-img="" alt="" class="superbox-img">
			</div><!--
			--><div class="superbox-list">
				<img id="my_image2" src="" data-img="" alt="" class="superbox-img">
			</div><!--
			--><div class="superbox-list">
				<img id="my_image3" src="" data-img="" alt="" class="superbox-img">
			</div><!--
			--><div class="superbox-list">
				<img id="my_image4" src="" data-img="" alt="" class="superbox-img">
			</div>
		</div>
		<!-- /SuperBox -->


		<div class="superbox-close"></div>

</div>

<script>

$(function() {

	$('#block-new483').click(function() {
    
var src_image1s = "http://media.lpgenerator.ru/images/250617/1rs.jpg";
var src_image1b = "http://media.lpgenerator.ru/images/250617/1rb.jpg";
var src_image2s = "http://media.lpgenerator.ru/images/250617/2rs.jpg";
var src_image2b = "http://media.lpgenerator.ru/images/250617/2rb.jpg";
var src_image3s = "http://media.lpgenerator.ru/images/250617/3rs.jpg";
var src_image3b = "http://media.lpgenerator.ru/images/250617/3rb.jpg";
var src_image4s = "http://media.lpgenerator.ru/images/250617/4rs.jpg";
var src_image4b = "http://media.lpgenerator.ru/images/250617/4rb.jpg";

$('.zoomImg').attr("src", src_image1b);
$("#my_image").attr("src", src_image1b);
$("#my_image1").attr("src", src_image1s);
$("#my_image1").attr("data-img", src_image1b);
$("#my_image2").attr("src",src_image2s);
$("#my_image2").attr("data-img", src_image2b);
$("#my_image3").attr("src", src_image3s);
$("#my_image3").attr("data-img", src_image3b);
$("#my_image4").attr("src", src_image4s);
$("#my_image4").attr("data-img", src_image4b);

$('.head0').fadeToggle('fast');
	});
});


$(function() {

	$('#block-new485').click(function() {

var src_image1s = "http://media.lpgenerator.ru/images/250617/1bs.jpg";
var src_image1b = "http://media.lpgenerator.ru/images/250617/1bb.jpg";
var src_image2s = "http://media.lpgenerator.ru/images/250617/2bs.jpg";
var src_image2b = "http://media.lpgenerator.ru/images/250617/2bb.jpg";
var src_image3s = "http://media.lpgenerator.ru/images/250617/3bs.jpg";
var src_image3b = "http://media.lpgenerator.ru/images/250617/3bb.jpg";
var src_image4s = "http://media.lpgenerator.ru/images/250617/4bs.jpg";
var src_image4b = "http://media.lpgenerator.ru/images/250617/4bb.jpg";

$('.zoomImg').attr("src", src_image1b);
$("#my_image").attr("src", src_image1b);
$("#my_image1").attr("src", src_image1s);
$("#my_image1").attr("data-img", src_image1b);
$("#my_image2").attr("src",src_image2s);
$("#my_image2").attr("data-img", src_image2b);
$("#my_image3").attr("src", src_image3s);
$("#my_image3").attr("data-img", src_image3b);
$("#my_image4").attr("src", src_image4s);
$("#my_image4").attr("data-img", src_image4b);

$('.head0').fadeToggle('fast');
	});
});

 
</script>

</body>

</html>

рони 15.10.2015 11:39
Nikitos*,
для data-img использовать data({})
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Пример</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />



<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

;(function($) {

	$.fn.SuperBox = function(options) {

			return this.each(function() {

			$('.superbox-list').click(function() {

				var step1 = $('#my_image');

        		var imgData = $(this).find('.superbox-img').data('img');

				step1.attr('src', imgData);

			//alert(imgData);

			});


		});
	};
})(jQuery);

$(function() {

	// Call SuperBox
	$('.superbox').SuperBox();

	});

$(function() {

	$('.superbox-close').click(function() {

$('.head0').fadeToggle('fast');


	});
});


</script>

<style type="text/css">

.head0 {
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    outline: medium none;
    position: fixed;
    width: 300px;
    height: 453px;
    min-height: 453px;
    padding: 10px;
    border-radius: 4px;
    background: -moz-linear-gradient(top,#f7f7f7,#efefef);
    background: -webkit-gradient(linear,left top,left bottom,from(#f7f7f7),to(#efefef));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f7f7f7',endColorstr='#efefef');
    zoom: 1;
    background: linear-gradient(to bottom,#f7f7f7,#efefef);
    box-shadow: 0 0px 5px rgba(0,0,0,0.28);
    text-transform: none;
    line-height: 18px;
    color: #555;
    font-size: 14px;
    line-height: 18px;
    font-family: Arial, Helvetica, sans-serif;
    opacity: 1;
    z-index: 1101;
}


.head1{
    width: 300px;
    height: 370px;
    position: relative;

    border: 0px solid #cecece;
    overflow: hidden;
}

/* SuperBox */
.superbox {
    top: 9px;
    position: relative;
    width: 300px;
    }


.superbox-list {
	display:inline-block;
	*display:inline;
	zoom:1;
	width: 71px;
	height: 71px;
	padding: 2px;
}

.superbox-img {
	max-width:71px;
	width:71px;
	height: 71px;
 	cursor:pointer;
	border: 1px solid #bbb;
}

.superbox-img:hover {
	opacity:0.8;
}

.superbox-close {
	opacity:0.7;
	cursor:pointer;
	position:absolute;
	top: -30px;
	right: -30px;
	background:url(http://media.lpgenerator.ru/images/250617/close.gif) no-repeat center center;
	width:35px;
	height:35px;
}
.superbox-close:hover {
	opacity:1;
	z-index: 6;
}



</style>

</head>

<body bgcolor="#000">

<input type=submit id="block-new483" value="Кнопка 1" />
<input type=submit id="block-new485" value="Кнопка 2" />

<div class="head0">
		<div class ="head1">
			<span class="zoom" id="ex1" style="position: relative; overflow: hidden;">
				<img id="my_image" src="http://media.lpgenerator.ru/images/250617/transparent.png" class="headimg" alt="">
			</span>
		</div>

		<!-- SuperBox -->
		<div class="superbox">
			<div class="superbox-list">
				<img id="my_image1" src="" data-img="" alt="" class="superbox-img">
			</div><!--
			--><div class="superbox-list">
				<img id="my_image2" src="" data-img="" alt="" class="superbox-img">
			</div><!--
			--><div class="superbox-list">
				<img id="my_image3" src="" data-img="" alt="" class="superbox-img">
			</div><!--
			--><div class="superbox-list">
				<img id="my_image4" src="" data-img="" alt="" class="superbox-img">
			</div>
		</div>
		<!-- /SuperBox -->


		<div class="superbox-close"></div>

</div>

<script>

$(function() {

	$('#block-new483').click(function() {

var src_image1s = "http://media.lpgenerator.ru/images/250617/1rs.jpg";
var src_image1b = "http://media.lpgenerator.ru/images/250617/1rb.jpg";
var src_image2s = "http://media.lpgenerator.ru/images/250617/2rs.jpg";
var src_image2b = "http://media.lpgenerator.ru/images/250617/2rb.jpg";
var src_image3s = "http://media.lpgenerator.ru/images/250617/3rs.jpg";
var src_image3b = "http://media.lpgenerator.ru/images/250617/3rb.jpg";
var src_image4s = "http://media.lpgenerator.ru/images/250617/4rs.jpg";
var src_image4b = "http://media.lpgenerator.ru/images/250617/4rb.jpg";

$('.zoomImg').attr("src", src_image1b);
$("#my_image").attr("src", src_image1b);
$("#my_image1").attr("src", src_image1s);
$("#my_image1").data({"img" :  src_image1b});
$("#my_image2").attr("src",src_image2s);
$("#my_image2").data({"img" :  src_image2b});
$("#my_image3").attr("src", src_image3s);
$("#my_image3").data({"img" :  src_image3b});
$("#my_image4").attr("src", src_image4s);
$("#my_image4").data({"img" :  src_image4b});

$('.head0').fadeToggle('fast');
	});
});


$(function() {

	$('#block-new485').click(function() {

var src_image1s = "http://media.lpgenerator.ru/images/250617/1bs.jpg";
var src_image1b = "http://media.lpgenerator.ru/images/250617/1bb.jpg";
var src_image2s = "http://media.lpgenerator.ru/images/250617/2bs.jpg";
var src_image2b = "http://media.lpgenerator.ru/images/250617/2bb.jpg";
var src_image3s = "http://media.lpgenerator.ru/images/250617/3bs.jpg";
var src_image3b = "http://media.lpgenerator.ru/images/250617/3bb.jpg";
var src_image4s = "http://media.lpgenerator.ru/images/250617/4bs.jpg";
var src_image4b = "http://media.lpgenerator.ru/images/250617/4bb.jpg";

$('.zoomImg').attr("src", src_image1b);
$("#my_image").attr("src", src_image1b);
$("#my_image1").attr("src", src_image1s);
$("#my_image1").data({"img" :  src_image1b});
$("#my_image2").attr("src",src_image2s);
$("#my_image2").data({"img" :  src_image2b});
$("#my_image3").attr("src", src_image3s);
$("#my_image3").data({"img" :  src_image3b});
$("#my_image4").attr("src", src_image4s);
$("#my_image4").data({"img" :  src_image4b});

$('.head0').fadeToggle('fast');
	});
});


</script>

</body>

</html>

Nikitos* 15.10.2015 12:13
Спасибо огромное !!!

рони 15.10.2015 12:33
Nikitos*,
на всякий случай для однотипных действий существуют циклы (код будет раз 10 меньше)


Часовой пояс GMT +3, время: 03:52.