Комментарии

Увеличительное стекло на изображении с помощью Bootstrap
( 9 Голосов )

Увеличительная лупа на Bootstrap и JavaScript

Классный JS эффект "лупы" с помощью фреймворка Bootstrap 3.1.1. Если у вас на сайте есть большие фотографии и вы хотите их отобразить в минимальном разрешении при этом сохранить возможность "поближе" посмотреть на определенные участки картинки, то данный сниппет прекрасно подойдет для этого решения.

Наведите курсор мышки на пример изображения снизу. При наведении на изображение появится увеличительное стекло (лупа) с помощью которого можно увеличить какие либо участки изображения. Данное решение идеально для интернет-магазинов продающих различные товары. Клиент интернет-магазина может подробно и вблизи рассмотреть товар, просто наведя курсор мышки. Благодаря плагину Magnifying Glass на экране появится лупа с эффектом приближения.

Вставьте данный HTML код в нужное место вашего сайта:

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="mag">
<img data-toggle="magnify" src="/magnifying.jpg" alt="Увеличительное стекло">
</div>
</div>
</div>
</div>

Вставьте данный CSS код в любой CSS файл вашего шаблона:

.mag {
width:200px;
margin: 0 auto;
float: none;
}
.mag img {
max-width: 100%;
} .magnify {
position: relative;
cursor: none
} .magnify-large {
position: absolute;
display: none;
width: 175px;
height: 175px; -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);

-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%
}

Вставьте данный JS код в нижней части шаблона перед тегом </body>:

!function ($) {
"use strict"; // jshint ;_;

/* MAGNIFY PUBLIC CLASS DEFINITION
* =============================== */ var Magnify = function (element, options) {
this.init('magnify', element, options)
} Magnify.prototype = { constructor: Magnify , init: function (type, element, options) {
var event = 'mousemove'
, eventOut = 'mouseleave'; this.type = type
this.$element = $(element)
this.options = this.getOptions(options)
this.nativeWidth = 0
this.nativeHeight = 0 this.$element.wrap('<div class="magnify" \>');
this.$element.parent('.magnify').append('<div class="magnify-large" \>');
this.$element.siblings(".magnify-large").css("background","url('" + this.$element.attr("src") + "') no-repeat"); this.$element.parent('.magnify').on(event + '.' + this.type, $.proxy(this.check, this));
this.$element.parent('.magnify').on(eventOut + '.' + this.type, $.proxy(this.check, this));
} , getOptions: function (options) {
options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data()) if (options.delay && typeof options.delay == 'number') {
options.delay = {
show: options.delay
, hide: options.delay
}
} return options
} , check: function (e) {
var container = $(e.currentTarget);
var self = container.children('img');
var mag = container.children(".magnify-large"); // Get the native dimensions of the image
if(!this.nativeWidth && !this.nativeHeight) {
var image = new Image();
image.src = self.attr("src"); this.nativeWidth = image.width;
this.nativeHeight = image.height; } else { var magnifyOffset = container.offset();
var mx = e.pageX - magnifyOffset.left;
var my = e.pageY - magnifyOffset.top; if (mx < container.width() && my < container.height() && mx > 0 && my > 0) {
mag.fadeIn(100);
} else {
mag.fadeOut(100);
} if(mag.is(":visible"))
{
var rx = Math.round(mx/container.width()*this.nativeWidth - mag.width()/2)*-1;
var ry = Math.round(my/container.height()*this.nativeHeight - mag.height()/2)*-1;
var bgp = rx + "px " + ry + "px"; var px = mx - mag.width()/2;
var py = my - mag.height()/2; mag.css({left: px, top: py, backgroundPosition: bgp});
}
} }
}
/* MAGNIFY PLUGIN DEFINITION
* ========================= */ $.fn.magnify = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('magnify')
, options = typeof option == 'object' && option
if (!data) $this.data('tooltip', (data = new Magnify(this, options)))
if (typeof option == 'string') data[option]()
})
} $.fn.magnify.Constructor = Magnify $.fn.magnify.defaults = {
delay: 0
}
/* MAGNIFY DATA-API
* ================ */ $(window).on('load', function () {
$('[data-toggle="magnify"]').each(function () {
var $mag = $(this);
$mag.magnify()
})
}) } ( window.jQuery );

Понравился материал? Пригодилась информация? Плюсани в социалки!


 
Похожие новости
Добавить комментарий


Защитный код