Permalink
Browse files

add jqzoom

  • Loading branch information...
1 parent 797a24e commit 3dd97ab73f554bff88b60cb02edab595e2206f4e @kristianmandrup committed Jun 3, 2012
Showing with 11,161 additions and 1 deletion.
  1. +15 −1 README.md
  2. +24 −0 spec/demos/jqzoom_ev-2.3/BSD-LICENSE.txt
  3. +2 −0 spec/demos/jqzoom_ev-2.3/README.md
  4. +120 −0 spec/demos/jqzoom_ev-2.3/css/jquery.jqzoom.css
  5. +85 −0 spec/demos/jqzoom_ev-2.3/demos/demo_alwayson.html
  6. +82 −0 spec/demos/jqzoom_ev-2.3/demos/demo_drag.html
  7. +82 −0 spec/demos/jqzoom_ev-2.3/demos/demo_innerzoom.html
  8. +89 −0 spec/demos/jqzoom_ev-2.3/demos/demo_resizeposition.html
  9. +84 −0 spec/demos/jqzoom_ev-2.3/demos/demo_reverse.html
  10. +85 −0 spec/demos/jqzoom_ev-2.3/demos/demo_standard.html
  11. BIN spec/demos/jqzoom_ev-2.3/demos/imgProd/thumbs/triumph_thumb1.jpg
  12. BIN spec/demos/jqzoom_ev-2.3/demos/imgProd/thumbs/triumph_thumb2.jpg
  13. BIN spec/demos/jqzoom_ev-2.3/demos/imgProd/thumbs/triumph_thumb3.jpg
  14. BIN spec/demos/jqzoom_ev-2.3/demos/imgProd/triumph_big1.jpg
  15. BIN spec/demos/jqzoom_ev-2.3/demos/imgProd/triumph_big2.jpg
  16. BIN spec/demos/jqzoom_ev-2.3/demos/imgProd/triumph_big3.jpg
  17. BIN spec/demos/jqzoom_ev-2.3/demos/imgProd/triumph_small1.jpg
  18. BIN spec/demos/jqzoom_ev-2.3/demos/imgProd/triumph_small2.jpg
  19. BIN spec/demos/jqzoom_ev-2.3/demos/imgProd/triumph_small3.jpg
  20. BIN spec/demos/jqzoom_ev-2.3/images/Thumbs.db
  21. BIN spec/demos/jqzoom_ev-2.3/images/advertise.jpg
  22. BIN spec/demos/jqzoom_ev-2.3/images/zoomloader.gif
  23. +8,865 −0 spec/demos/jqzoom_ev-2.3/js/jquery-1.6.js
  24. +21 −0 spec/demos/jqzoom_ev-2.3/js/jquery.jqzoom-core-pack.js
  25. +733 −0 spec/demos/jqzoom_ev-2.3/js/jquery.jqzoom-core.js
  26. BIN vendor/assets/images/Thumbs.db
  27. BIN vendor/assets/images/zoomloader.gif
  28. +21 −0 vendor/assets/javascript/jquery.jqzoom-core-pack.js
  29. +733 −0 vendor/assets/javascript/jquery.jqzoom-core.js
  30. +120 −0 vendor/assets/stylesheets/jquery.jqzoom.css
View
@@ -4,6 +4,7 @@ Crop and Rotate images in Rils 3+
* [jcrop](http://deepliquid.com/projects/Jcrop/)
* [jqueryrotate](http://code.google.com/p/jqueryrotate)
+* [jqzoom](http://www.mind-projects.it/projects/jqzoom/)
## Install
@@ -18,6 +19,7 @@ In application.css manifest
```css
/*
* require 'jquery.Jcrop.min'
+ * require 'jquery.jqzoom'
*/
```
@@ -28,17 +30,29 @@ In application.js manifest
//= require 'jquery.color'
//= require 'jquery.Jcrop.min'
//= require 'jquery.Rotate'
+//= require 'jquery.jqzoom-core'
//
```
-Then use as described in Jquery Rotate and JCrop documentation on respective sites.
+Then use as described in respective manuals/documentation.
## Jquery Rotate
[Jquery Rotate manual](http://code.google.com/p/jqueryrotate/wiki/Documentation)
`$("#img").rotate(90);`
+## JqZoom
+
+```coffeescript
+jQuery ->
+ $('.jqzoom').jqzoom
+ zoomType: 'standard',
+ lens:true
+ preloadImages: false
+ alwaysOn:false
+``
+
## JCrop
[Jcrop manual](http://deepliquid.com/content/Jcrop_Manual.html)
@@ -0,0 +1,24 @@
+* Copyright (c) 2011 Marco Renzi, http://www.mind-projects.it
+* All rights reserved.
+*
+* Redistribution and use in source and binary forms, with or without
+* modification, are permitted provided that the following conditions are met:
+* * Redistributions of source code must retain the above copyright
+* notice, this list of conditions and the following disclaimer.
+* * Redistributions in binary form must reproduce the above copyright
+* notice, this list of conditions and the following disclaimer in the
+* documentation and/or other materials provided with the distribution.
+* * Neither the name of the organization nor the
+* names of its contributors may be used to endorse or promote products
+* derived from this software without specific prior written permission.
+*
+* THIS SOFTWARE IS PROVIDED BY Marco Renzi "AS IS" AND ANY
+* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+* DISCLAIMED. IN NO EVENT SHALL <copyright holder> BE LIABLE FOR ANY
+* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
@@ -0,0 +1,2 @@
+jQzoom Evolution Library - Javascript Image magnifier
+==================================================
@@ -0,0 +1,120 @@
+.zoomPad{
+ position:relative;
+ float:left;
+ z-index:99;
+ cursor:crosshair;
+}
+
+
+.zoomPreload{
+ -moz-opacity:0.8;
+ opacity: 0.8;
+ filter: alpha(opacity = 80);
+ color: #333;
+ font-size: 12px;
+ font-family: Tahoma;
+ text-decoration: none;
+ border: 1px solid #CCC;
+ background-color: white;
+ padding: 8px;
+ text-align:center;
+ background-image: url(../images/zoomloader.gif);
+ background-repeat: no-repeat;
+ background-position: 43px 30px;
+ z-index:110;
+ width:90px;
+ height:43px;
+ position:absolute;
+ top:0px;
+ left:0px;
+ * width:100px;
+ * height:49px;
+}
+
+
+.zoomPup{
+ overflow:hidden;
+ background-color: #FFF;
+ -moz-opacity:0.6;
+ opacity: 0.6;
+ filter: alpha(opacity = 60);
+ z-index:120;
+ position:absolute;
+ border:1px solid #CCC;
+ z-index:101;
+ cursor:crosshair;
+}
+
+.zoomOverlay{
+ position:absolute;
+ left:0px;
+ top:0px;
+ background:#FFF;
+ /*opacity:0.5;*/
+ z-index:5000;
+ width:100%;
+ height:100%;
+ display:none;
+ z-index:101;
+}
+
+.zoomWindow{
+ position:absolute;
+ left:110%;
+ top:40px;
+ background:#FFF;
+ z-index:6000;
+ height:auto;
+ z-index:10000;
+ z-index:110;
+}
+.zoomWrapper{
+ position:relative;
+ border:1px solid #999;
+ z-index:110;
+}
+.zoomWrapperTitle{
+ display:block;
+ background:#999;
+ color:#FFF;
+ height:18px;
+ line-height:18px;
+ width:100%;
+ overflow:hidden;
+ text-align:center;
+ font-size:10px;
+ position:absolute;
+ top:0px;
+ left:0px;
+ z-index:120;
+ -moz-opacity:0.6;
+ opacity: 0.6;
+ filter: alpha(opacity = 60);
+}
+.zoomWrapperImage{
+ display:block;
+ position:relative;
+ overflow:hidden;
+ z-index:110;
+
+}
+.zoomWrapperImage img{
+ border:0px;
+ display:block;
+ position:absolute;
+ z-index:101;
+}
+
+.zoomIframe{
+ z-index: -1;
+ filter:alpha(opacity=0);
+ -moz-opacity: 0.80;
+ opacity: 0.80;
+ position:absolute;
+ display:block;
+}
+
+/*********************************************************
+/ When clicking on thumbs jqzoom will add the class
+/ "zoomThumbActive" on the anchor selected
+/*********************************************************/
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
+<html xmlns="http://www.w3.org/1999/xhtml" >
+<head>
+<title>JQzoom 2 Demo</title>
+<script src="../js/jquery-1.6.js" type="text/javascript"></script>
+<script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>
+
+<link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">
+<style type"text/css">
+
+body{margin:0px;padding:0px;font-family:Arial;}
+a img,:link img,:visited img { border: none; }
+table { border-collapse: collapse; border-spacing: 0; }
+:focus { outline: none; }
+*{margin:0;padding:0;}
+p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
+fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
+fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
+dl dd{margin:0px;}
+dl dt{}
+
+.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
+.clearfix{display:block;zoom:1}
+
+
+ul#thumblist{display:block;}
+ul#thumblist li{float:left;margin-right:2px;list-style:none;}
+ul#thumblist li a{display:block;border:1px solid #CCC;}
+ul#thumblist li a.zoomThumbActive{
+ border:1px solid red;
+}
+
+.jqzoom{
+
+ text-decoration:none;
+ float:left;
+}
+
+
+
+
+
+</style>
+<script type="text/javascript">
+
+$(document).ready(function() {
+ $('.jqzoom').jqzoom({
+ zoomType: 'standard',
+ lens:true,
+ preloadImages: false,
+ alwaysOn:true
+ });
+
+
+});
+
+
+</script>
+</head>
+
+<body>
+<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
+ <div class="clearfix">
+ <a href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1' title="triumph" >
+ <img src="imgProd/triumph_small1.jpg" title="triumph" style="border: 4px solid #666;">
+ </a>
+ <select style="position:absolute;left:800px;top:120px;"><option>test ie6</option></select>
+ </div>
+ <br/>
+ <div class="clearfix" >
+ <ul id="thumblist" class="clearfix" >
+ <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
+ <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
+ <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>
+ </ul>
+ </div>
+</div>
+<div class="clearfix" style="margin-left:100px">
+ <div class="clearfix"><small style="font-size:10px;">ADVERTISE HERE - contact me at <span style="color:#CC0000">renzi.mrc[at]gmail.com</span></small></div>
+ <a href='mailto:renzi.mrc@gmail.com' style="display:inline-block">
+ <img src='../images/advertise.jpg'>
+ </a>
+ &nbsp;
+</div>
+</body></html>
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
+<html xmlns="http://www.w3.org/1999/xhtml" >
+<head>
+<title>JQzoom 2 Demo</title>
+<script src="../js/jquery-1.6.js" type="text/javascript"></script>
+<script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>
+
+<link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">
+<style type"text/css">
+
+body{margin:0px;padding:0px;font-family:Arial}
+a img,:link img,:visited img { border: none; }
+table { border-collapse: collapse; border-spacing: 0; }
+:focus { outline: none; }
+*{margin:0;padding:0;}
+p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
+fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
+fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
+dl dd{margin:0px;}
+dl dt{}
+
+.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
+.clearfix{display:block;zoom:1}
+
+
+ul#thumblist{display:block;}
+ul#thumblist li{float:left;margin-right:2px;list-style:none;}
+ul#thumblist li a{display:block;border:1px solid #CCC;}
+ul#thumblist li a.zoomThumbActive{
+ border:1px solid red;
+}
+
+.jqzoom{
+
+ text-decoration:none;
+ float:left;
+}
+
+
+
+
+
+</style>
+<script type="text/javascript">
+
+$(document).ready(function() {
+ $('.jqzoom').jqzoom({
+ zoomType: 'drag',
+ lens:true,
+ preloadImages: false
+ });
+});
+
+
+</script>
+</head>
+
+<body>
+<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
+ <div class="clearfix">
+ <a href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1' title="triumph" >
+ <img src="imgProd/triumph_small1.jpg" title="triumph" style="border: 4px solid #666;">
+ </a>
+ <select style="position:absolute;left:800px;top:120px;"><option>test ie6</option></select>
+ </div>
+ <br/>
+ <div class="clearfix" >
+ <ul id="thumblist" class="clearfix" >
+ <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
+ <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
+ <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>
+ </ul>
+ </div>
+</div>
+<div class="clearfix" style="margin-left:100px">
+ <div class="clearfix"><small style="font-size:10px;">ADVERTISE HERE - contact me at <span style="color:#CC0000">renzi.mrc[at]gmail.com</span></small></div>
+ <a href='mailto:renzi.mrc@gmail.com' style="display:inline-block">
+ <img src='../images/advertise.jpg'>
+ </a>
+ &nbsp;
+</div>
+</body></html>
Oops, something went wrong.

0 comments on commit 3dd97ab

Please sign in to comment.