Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.08.2016, 06:14
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

При повороте устройства не каждый раз элемент меняет заданные стили
Уважаемые коллеги, доброго времени суток.

Встал вопрос, при создании плагина jquery просмотра картинок на сайте, как отследить поворот экрана или смену ориентации устройства.

Суть в следующем, при клике на картинку она всплывает либо height = 100% либо width = 100%. Все работает отлично на всех устройствах от 320px до бесконечности. НО!!!

Смотрю я его работу на iphone 4s (на самом деле не важно на каком), и если я разворачиваю картинку и меняю ориентацию она не адаптируется под новые размеры. Помогает закрыть и открыть заново картинку. Но это я думаю не правильно. Хотя если честно просмотрел кучу плагинов jquery и у 99% есть такой недочет. Ну да ладно.

Суть вопроса к знатокам. Может кто то пробовал решать подобную проблему именно методами jquery и без использования jq_mobile и т.д.

Буду благодарен, за помощь
Ответить с цитированием
  #2 (permalink)  
Старый 17.08.2016, 06:16
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>Foto preview v_2</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<style>
		* {margin: 0;padding: 0;box-sizing: border-box;}
		img {display: block;width: 100%;position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);}
		html, body {width: 100%;height: 100%;}
	</style>
</head>
<body>
	<img src="gallery/60.jpg" alt="">

	<script>
		$(document).ready(function() {

			function changeImgSize() {

				var $win_width = $(window).width(),
					$win_height = $(window).height(),
					$img_preview = $("img"),
					$img_width = $img_preview.width(),
					$img_height = $img_preview.height();
				

				if ($win_width < $win_height) {
					
					elementFullWidth($img_preview);

				} else if ($win_width > $win_height) {

					elementFullHeight($img_preview);

				}


			}

			function visibleElement(element) {element.css({"opacity":"1"});}
			function invisibleElement(element) {element.css({"opacity":"0"});}
			function elementFullHeight(element) {element.css({"width":"auto","height":"100" + "%"});}
			function elementFullWidth(element) {element.css({"width":"100" + "%","height":"auto"});}
			function elementAutoSize(element) {element.css({"width":"auto","height":"auto"});}

			$(window).on("orientationchange", changeImgSize);
		});
	</script>
</body>
</html>


Вот пример кода
Ответить с цитированием
  #3 (permalink)  
Старый 17.08.2016, 09:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Роман Андреевич,
может попробовать не ready
$(window).load(function() {
Ответить с цитированием
  #4 (permalink)  
Старый 17.08.2016, 12:07
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

Вся суть в том, что изображение уже загружено. И когда его смотришь на телефоне то при повороте оно должно подстраиваться. Вот
Ответить с цитированием
  #5 (permalink)  
Старый 17.08.2016, 12:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Роман Андреевич,
может так ? ("orientationchange resize",
Ответить с цитированием
  #6 (permalink)  
Старый 17.08.2016, 12:46
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

мучаюсь с условиями. Может тут косяк. Само событие срабатывает. Но картинка вылазит постоянно
Ответить с цитированием
  #7 (permalink)  
Старый 17.08.2016, 12:49
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

Короче говоря, событие работает, но картинка не правильно отображается. Вылазит постоянно за пределы viewport
Ответить с цитированием
  #8 (permalink)  
Старый 17.08.2016, 12:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Роман Андреевич,
может измерять истинные размеры картинки а не текущие?
Ответить с цитированием
  #9 (permalink)  
Старый 17.08.2016, 13:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Роман Андреевич,
$img_width = $img_preview[0].naturalWidth ,
          $img_height = $img_preview[0].naturalHeight;
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как при наведении на родительский элемент "вкл" стили :hover::before для дочернего? Gera Herbst Events/DOM/Window 4 30.08.2015 14:41