This code work for every images in gallery even thumbnails but i want to magnifying just in selected large image. another problem is by placing on a photo, the magnifying glass shows another photo zoomed. this code has pure css gallery and i think the problem is for javascript section. I changing the img tag from this line( magnify.magnifyImg('img', magnification, magnifierSize);) tho name of a class( .magnifiedImg) but it steel not working. please help me. enter code
/*Size is set in pixels... supports being written as: '250px' */
var magnifierSize = 250;
/*How many times magnification of image on page.*/
var magnification = 4;
function magnifier() {
this.magnifyImg = function (ptr, magnification, magnifierSize) {
var $pointer;
if (typeof ptr == "string") {
$pointer = $(ptr);
} else if (typeof ptr == "object") {
$pointer = $(ptr);
}
if (!($pointer.is('img'))) {
alert('Object must be image.');
return false;
}
magnification = +(magnification);
$pointer.hover(function () {
$(this).css('cursor', 'none');
$('.magnify').show();
//Setting some variables for later use
var width = $(this).width();
var height = $(this).height();
var src = $(this).attr('src');
var imagePos = $(this).offset();
var image = $(this);
if (magnifierSize == undefined) {
magnifierSize = '150px';
}
$('.magnify').css({
'background-size': width * magnification + 'px ' + height * magnification + "px",
'background-image': 'url("' + src + '")',
'width': magnifierSize,
'height': magnifierSize
});
//Setting a few more...
var magnifyOffset = +($('.magnify').width() / 2);
var rightSide = +(imagePos.left + $(this).width());
var bottomSide = +(imagePos.top + $(this).height());
$(document).mousemove(function (e) {
if (e.pageX < +(imagePos.left - magnifyOffset / 6) || e.pageX > +(rightSide + magnifyOffset / 6) || e.pageY < +(imagePos.top - magnifyOffset / 6) || e.pageY > +(bottomSide + magnifyOffset / 6)) {
$('.magnify').hide();
$(document).unbind('mousemove');
}
var backgroundPos = "" - ((e.pageX - imagePos.left) * magnification - magnifyOffset) + "px " + -((e.pageY - imagePos.top) * magnification - magnifyOffset) + "px";
$('.magnify').css({
'left': e.pageX - magnifyOffset,
'top': e.pageY - magnifyOffset,
'background-position': backgroundPos
});
});
}, function () {
});
};
this.init = function () {
$('body').prepend('<div class="magnify"></div>');
}
return this.init();
}
var magnify = new magnifier();
magnify.magnifyImg('img', magnification, magnifierSize); /*magnifying*/
.magnifiedImg {
width: 700px;
display: block;
margin: auto;
}
.magnify {
border-radius: 50%;
border: 2px solid black;
position: absolute;
z-index: 20;
background-repeat: no-repeat;
background-color: white;
box-shadow: inset 0 0 20px rgba(0,0,0,.5);
display: none;
cursor: none;
}
/*gallery*/
* {
box-sizing: border-box;
}
.gallery__img ,.gallery__thumb img {
max-width: 100%;
vertical-align: top;
width:100%;
}
.gallery {
display: flex;
margin: 10px auto;
max-width: 600px;
position: relative;
padding-top: 66.6666666667%;
}
@media screen and (min-width: 600px) {
.gallery {
}
}
.gallery__img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease-in-out;
max-height: 303px
}
.gallery__thumb {
padding-top: 6px;
margin: 6px;
display: block;
}
.gallery__selector {
position: absolute;
opacity: 0;
visibility: hidden;
}
.gallery__selector:checked + .gallery__img, .gallery__selector:hover + .gallery__img {
opacity: 1;
}
.gallery__selector:checked ~ .gallery__thumb > img, .gallery__selector:hover ~ .gallery__thumb > img {
box-shadow: 0 0 0 3px #0be2f6;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container main-container">
<div class="row">
<div class="col-lg-5 col-md-6 about-product-col">
<div class="product-pics-area">
<section class="gallery">
<div class="gallery__item ">
<input type="radio" id="img-1" checked name="gallery" class="gallery__selector" />
<img class=" gallery__img magnifiedImg" src="https://picsum.photos/id/1057/600/400.jpg" alt="" />
<label for="img-1" class="gallery__thumb"><img src="https://picsum.photos/id/1057/600/400.jpg" alt="" width="150" height="100" /></label>
</div>
<div class="gallery__item">
<input type="radio" id="img-2" name="gallery" class="gallery__selector" />
<img class="gallery__img " src="https://picsum.photos/id/1057/600/400.jpg" alt="" />
<label for="img-2" class="gallery__thumb"><img src="https://picsum.photos/id/1057/600/400.jpg" width="150" height="100" alt="" /></label>
</div>
<div class="gallery__item">
<input type="radio" id="img-3" name="gallery" class="gallery__selector" />
<img class="gallery__img " src="https://picsum.photos/id/1057/600/400.jpg" alt="" />
<label for="img-3" class="gallery__thumb"><img src="https://picsum.photos/id/1057/600/400.jpg" width="150" height="100" alt="" /></label>
</div>
<div class="gallery__item">
<input type="radio" id="img-4" name="gallery" class="gallery__selector" />
<img class="gallery__img " src="https://picsum.photos/id/106/600/400.jpg" alt="" />
<label for="img-4" class="gallery__thumb"><img src="https://picsum.photos/id/106/150/100.jpg" alt="" /></label>
</div>
</section>
<!-- partial -->
</div>
</div>
here
