Плавность смены картинки
Всем доброго дня.
В общем есть такой простой код
$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').replace('small','big'));
});
этот код при нажатии на маленькую картинку отображает соответствующую ей большую картинку путем подмены адреса. Вопрос - как сделать чтобы это происходило плавно? |
|
Не хотелось бы использовать какие-то дополнительные сборки.
Хотелось бы как-то это реализовать при помощи fadeIn/fadeOut по возможности. В общем сделал вот так
$('#thumbs').delegate('img','click', function(){
$('#largeImage').fadeOut("slow");
$('#largeImage').attr('src',$(this).attr('src').replace('small','big')).fadeIn("slow");
});
Что-то туплю. Он почему-то теперь меняет сперва картинку, а потом ее еще раз плавно отображает Как убрать эту быструю смену в начале? |
Забейте и вкачивайте сразу большие картинки. Они же, я так думаю, у вас условно большие, то есть относительно маленьких, а не на самом деле портянки в 10К?
А с нормальным размером управляется css или самый примитивный код. |
Браузеры сейчас соревнуются за качество интерполяции. ФФ так вообще из кожи лезет, как тот Врубель дорисовывает уже когда все выставлено.
|
misterX_,
3 строка должна стоять во второй в fadeOut формат смотрите в документации |
Цитата:
С документации начал, когда написал этот код. Просто не пойму, почему при переключении он сперва быстро переключает на новую большую картинку, а потом уже еще раз ее плавно показывает как нужно. |
misterX_,
потому что смена src мгновенно а анимация растянута во времени ... Цитата:
|
kostyanet, ну вопрос ведь еще в объеме трафика, ты не подумал об этом? Или всякие lazy-load делают от нефиг делать?
|
Цитата:
По ходу FadeOut так не умеет :-( |
Цитата:
Цитата:
|
Цитата:
$(selector).fadeOut(speed,callback); |
Это все так :-) callback там присутствует
Просто
$('#largeImage').fadeOut("slow",$('#largeImage').attr('src',$(this).attr('src').replace('small','big')));
не дает почему-то плавности. Пробовал выставлять время цифрами - даже при значении 1000 ничего не меняется. |
misterX_, каким боком у тебя это callback?
|
Цитата:
|
misterX_,
оберните строку в анонимную функцию |
Да, точно.
обернул в анонимную
$('#largeImage').fadeOut("slow",(function(){$('#largeImage').attr('src',$(this).attr('src').replace('small','big'))})());
теперь вообще не пашет. что-то упускаю наверное. |
misterX_,
нафига обернуть и тутже снять -- что было то и осталось уберите все круглые скобки нафиг |
misterX_,
$('#largeImage').fadeOut("slow",function(){$('#largeImage').attr('src',$(this).attr('src').replace('small','big'))});
|
Вот что получилось
$('#thumbs').delegate('img','click', function(){
$('#largeImage').fadeOut("slow",function(){$('#largeImage').attr('src',$(this).attr('src').replace('small','big'))}); $('#largeImage').attr('src',$(this).attr('src').replace('small','big')).fadeIn("slow"); });
Первый раз отрабатывает все норм, если кликаешь еще раз, опять быстро показывает картинку а потом ее же плавно. Если почистить кэш, то опять первый раз нормально. |
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, время: 04:03. |