Skip to content

Add click to zoom option #12

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

Open
ricochet2200 wants to merge 3 commits into
base: master
Choose a base branch
from
+393 −11
Open

Add click to zoom option #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd55281
Provide setting where user must click rather than hover over to magnify
Sep 3, 2015
590012e
Update readme.textile
ricochet2200 Sep 3, 2015
c3a8a67
simplify code
Sep 4, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
355 changes: 355 additions & 0 deletions demos/click-zoom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,355 @@
<!doctype html>
<html>
<head>
<title>OKZoom</title>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="OKZoom" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://okfoc.us/okzoom/" />
<meta property="og:image" content="http://okfoc.us/assets/images/okzoom.png" />
<meta property="og:site_name" content="OKFocus" />
<meta property="fb:admins" content="34601449,13005337,100001923956223" />
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');
</script>
<style type="text/css">
header ,nav ,section ,article ,aside ,footer ,hgroup {
display: block;
}
</style>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src='../src/okzoom.js'></script>
<script>
$(function(){
$("#logo").okzoom({
backgroundRepeat: "repeat"
});
$('#example').okzoom({
width: 200,
height: 200,
border: "1px solid black",
shadow: "0 0 5px #000",
click: true
});
$('#data-example').okzoom({
width: 100,
height: 100,
backgroundRepeat: "repeat"
});
});
</script>
<style type="text/css">
body {
margin: 20px;
background: url('img/photocopy.png');
background-attachment:fixed;
background-position:top center;
font-family: sans-serif;
font-size: 15px;
line-height: 22px;
color: #333;
}
#container {
width: 600px;
margin: 0 auto;
}
#sidebar {
display: inline-block;
margin: 15px 10px 0 0; padding: 0;
vertical-align: top;
width: 120px;
}
#sidebar li {
list-style-type: none;
}
a {
color #00f;
}
table {
margin-top: -10px;
}
th {
text-align: left;
vertical-align: top;
font-weight: normal;
padding-right: 10px;
color: #000;
font-style: italic;
}
td {
vertical-align: top;
padding-left: 0;
padding-right: 10px;
color: #555;
}
td b {
color: #444;
}
#example {
box-shadow: 0 3px 5px #888;
height: 200px;
}
#ok {
display: inline-block;
height: 100px;
width: 100px;
background: #f4f0f8 url(social_media_icon_transparent.png);
background-position: center center;
background-size: cover;
border-radius:50px;
}
h1 {
font-size: 72px;
line-height: 12px;
margin-left: 20px;
font-weight: bold;
font-style: italic;
display: inline-block;
color: #444;
}
#content {
display: inline-block;
width: 600px;
vertical-align: top;
}
pre {
border: 1px solid #ddd;
background: rgb(238,238,238);
background: rgba(238,238,238,0.5);
font-size: 12px;
line-height: 15px;
padding: 5px 0 5px 10px;
width: 250px;
display: block;
margin: 20px auto;
}
pre#license {
width: auto;
margin: 0;
padding: 10px;
}
pre#methods {
width: auto;
padding: 10px;
}
pre a {
color: #00f;
}
p {
width: 100%;
}
header img {padding-bottom:15px;margin-top:10px;max-width:200px;height:33px;}
h2 {
text-transform:uppercase;
font-size:15px;
letter-spacing:6px;
margin-bottom:20px;
margin-top:-10px;
font-style:italic;
font-family: Comic Sans MS, cursive;
font-weight:100;
color:#333;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.right-column {
width:100px;
font-weight:bold;
}
a img {
border:none;
}

</style>
<script type="text/javascript">
var _sf_startpt=(new Date()).getTime(); // chartbeat
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25748597-1']);
_gaq.push(['_setDomainName', 'okfoc.us']);
_gaq.push(['_setAllowHash', false]);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

</head>
<body>
<div id="container">
<div id="header">
<a href="http://okfoc.us"><header>
<!-- img loaded with js -->
</header></a>
<hr>
<script>
(function() {
// cachebusting or whatever,,
var d = new Date(),
logo = document.createElement('img'),
header = document.getElementsByTagName('header')[0];
logo.src = 'http://okfoc.us/assets/images/logo.gif?ok=' + d.getTime();
logo.id = "logo";
header.insertBefore(logo,null);
})();
</script>
</div>
<ul id="sidebar">
</ul>
<div id="content">
<h2>OKZoom by OKFocus</h2>
<p>
OKZoom is a JQuery plugin that produces a portable loupe of variable size and shape.
All other jQuery 'zoom' plugins we have encountered implement a square magnifying area.
Ours is a circle. You want a circle.
</p>

<h3>Usage</h3>
<p>
Bind OKZoom to one or many image elements. The easiest way is to have a large image
that is sized down using HTML or CSS: the loupe will show the full-size image on hover.
</p>

<center>
<img id="example" src="img/fra2.jpeg">
</center>

<pre>
$('img').okzoom({
width: 200,
height: 200,
round: true,
background: "#fff",
backgroundRepeat: "repeat",
shadow: "0 0 5px #000",
border: "1px solid black"
});</pre>

<p>
You can also apply OKZoom to every image on a page by binding to <tt>$('img')</tt>.
If the source of the bound image changes -- say on an image gallery with several thumbnails
under a main image -- the loupe will automatically update.
</p>

<p id="data-example" data-okimage="img/okzoom.png">
Alternatively, add a HTML5 data attribute <tt>data-okimage</tt> to your image tag containing
the url to the image you want to see inside the loupe. Using this technique,
OKZoom may be applied to any element -- hover over this paragraph to see an example.
</p>

<p>
Finally, the id of the loupe itself is <tt>ok-loupe</tt>.
</p>

<h3>Smoke Tests</h3>

<p>
Use these basic tests to get started with OKZoom as quickly as possible.
</p>

<ul>
<li><a href="test_vanilla.html">Basic Test</a></li>
<li><a href="test_change.html">Change Image Test</a></li>
<li><a href="test_multi.html">Multi-Image Test</a></li>
<li><a href="test_data.html">Data Attribute Test</a></li>
<li><a href="test_div.html">Non-Image Test</a></li>
</ul>

<h3>Options</h3>
<table id="params" cellspacing="0">
<tr><th>width</th>
<td>of the loupe, in pixels</td>
<td class='right-column'>150</td>
</tr>
<tr><th>height</th>
<td>of the loupe, in pixels</td>
<td class='right-column'>150</td>
</tr>
<tr><th>scaleWidth</th>
<td>optionally force magnification of image</td>
<td class='right-column'>null</td>
</tr>
<tr><th>round</th>
<td>round loupe if true, square if false</td>
<td class='right-column'>true</td>
</tr>
<tr><th>background</th>
<td>color for image off the edge of the loupe</td>
<td class='right-column'>#fff</td>
</tr>
<tr><th>backgroundRepeat</th>
<td>repeat the image within the loupe</td>
<td class='right-column'>no-repeat</td>
</tr>
<tr><th>border</th>
<td>border around the loupe</td>
<td class='right-column'>0</td>
</tr>
<tr><th>shadow</th>
<td>box-shadow on the loupe</td>
<td class='right-column'>0 0 5px #000</td>
</tr>
</table>

<h3><a href="https://github.com/okfocus/okzoom/zipball/master">Download OKZoom</a> or <a href="http://github.com/okfocus/okzoom">Contribute on Github</a><br><br><a href="https://twitter.com/okfocus" class="twitter-follow-button">Follow @okfocus</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<iframe src="//www.facebook.com/plugins/like.php?app_id=220585137996235&amp;href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FOKFocus%2F126395247420599&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=lucida+grande&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:20px; clear:both;background:transparent;" ></iframe>
</h3>
<h3>License</h3>
<pre id="license">
Copyright © 2012 OKFocus, <a href="http://okfoc.us">http://okfoc.us</a>

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
“Software”), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br>
<img src="img/okzoom.png"style="padding:10px"><img src="http://okfoc.us/okhover/img/OSI-Approved-License.png"style="padding:10px;"></pre>
</pre>
</div>
<script type="text/javascript">
var _sf_async_config={uid:25485,domain:"okfoc.us"};
(function(){
function loadChartbeat() {
window._sf_endpt=(new Date()).getTime();
var e = document.createElement('script');
e.setAttribute('language', 'javascript');
e.setAttribute('type', 'text/javascript');
e.setAttribute('src',
(("https:" == document.location.protocol) ? "https://a248.e.akamai.net/chartbeat.download.akamai.com/102508/" : "http://static.chartbeat.com/") +
"js/chartbeat.js");
document.body.appendChild(e);
}
var oldonload = window.onload;
window.onload = (typeof window.onload != 'function') ? loadChartbeat : function() { oldonload(); loadChartbeat(); };
})();
</script>
</body>
</html>
6 changes: 4 additions & 2 deletions readme.textile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,15 @@ $('img').okzoom({
background: "#fff",
backgroundRepeat: "repeat",
shadow: "0 0 5px #000",
border: "1px solid black"
border: "1px solid black",
click: false
});
</code>
</pre>

h3. Options

|Usage|||
|*Usage*|*Description*|*Default Value*|
|width|(in pixels}|150|
|height|(in pixels}|150|
|scaleWidth|optionally resize the loupe image|null|
Expand All @@ -37,6 +38,7 @@ h3. Options
|backgroundRepeat|repeat the image within the loupe|no-repeat|
|border|border around the loupe|0|
|shadow|box-shadow on the loupe|0 0 5px #000|
|click|Require user to click rather than just hover to zoom|false|

h3. Data Attribute

Expand Down
Loading