Задать вопрос
streetflush
@streetflush
javascript

Каким JQuery плагином увеличит картинку до 95% экрана?

Видел на одном сайте эффект и потерял его.
На странице несколько превью картинок. При нажатии на картинку, она плавно сайзится до размеров экрана (95%), не меня положения остального контента. Картинка увеличивается пропорционально, пока высота или ширина не достигнут 95%. При изменении размеров экрана и ориентации все работает. Закрывается картинка на клик.
Все поддерживает тач.
Нагуглить не смог.
Есть идеи?
Пока сижу, пытаюсь повторить вручную.

Не работает анимация 1й раз..
  • Вопрос задан
  • 320 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 1
@ps1panda
Верстальщик, начинающий front-end
https://jsfiddle.net/ps1panda/7vdqpbqp/
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title><!-- Title here --></title>
    <link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <script src="script.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<style>
    img{
     z-index:1; 
    }

		.big{
		  position:fixed;
		  width:95% !important;
		  left:5px;
		  top:5px;
		}
		
		
		
		.col-xs-4{ border: 1px solid black;}
	</style>
</head>

<body>

    <!-- Navigation -->



    <!-- Header -->
 
        <div class="container">
	<div class='col-xs-4'>		<img class="crop" src="http://gallery.yopriceville.com/downloadfullsize/send/6732"  style="background-color:red;" class=""  alt=""></div>
	<div class='col-xs-4'>	<img class="crop" src="http://gallery.yopriceville.com/downloadfullsize/send/6732"  style="background-color:green;" class=""  alt=""></div>
	<div class='col-xs-4'>	<img class="crop" src="http://gallery.yopriceville.com/downloadfullsize/send/6732"  style="background-color:blue;" class=""  alt=""></div>
	<div class='col-xs-4'>	<img class="crop" src="http://gallery.yopriceville.com/downloadfullsize/send/6732" style="background-color:black;" class="" alt=""></div>
	<div class='col-xs-4'>	<img class="crop" src="http://gallery.yopriceville.com/downloadfullsize/send/6732" style="background-color:olive;" class="" alt=""></div>
        </div>

        <!-- /.container -->

    
          

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
	<script>
	$(document).ready(function(){
	  $('.crop').css("width",$('.col-xs-4').width())
  $('.container div').click(function(){
      
    $(this).find('img').toggleClass('big')
  })  
	})
  
	</script>
</body>


</html>
Ответ написан
9 комментариев
9 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка лэндинга-визитки для юридической компании
25 нояб. 2024, в 11:40
10000 руб./за проект
Сделать интеграцию amoCRM + Яндекс.Метрика по API
25 нояб. 2024, в 11:09
4000 руб./за проект
Разработка бота рассылок в Telegram
25 нояб. 2024, в 10:16
7000 руб./за проект
Ещё заказы