CODEWITHSUNDEEP
javascripthtmlcss
Aly G
Aly G

Reputation: 11

Picture gallery zoom with java script

So I have a picture gallery and when you click on the picture it zooms in on the picture the problem is this only works well for the pictures at the top... when you scroll down and click on the pictures at the bottom of the page the zoomed in version pops up at the top so I have to scroll up every time.

How can I make it either display the zoomed in version where the page is (so we don't have to scroll up to view it) or make it so it scrolls to the top when it is clicked to be zoomed in then scrolls back down when you click on the picture which will close the zoom view?

here is the html:





<center>
        <div class="gallery">
  
  <div class="img-w">
    <img src="gallery/m1.jpg" />
    </div>
     <div class="img-w">
    <img src="gallery/m2.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m3.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m4.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m5.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m6.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m7.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m8.jpg"  />
    </div>
    
    
     <div class="img-w">
    <img src="gallery/p1.jpg" />
    </div>
     <div class="img-w">
    <img src="gallery/p2.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p3.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p4.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p5.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p6.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p7.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p8.jpg"  />
    </div>  
         <div class="img-w">
    <img src="gallery/p9.jpg"  />
    </div>
    
      <div class="img-w">
    <img src="gallery/u1.jpg" />
    </div>
     <div class="img-w">
    <img src="gallery/u2.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/u3.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/u4.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/u5.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/u6.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/u7.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/u8.jpg"  />
    </div>
     
    
    
     </div>
   <br>
   <div class="center">
     <p class="bold ">Page 1 | <a href="gallery2.html"> Page 2 </a>
</p>
</div>

Here is the css:




 /****Gallery****/

.gallery {
  width: 100%;
  margin-right: 20px;
  margin-left: 20px;
  border-radius: 3px;
  overflow: hidden;
  //position: relative;
 
}
.img-c {
  width: 250px;
  height: 250px;
  float: left;
  position: relative;
  overflow: hidden;
}

.img-w {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform ease-in-out 300ms;
  margin: 5px 5px;
}

.img-w img {
  display: none;
}

.img-c {
    transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

.img-c:hover .img-w {
  transform: scale(1.08);
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}

.img-c.active {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  z-index: 2;
  //transform: translateX(-50%);
}

.img-c.postactive {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.img-c.active.positioned {
  left: 0 !important;
  top: 0 !important;
  transition-delay: 50ms;
}

and here is the script:




<script>
$(function() {
  $(".img-w").each(function() {
    $(this).wrap("<div class='img-c'></div>")
    let imgSrc = $(this).find("img").attr("src");
     $(this).css('background-image', 'url(' + imgSrc + ')');
  })
            
  
  $(".img-c").click(function() {
    let w = $(this).outerWidth()
    let h = $(this).outerHeight()
    let x = $(this).offset().left
    let y = $(this).offset().top
    
    
    $(".active").not($(this)).remove()
    let copy = $(this).clone();
    copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
    $(".active").css('top', y - 8);
    $(".active").css('left', x - 8);
    
      setTimeout(function() {
    copy.addClass("positioned")
  }, 0)
    
  }) 
  
  

  
})

$(document).on("click", ".img-c.active", function() {
  let copy = $(this)
  copy.removeClass("positioned active").addClass("postactive")
  setTimeout(function() {
    copy.remove();
  }, 500)
})
</script>

I know it has to do with the img-c.active.positioned top: 0 !important line.. if I remove it, it does work better however with some pictures I have to scroll down for or they look cut from the top at first when displayed... maybe there's a way to just go full page zoom no matter where on the page I am?sorry a bit of a newb here lol

Thank you!

Upvotes: 0

Views: 310

Answers (1)

A Haworth
A Haworth

Reputation: 36512

The requirement is to get the image filling the screen when clicked, and then 'returning' to the same place when clicked again - without the user having to scroll up or down to see it.

If you change the positioning of your selected image div from absolute to fixed but maintain all your other settings it will position at the top of the viewport, covering the underlying gallery and when clicked will reveal the underlying gallery in the same place the user had it - which is probably what they are expecting.

.img-c.active {
  width: 100% !important;
  height: 100% !important;
  position:fixed; /* changed from absolute */
  z-index: 2;
  //transform: translateX(-50%);
}

.img-c.postactive {
  position:fixed; /* changed from absolute */
  z-index: 2;
  pointer-events: none;
}

(You can probably get rid of the two !important too since setting width/height 100% will be sufficient.) Try it in this snippet, selecting full screen and scroll down and click the yellow square as an example. (Colors are used instead of images just for this demo.)

$(function() {
  $(".img-w").each(function() {
    $(this).wrap("<div class='img-c'></div>")
    let imgSrc = $(this).find("img").attr("src");
     $(this).css('background-image', 'url(' + imgSrc + ')');
  })
            
  
  $(".img-c").click(function() {
    let w = $(this).outerWidth()
    let h = $(this).outerHeight()
    let x = $(this).offset().left
    let y = $(this).offset().top
    
    
    $(".active").not($(this)).remove()
    let copy = $(this).clone();
    copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
    $(".active").css('top', y - 8);
    $(".active").css('left', x - 8);
    
      setTimeout(function() {
    copy.addClass("positioned")
  }, 0)
    
  }) 
  
  

  
})

$(document).on("click", ".img-c.active", function() {
  let copy = $(this)
  copy.removeClass("positioned active").addClass("postactive")
  setTimeout(function() {
    copy.remove();
  }, 500)
})
 /****Gallery****/

.gallery {
  width: 100%;
  margin-right: 20px;
  margin-left: 20px;
  border-radius: 3px;
  overflow: hidden;
  //position: relative;
 
}
.img-c {
  width: 250px;
  height: 250px;
  float: left;
  position: relative;
  overflow: hidden;
}

.img-w {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform ease-in-out 300ms;
  margin: 5px 5px;
}

.img-w img {
  display: none;
}

.img-c {
    transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

.img-c:hover .img-w {
  transform: scale(1.08);
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}

.img-c.active {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  position:fixed;
  z-index: 2;
  //transform: translateX(-50%);
}

.img-c.postactive {
  position: absolute;
  position:fixed;
  z-index: 2;
  pointer-events: none;
}

.img-c.active.positioned {
  left: 0 !important;
  top: 0 !important;
  transition-delay: 50ms;
}

/* bit of styling added just to use background color instead of imgs for demo only */

.img-w {
background-color:cyan;
}

.img-c {
background-color:magenta;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
        <div class="gallery">
  
  <div class="img-w">
    <img src="gallery/m1.jpg" />
    </div>
     <div class="img-w">
    <img src="gallery/m2.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m3.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m4.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m5.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m6.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m7.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/m8.jpg"  />
    </div>
    
    
     <div class="img-w">
    <img src="gallery/p1.jpg" />
    </div>
     <div class="img-w">
    <img src="gallery/p2.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p3.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p4.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p5.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p6.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p7.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/p8.jpg"  />
    </div>  
         <div class="img-w">
    <img src="gallery/p9.jpg"  />
    </div>
    
      <div class="img-w">
    <img src="gallery/u1.jpg" />
    </div>
     <div class="img-w">
    <img src="gallery/u2.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/u3.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/u4.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/u5.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/u6.jpg"  />
    </div>
     <div class="img-w" style="background-color:yellow;"><!-- background color added just for test -->
    <img src="gallery/u7.jpg"  />
    </div>
     <div class="img-w">
    <img src="gallery/u8.jpg"  />
    </div>
     
    
    
     </div>
   <br>
   <div class="center">
     <p class="bold ">Page 1 | <a href="gallery2.html"> Page 2 </a>
</p>
</div>

Upvotes: 1

Related Questions