TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Ahoj... neměl by někdo tip jak vyřešit ZOOM obrázku a následně v něm využít možnosti MAP AREA nebo něco alternativního?
Nyní jsem zkoušel využít IMAGEPANNER za využití JS. ZOOM super, ale po zvětšení COORDS nesedí na své pozici.
----------- HTML ----------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez názvu</title>
<style>
/* demo styles. Remove if desired */
#pcontainer1{
width: 600px;
height: 400px;
}
@media screen and (max-width: 780px){ /* responsive setting */
#pcontainer1{
width: 100%;
height: 400px;
}
}
</style>
<link rel="stylesheet" rel="nofollow" href="css/imagepanner.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.kinetic.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/imagepanner.js">
/***********************************************
* Simple Image Panner and Zoomer v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script>
var panimage1 // register arbitrary variable
jQuery(function($){
panimage1 = new imagepanner({
wrapper: $('#pcontainer1'), // jQuery selector to image container
imgpos: [100, 300], // initial image position- x, y
maxlevel: 4 // maximum zoom level
})
})
</script>
</head>
<body>
<div id="pcontainer1" class="pancontainer">
<img src="images/rodokmen-plakat-a1-v17_02.jpg" width="1280" height="782" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="610,213,670,275" rel="nofollow" href="http://www.seznam.cz">
</map>
</div>
<br />
<button onClick="panimage1.zoom('+1')">zoom In</button> <button onClick="panimage1.zoom('-1')">zoom out</button> <button onClick="panimage1.zoom(1)">reset</button>
</body>
</html>
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------
----------- CSS ------------------------------------------------------------
.pancontainer{
position: relative;
overflow: hidden;
width: 500px; /* default pan container width */
height: 200px; /* default pan container height */
}
.pancontainer img{
display: block;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
ul.zoomcontrols{
position: absolute;
margin: 0;
padding: 0;
list-style: none;
bottom: -1px;
right: 0;
display: block;
background: #eee;
opacity: 0.5;
cursor: pointer;
}
ul.zoomcontrols li{
display: block;
width: 40px;
height: 40px;
font: bold 2em Arial;
text-align: center;
border-bottom: 1px solid gray;
}
ul.zoomcontrols li:hover{
background: #D1D1D1;
}
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------
----------- JS ----------------------------------------------------------
/* Simple Image Panner and Zoomer v2.0
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Requires kinetic (https://github.com/…uery.kinetic) and jquery mouse wheel (https://github.com/…y-mousewheel)
* Visit http://www.dynamicdrive.com/ for full source code
*/
var imagepanner = (function($){
var defaults = {zoomable:true, mousezoom:0.3, controlzoom: 0.5, maxlevel:4, imgpos:[0,0] }
defaults.zoomcontrols = '<ul class="zoomcontrols"><li title="Zoom In" class="in">+</li><li title="Zoom Out" class="out">-</li></ul>'
function limitnumber(num, max){
if (num < 1)
return 1
else if (num > max)
return max
return num
}
function imagepanner(options){
var thisinst = this
if (options.wrapper.length !=1){
alert('Wrapper should be a single element! Existing.')
return
}
this.s = $.extend({}, defaults, options)
var $wrapper = options.wrapper.css({position:'relative', overflow:'hidden'}),
$img = options.wrapper.find('img:eq(0)'),
img = $img.get(0)
imgloaded = $.Deferred()
$img.wrap('<div style="width:100%; height:100%;position:relative;overflow:hidden" />')
var $imgwrapper = $img.parent()
if (img.getAttribute('width') || img.style.width > 0 || parseInt($img.css('width')) > 50){
imgloaded.resolve()
}
else if (img.complete){
imgloaded.resolve()
}
else{
$img.on('load', function(){
imgloaded.resolve()
})
}
imgloaded.done(function(){ // image.done
$imgwrapper.kinetic({ // set up Kinetic. See https://github.com/…uery.kinetic for options
maxvelocity: 60
})
$wrapper.mousewheel(function(event){ // set up Mousewheel
if (event.deltaY > 0){
thisinst.zoom('+' + thisinst.s.mousezoom)
}
else{
thisinst.zoom('-' + thisinst.s.mousezoom)
}
return false
})
$wrapper.on('dblclick', function(){
thisinst.zoom(1)
})
if (thisinst.s.zoomcontrols.length>0 && thisinst.s.maxlevel > 1){ // if zoomcontrols HTML defined and image is zoomable
$wrapper.append(thisinst.s.zoomcontrols)
$wrapper.find('ul.zoomcontrols').on('click', function(e){
var zoomlevel
var targetclass = e.target.className
if (/(in)|(out)/i.test(targetclass)){
zoomlevel = (targetclass == 'in')? '+' : '-'
zoomlevel += thisinst.s.controlzoom
thisinst.zoom(zoomlevel)
}
})
}
$imgwrapper.animate({scrollLeft: thisinst.s.imgpos[0], scrollTop: thisinst.s.imgpos[1]}, 0)
thisinst.refs = {$imgwrapper: $imgwrapper, $img: $img}
thisinst.imgdata = {odimensions:[$img.width(), $img.height()], currentzoom:1}
}) // end image.done
}
imagepanner.prototype = {
zoom:function(action){
if (!this.refs){ // image panner has initialized yet
return
}
var thisinst = this
var s = this.s
var refs= this.refs
var imgdata = this.imgdata
var currentzoom = this.imgdata.currentzoom
var zoomlevel, owidth, oheight, nwidth, nheight, nscrollX, nscrollY
if (typeof action == 'string' && (action.charAt(0) == '+' || action.charAt(0) == '-')){
zoomlevel = currentzoom + parseFloat(action)
}
else{
zoomlevel = parseFloat(action)
}
zoomlevel = limitnumber(zoomlevel, s.maxlevel)
if (!isNaN(zoomlevel)){
owidth = imgdata.odimensions[0]
oheight = imgdata.odimensions[1]
nwidth = owidth * zoomlevel
nheight = oheight * zoomlevel
nscrollX = refs.$imgwrapper.scrollLeft() / currentzoom * zoomlevel
nscrollY = refs.$imgwrapper.scrollTop() / currentzoom * zoomlevel
refs.$imgwrapper.stop().animate({scrollLeft: nscrollX, scrollTop: nscrollY})
refs.$img.stop().animate({width:nwidth, height:nheight}, function(){
thisinst.imgdata.currentzoom = zoomlevel
})
}
}
}
return imagepanner
})(jQuery);
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------
To vše za využití JQUERY
Nahlásit jako SPAM
IP: 79.98.155.–
Zjistit počet nových příspěvků
