Which jQuery plugin will increase the image to 95% of the screen?

A

Alex2015-11-24 09:16:14

css

Alex, 2015-11-24 09:16:14

I saw an effect on one site and lost it.
There are several preview images on the page. When you click on the image, it smoothly scales to the screen size (95%), without changing the position of the rest of the content. The image grows proportionally until the height or width reaches 95%. When you change the screen size and orientation, everything works. The image closes on click.
Everything supports touch.
Couldn't google.
Any ideas?
While I'm sitting, I try to repeat manually.

Animation not working 1st time..

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

SpyceR, 2015-11-24
@SpyceR

Via onClick add a class for the image like .big-image
And in the CSS for this class:

.big-image {
position:fixed;
width: 95vw;
}

+Place it in the center of the screen
++Also, you can check what is greater: width or height and set css to 95vw or 95vh respectively
+++I'm not sure if it works, I recently did something similar
Make a smooth transition through css transition or similarly through JQuery

D

Dmitry Pyrkin, 2015-11-24
@ps1panda

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>