Форум

рони · #21 (**permalink**) 18.11.2014, 14:10

misterX_,
вы ... вам что ...

а зачем вы оставили 3 строку???

рони · #22 (**permalink**) 18.11.2014, 14:12

misterX_,
да и что вы хотите получить по второму клику -- картинка только мигнёт

misterX_ · #23 (**permalink**) 18.11.2014, 14:48

Собственно, маленьких картинок несколько и есть див для большой картинки.
Идея такова:
изначально отображаются например 3 маленьких картинки (типа прелоадера) и в этом диве одна большая (соответствующая первой маленькой). Далее, нажимая на маленькие картинки, происходит изменение большой. Т.е. текущая большая исчезает, а появляется новая, соответствующая нажатой маленькой.
В общем, как-то так...

Все это работает, просто хотелось бы, чтобы картинки исчезали/появлялись плавно.

рони · #24 (**permalink**) 18.11.2014, 15:25

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>

danik.js · #25 (**permalink**) 18.11.2014, 15:51

рони, добавь еще предзагрузку, чтоб зря не простаивать во время fadeOut:

new Image().src = src;

рони · #26 (**permalink**) 18.11.2014, 15:58

danik.js,
!!! точно - никак не мог сообразить как добавить

рони · #27 (**permalink**) 18.11.2014, 16:08

и complete для комплекта

Форум

Справочник

Discord чат

Курсы javascript