<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Snippet - BBBootstrap</title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' rel='stylesheet'>
<link href='' rel='stylesheet'>
<style>
.xzoom-gallery {
margin-top: 10px
}
.xzoom {
margin-top: 40px
}
body {
background-color: #E0E0E0
}
</style>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js'></script>
<script type='text/javascript'>
(function($) {
$(document).ready(function() {
$('.xzoom, .xzoom-gallery').xzoom({
zoomWidth: 400,
title: true,
tint: '#333',
Xoffset: 15
});
// $('.xzoom2, .xzoom-gallery2').xzoom({
// position: '#xzoom2-id',
// tint: '#ffa200'
// });
// $('.xzoom3, .xzoom-gallery3').xzoom({
// position: 'lens',
// lensShape: 'circle',
// sourceClass: 'xzoom-hidden'
// });
// $('.xzoom4, .xzoom-gallery4').xzoom({
// tint: '#006699',
// Xoffset: 15
// });
// $('.xzoom5, .xzoom-gallery5').xzoom({
// tint: '#006699',
// Xoffset: 15
// });
//Integration with hammer.js
var isTouchSupported = 'ontouchstart' in window;
if (isTouchSupported) {
//If touch device
$('.xzoom, .xzoom2, .xzoom3, .xzoom4, .xzoom5').each(function() {
var xzoom = $(this).data('xzoom');
xzoom.eventunbind();
});
$('.xzoom, .xzoom2, .xzoom3').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1,
ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
xzoom.eventleave = function(element) {
element.hammer().on('tap', function(event) {
xzoom.closezoom();
});
}
xzoom.openzoom(event);
});
});
$('.xzoom4').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1,
ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
var counter = 0;
xzoom.eventclick = function(element) {
element.hammer().on('tap', function() {
counter++;
if (counter == 1) setTimeout(openfancy, 300);
event.gesture.preventDefault();
});
}
function openfancy() {
if (counter == 2) {
xzoom.closezoom();
$.fancybox.open(xzoom.gallery().cgallery);
} else {
xzoom.closezoom();
}
counter = 0;
}
xzoom.openzoom(event);
});
});
$('.xzoom5').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1,
ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
var counter = 0;
xzoom.eventclick = function(element) {
element.hammer().on('tap', function() {
counter++;
if (counter == 1) setTimeout(openmagnific, 300);
event.gesture.preventDefault();
});
}
function openmagnific() {
if (counter == 2) {
xzoom.closezoom();
var gallery = xzoom.gallery().cgallery;
var i, images = new Array();
for (i in gallery) {
images[i] = {
src: gallery[i]
};
}
$.magnificPopup.open({
items: images,
type: 'image',
gallery: {
enabled: true
}
});
} else {
xzoom.closezoom();
}
counter = 0;
}
xzoom.openzoom(event);
});
});
} else {
//If not touch device
//Integration with fancybox plugin
$('#xzoom-fancy').bind('click', function(event) {
var xzoom = $(this).data('xzoom');
xzoom.closezoom();
$.fancybox.open(xzoom.gallery().cgallery, {
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
event.preventDefault();
});
//Integration with magnific popup plugin
$('#xzoom-magnific').bind('click', function(event) {
var xzoom = $(this).data('xzoom');
xzoom.closezoom();
var gallery = xzoom.gallery().cgallery;
var i, images = new Array();
for (i in gallery) {
images[i] = {
src: gallery[i]
};
}
$.magnificPopup.open({
items: images,
type: 'image',
gallery: {
enabled: true
}
});
event.preventDefault();
});
}
});
})(jQuery);
</script>
</head>
<body oncontextmenu='return false' class='snippet-body'>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/xzoom.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/bbbootstrap/libraries/main/xzoom.css" media="all" />
<div class="container d-flex justify-content-center">
<section id="default" class="padding-top0">
<div class="row">
<div class="large-5 column">
<div class="xzoom-container"> <img class="xzoom img-fluid" id="xzoom-default" src="https://i.imgur.com/uC0mRJc.jpg" xoriginal="https://i.imgur.com/uC0mRJc.jpg" />
<div class="xzoom-thumbs">
<a href="https://i.imgur.com/uC0mRJc.jpg"> <img class="xzoom img-fluid-gallery" width="80" src="https://i.imgur.com/uC0mRJc.jpg" xpreview="https://i.imgur.com/uC0mRJc.jpg"></a>
<a href="https://i.imgur.com/uC0mRJc.jpg"> <img class="xzoom img-fluid-gallery" width="80" src="https://i.imgur.com/uC0mRJc.jpg"> </a>
<a href="https://i.imgur.com/uC0mRJc.jpg"><img class="xzoom img-fluid-gallery" width="80" src="https://i.imgur.com/uC0mRJc.jpg"></a>
<a href="https://i.imgur.com/uC0mRJc.jpg"><img class="xzoom img-fluid-gallery" width="80" src="https://i.imgur.com/uC0mRJc.jpg"></a>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
إرسال تعليق