Как отключить увеличение картинок при малом разрешении?

Question

[Юра]

Привет, как в скрипт добавить условие например mobileWidth : 768; что бы отключить увеличение картинок при разрешении 768 рх и меньше?

$(document).ready(function() {
	$(".imgzoom ").click(function(){	                           // Событие клика на маленькое изображение
	  	var img = $(this);	                                       // Получаем изображение, на которое кликнули
		var src = img.attr('src');                                 // Достаем из этого изображения путь до картинки
		$("body").append("<div class='popupcon'>"+                 // Добавляем в тело документа разметку всплывающего окна
						 "<img src='"+src+"' class='imgpopup' />"+ // Само увеличенное фото
						 "</div>"); 
		$(".popupcon").fadeIn(500);                                // Медленно выводим изображение
		$(".popupcon").click(function(){	                       // Событие клика на затемненный фон	   
			$(".popupcon").fadeOut(500);	                       // Медленно убираем всплывающее окно
			setTimeout(function() {	                               // Выставляем таймер
			  $(".popupcon").remove();                             // Удаляем разметку всплывающего окна
			}, 500);
		});
	});
});

Answer 1

[Влад]

var mobileWidth  = 768;
$(document).ready(function() {
  $(".imgzoom ").click(function(){	                           // Событие клика на маленькое изображение
    if(window.screen.width > mobileWidth){	
      var img = $(this);	                                       // Получаем изображение, на которое кликнули
      var src = img.attr('src');                                 // Достаем из этого изображения путь до картинки
      $("body").append("<div class='popupcon'>"+                 // Добавляем в тело документа разметку всплывающего окна
             "<img src='"+src+"' class='imgpopup' />"+ // Само увеличенное фото
             "</div>"); 
      $(".popupcon").fadeIn(500);                                // Медленно выводим изображение
      $(".popupcon").click(function(){	                       // Событие клика на затемненный фон	   
        $(".popupcon").fadeOut(500);	                       // Медленно убираем всплывающее окно
        setTimeout(function() {	                               // Выставляем таймер
          $(".popupcon").remove();                             // Удаляем разметку всплывающего окна
        }, 500);
      });
    }
  });
});

Вроде так

Comments

[Юра]

Прошу прощения за первый комент, удалил, при просмотре на телефоне и в мобильной версии хрома на десктопе вроде работает, а в полноценном режиме браузера при с ужении страницы не работает, потому и поторопился написать, что не работает. Это можно как то поправить? Что бы и при с ужении страницы браузера, увеличение картинки тоже бы отключалось.

Привожу способ подключения:

<script src="/template/js/imgzoom.js" type="text/javascript"></script>

картинка с классом class="imgcon imgzoom"

стиль

.imgzoom   { cursor:pointer;}
.popupcon { position:fixed; display:none; background:rgba(0,0,0,0.5); left:0; top:0; width:100%; height:100%; text-align:center; overflow:hidden; box-sizing:border-box;}
.imgpopup { cursor:pointer; position:relative; z-index:97; border:1px solid #DEDEDE; border-radius:2px; background:#FFFFFF; max-width:70%; max-height:70%; margin:0 auto; margin:5% 0 0 0; padding:5px;}

[Влад]

Если правильно понял, то браузер сжимается до большей ширины, чем прописано в условии
var mobileWidth = 768;
Из-за этого и не работает.