misterX_,
вы ... вам что ... а зачем вы оставили 3 строку??? |
misterX_,
да и что вы хотите получить по второму клику -- картинка только мигнёт |
Собственно, маленьких картинок несколько и есть див для большой картинки.
Идея такова: изначально отображаются например 3 маленьких картинки (типа прелоадера) и в этом диве одна большая (соответствующая первой маленькой). Далее, нажимая на маленькие картинки, происходит изменение большой. Т.е. текущая большая исчезает, а появляется новая, соответствующая нажатой маленькой. В общем, как-то так... Все это работает, просто хотелось бы, чтобы картинки исчезали/появлялись плавно. |
misterX_,
:-?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(function() {
var $img = $("#photoContainer img"),
$large = $('#largeImage');
$large.load(function() {
$large.fadeIn("slow")
})
$img.click(function() {
var src = this.src.replace('thumb', 'lg');
new Image().src = src;
$large.fadeOut("slow", function() {
this.src = src;
this.complete && $(this).load()
})
});
});
</script>
</head>
<body>
<div id="photoContainer">
<img src="https://js.cx/gallery/img2-thumb.jpg">
<img src="https://js.cx/gallery/img3-thumb.jpg">
<img src="https://js.cx/gallery/img4-thumb.jpg">
<img src="https://js.cx/gallery/img5-thumb.jpg">
<img src="https://js.cx/gallery/img6-thumb.jpg">
</div>
<img src="https://js.cx/gallery/img2-lg.jpg" id="largeImage">
</body>
</html>
|
рони, добавь еще предзагрузку, чтоб зря не простаивать во время fadeOut:
new Image().src = src; |
danik.js,
!!! точно - никак не мог сообразить как добавить :thanks: |
:write: и complete для комплекта :dance:
|
| Часовой пояс GMT +3, время: 23:15. |