Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

how to use in array of images #30

Closed
ovidales opened this issue Nov 6, 2018 · 1 comment
Closed

how to use in array of images #30

ovidales opened this issue Nov 6, 2018 · 1 comment

Comments

@ovidales
Copy link

ovidales commented Nov 6, 2018

Hello, excellent complement, I would like to know how I could add it to a set of images and I assign them a different ID, but even so it only shows correctly in the first image of the following ones, it is not added correctly.

regards
@waynegm
Copy link
Owner

waynegm commented Nov 7, 2018

This works for me:

<!DOCTYPE html>
<html>
	<head>
		<title>imgViewer2 Plugin - Fixed image size example</title>
		
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
		<script type="text/javascript" src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

		<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
		<script type="text/javascript" src="lib/imgViewer2.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
	</head>
	<body>
		<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; min-width: 320px;">
			<tr>
			<td style="padding: 10px">
				<h1 align="center">imgViewer2 Plugin - fixed image size example</h1>
				<div align="center" >
					<img  id="image1" src="images/test_image.jpg" width="800px" />
					<img  id="image2" src="images/test_image_raindrops.jpg" width="800px" />
				</div>
				<p style="margin:10px 5% 10px 5%;text-align: justify;"> This example demonstrates the basic functionality for a plain fixed size image. Zoom in and out using the mousewheel, +/- controls, double click/tap or hold the shift key and drag out a rectangle. Left mouseclick and drag to pan. On touch enable devices pinch gestures can be used to zoom in and out and tap and drag to pan around.
				</p>				
			</td>
			</tr>
		</table>

		<script type="text/javascript">
			;(function($) {
				$(window).on("load", function() {
					var $img = $("#image1").imgViewer2();
					var $img2 = $("#image2").imgViewer2();
				});
			})(jQuery);
		</script>
	</body>
</html>

@waynegm waynegm closed this as completed Nov 12, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@waynegm @ovidales