jQuery

jQuery-PanZoom

URL: https://github.com/benlumley/jQuery-PanZoom
ZIP: https://github.com/benlumley/jQuery-PanZoom/archive/master.zip
DEMO: non fonctionnel
Copyright: 2001, MIT/GPL

Include:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-panzoom-0.9.0.js"></script>

Javascript:
$(document).ready(function () {
    $('#pan img').panZoom(options);
});

HTML:
<div id="pan" style="width: 200px; height: 300px;">
  <img src="/images/myimage.jpg" >
</div>

jquery.panzoom

URL: https://github.com/timmywil/jquery.panzoom
ZIP: https://github.com/timmywil/jquery.panzoom/archive/master.zip
JS (min): https://raw.github.com/timmywil/jquery.panzoom/2.0.5/dist/jquery.panzoom.min.js
Copyright: ?
Min: jQuery 2.0 browsers (jquery 1.9+)
Plus: fonctionne avec SVG et accélération logiciel
DEMO: http://timmywil.github.io/jquery.panzoom/demo/#inverted-contain

Include:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/js/plugins/jquery.panzoom.js"></script>

Javascript:
$(".panzoom-elements").panzoom();

Pan And Zoom

URL: https://github.com/keithics/pan-and-zoom
ZIP: https://github.com/keithics/pan-and-zoom/archive/master.zip
Copyright: ?
Demo: http://webninjamobile.com/clients/pan&zoom/

Include:
<link media="all" type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>

HTML/Javascript:
	<head>
		<style type="text/css">
			#canvas{
				width: 500px;
				height: 500px;
				overflow: hidden;
				cursor: move;
				border: red solid 5px;
				margin:auto;
			}

			#slider{
				margin: auto;
				width: 500px;
				margin-top: 40px;
			}
		</style>		
	</head>

	<body>

		<div id="canvas">
				<img src="sample.jpg" id="image" />

		</div>

		<div id="slider"></div>
		<script>
			$(function() {
				// get image width
				var imageWidth = 2048;
				var percent;

				$( "#image" ).draggable();
				$( "#slider" ).slider({
					 value:500,//500 is slider's width,
					 min: 10,
					 max:100, //this is the defauly max, you can remove this if needed
					slide: function( event, ui ) {
						percent = imageWidth * ui.value/ 100;
						$('#image').width(percent);
					}
				});
			});
		</script>

ysm.panzoom.js

Inspiré de Pan and Zoom

Voir README

Hyperliens...

Lire les commentaires | Laisser un commentaire