Как сделать, чтобы по клику на изображение появлялось в 2 раза больше изображение(попап) без плагинов?

Question

[olya_097]

Как сделать, чтобы по клику на изображение появлялось в 2 раза больше изображение(попап) без плагинов?

Answer 1

[hzzzzl]

вот нашел такой трюк даже без яваскрипта, на css
https://codepen.io/ongtiffany/pen/BoOeQV

а вообще ответ это "написать свой плагин" тогда, там несложно как бы
делаешь div в котором будешь рисовать большую картинку "с крестиком", по умолчанию он скрыт
по клику на картинку div становится видимым, и туда подставляется нужная картинка

Comments

[olya_097]

hzzzzl, спасибо
просто мне говорили, что будет 2 тысячи строк
не поняла к чему это

хотела узнать советы
может полезные ссылки
но огромное спасибо за решение!

[hzzzzl]

olya_097, вот кстати дословно то что я написал :)
https://codepen.io/Muhnad/pen/dMbXNb

$(".popup img").click(function () {
        var $src = $(this).attr("src");   // по клику берет аттрибут
        $(".show").fadeIn();   // показывает див
        $(".img-show img").attr("src", $src);   // подставляет img src
    });

можно и на 3000 строк написать, если функционалом и украшательствами обвесить :D

[olya_097]

hzzzzl, о
вообще прекрасно
спасибо
а зачем на вот это -

$("span, .overlay").click(function () {
        $(".show").fadeOut();
    });

и можно хрестик вынести за изображение? тоесть по горизонтали он норма стоит
а по вертикали за картинкой
поняли о чем я?

[hzzzzl]

olya_097, это затемнение фона, чтобы можно было закрыть попап, кликнув куда угодно, а не только на крестик

ну а сам крестик это

.img-show span{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    cursor: pointer;
}

здесь поправить координаты как хочется

[olya_097]

hzzzzl, .popup img - это изображение по умолчанию
тоесть маленькое?
а .show .img-show -большое?

[olya_097]

hzzzzl, один нюанс
а если а делаю не через тэг img
а вот так?
тоесть через бэграунд

<div class="gallery__wrap"> 
         <div class="gallery__item">
                      <div class="gallery__image" style="background-image: url(img/news__image.jpg)">  
                      </div>
                        <p class="gallery__description">описание фотки</p>
          </div>
          <div class="gallery__item">
                      <div class="gallery__image" style="background-image: url(img/news__image.jpg)">  
                      </div>
                        <p class="gallery__description">описание фотки</p>
        </div>

[hzzzzl]

olya_097,
ну можно сюда вписать ссылку на картинку, например

<div 
  class="gallery__image"  
  style="background-image: url(img/news__image.jpg)"
  data-img="img/BIG_IMAGE_news__image.jpg">  
</div>

и потом по клику выковыривать ссылку из data-img аттрибута
или еще как-нибудь извратиться

popup img - это изображение по умолчанию
тоесть маленькое?
а .show .img-show -большое?

видимо да :)

[olya_097]

hzzzzl, с вами можно связаться? у меня почти получилось но нето
vk/mail

[olya_097]

hzzzzl, или может сам пример с дата и картинкой

Answer 2

[Александр Шемаханов]

Например можно решить вот так
Примеры:

• Пример 1
  
• Пример 2
  
• Пример 3