jQuery Зуммер для изображений
Плагин jQuery для создания zoom-эффекта при просмотре изображений
HTML
<script src="http://demo.moskvitin.pro/bitrix/components/mdsoft/retinazoom-for-eshop/script.js"></script>
<div class="demo">
<img id="zoom" src="http://s7.hostingkartinok.com/uploads/images/2014/12/fddd4eec6409565c946ce17ef96b3e3d.jpg" alt="Природа" title="Широкоформатная картинка из категории Природа" width="" height="" />
</div>
CSS
@charset "utf-8";
img{
max-width: 100%;
height: auto;border-radius: 4px;
}
.demo {
max-width: 600px;
padding: 10px;
margin: 45px auto;
background-color: #F5F5F5;
border: 1px solid #E3E3E3;
border-radius: 4px;
text-align: center;
}
#zm-magnifier
{
border: 3px solid #ddd;
border: 3px solid rgba(255,255,255,.3);
box-shadow: 0 0 5px rgba(0,0,0,.6),0 0 3px rgba(0,0,0,.13) inset;
display: none;
overflow: hidden;
position: absolute;
z-index: 9999;
}
#zm-magnifier img
{
box-shadow: 0 0 5px rgba(0,0,0,.3);
cursor: none;
left: 0;
max-width: 100000px;
position: relative;
top: 0;
z-index: 0;
}
#zm-magnifier span
{
background: #fff;
background: rgba(255,255,255,.5);
border-radius: 0 0 0 4px;
box-shadow: -1px 1px 2px rgba(0,0,0,.15);
display: block;
font-family: Verdana,Geneva,sans-serif;
font-size: 10px;
line-height: 1em;
overflow: visible;
padding: 2px 6px;
position: absolute;
right: 0px;
text-shadow: 0 0 4px #fff;
top: 0px;
z-index: 9999;
}
JavaScript
$(function(){
$('#zoom').zoome({hoverEf:'',showZoomState:true,defaultZoom:3,magnifierSize:[550,250]});
});