| Dilettante_Pro |
30.06.2016 15:02 |
pavelrer,
Небольшая иллюстрация
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".additional-images img.product-image").click(function () {
var src = $(this).attr("src");
// $(".main-image img").attr("src", src);
$(this).parent().parent().parent().find(".main-image img").attr("src", src);
});
});
</script>
</head>
<body>
<div class="spacer" style="position: absolute; width: 300px; height: 400px; border: 1px solid black">
<div class="vm-product-media-conteiner" style="position: relative; width: 300px;
height: 300px;">
<div class="main-image">
<img src="http://javascript.ru/cat/list/dom.gif" style="position: relative; width: 100%; height: 100%" />
</div>
</div>
<div class="additional-images" style="position: relative; width: 300px; height: 100px">
<div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 0%;
top: 0%; border: 1px solid black">
<img class="product-image" src="http://javascript.ru/cat/list/dom.gif" style="position: relative; width: 100px;
height: 100px" />
</div>
<div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 33.3%;
top: 0%; border: 1px solid black">
<img class="product-image" src="http://javascript.ru/cat/list/event.gif" style="position: relative; width: 100px;
height: 100px;" />
</div>
<div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 66.6%;
top: 0%; border: 1px solid black">
<img class="product-image" src="http://javascript.ru/cat/list/integr.jpg" style="position: relative; width: 100px;
height: 100px;" />
</div>
</div>
</div>
<div class="spacer" style="position: absolute; width: 300px; height: 400px; left:315px; border: 1px solid black">
<div class="vm-product-media-conteiner" style="position: relative; width: 300px;
height: 300px;">
<div class="main-image">
<img src="http://javascript.ru/cat/list/donkey.gif" style="position: relative; width: 100%; height: 100%" />
</div>
</div>
<div class="additional-images" style="position: relative; width: 300px; height: 100px">
<div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 0%;
top: 0%; border: 1px solid black">
<img class="product-image" src="http://javascript.ru/cat/list/donkey.gif" style="position: relative; width: 100px;
height: 100px" />
</div>
<div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 33.3%;
top: 0%; border: 1px solid black">
<img class="product-image" src="http://javascript.ru/cat/list/libs.jpg" style="position: relative; width: 100px;
height: 100px;" />
</div>
<div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 66.6%;
top: 0%; border: 1px solid black">
<img class="product-image" src="http://javascript.ru/cat/list/mobile.jpg" style="position: relative; width: 100px;
height: 100px;" />
</div>
</div>
</div>
</body>
</html>
|