21'C 흐림
서울 강남구
이 템플릿은. 이미지 돋보기를 시뮬레이션
하면 이미지 가리키면 확대 된 영상 이미지 세부 정보를 표시, 디스플레이 어입니다. 샘플은 enarged 이미지를 표시하기 위해 부트 스트랩-가 확대 JS 라이브러리를 사용합니다.
<div class="container">
<div class="row">
Mouse over the image to view magnification.
</div>
<div class="row" id="row1">
<div class="col-md-12">
<div class="mag1">
<img data-toggle="magnify" src="http://www.prepbootstrap.com/Content/images/template/Magnifier/computer-chip.jpg" class="img-responsive img-rounded center-block" alt=""/>
</div>
</div>
</div>
</div>
<style>
#row1 {
padding:140px;
}
.mag {
width:450px;
margin: 0 auto;
float: none;
}
.mag img {
max-width: 100%;
}
.mag1 {
width:120px;
margin: 0 auto;
float: none;
}
.mag1 img {
max-width: 100%;
}
.mag2 {
width:900px;
margin: 0 auto;
float: none;
}
.mag2 img {
max-width: 100%;
}
.magnify {
position: relative;
cursor: none
}
.magnify-large {
position: absolute;
display: none;
width: 500px;
height: 500px;
-webkit-box-shadow: 0 0 0 7px rgba(204, 204, 204, 0.55), 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.55), 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.55), 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%
}
</style>
<script type="text/javascript">
!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);
</script>