From fc04fdf0d7ba7e6684be93426a44b844ff9c0b69 Mon Sep 17 00:00:00 2001 From: Igor Lino Date: Thu, 25 Jun 2015 00:18:20 +0200 Subject: [PATCH] Start migration of the EZPlus demo. No angular directives yet used. --- demo/api.html | 233 ++++++++ demo/app.js | 4 - demo/css/style.css | 541 ++++++++++++++++++ demo/examples.html | 1020 ++++++++++++++++++++++++++++++++++ demo/footer.html | 3 + demo/header.html | 6 + demo/images/bg.jpg | Bin 0 -> 26429 bytes demo/images/bg_col.gif | Bin 0 -> 1365 bytes demo/images/bg_col_right.gif | Bin 0 -> 107 bytes demo/images/bg_col_sep.gif | Bin 0 -> 1629 bytes demo/images/bullet.gif | Bin 0 -> 315 bytes demo/index.html | 143 +---- demo/index2.html | 158 ++++++ demo/js/app.js | 56 ++ demo/{ => js}/controller.js | 2 +- demo/js/web.js | 118 ++++ demo/main.html | 155 ++++++ start-server.bat | 1 + 18 files changed, 2322 insertions(+), 118 deletions(-) create mode 100644 demo/api.html delete mode 100644 demo/app.js create mode 100644 demo/css/style.css create mode 100644 demo/examples.html create mode 100644 demo/footer.html create mode 100644 demo/header.html create mode 100644 demo/images/bg.jpg create mode 100644 demo/images/bg_col.gif create mode 100644 demo/images/bg_col_right.gif create mode 100644 demo/images/bg_col_sep.gif create mode 100644 demo/images/bullet.gif create mode 100644 demo/index2.html create mode 100644 demo/js/app.js rename demo/{ => js}/controller.js (98%) create mode 100644 demo/js/web.js create mode 100644 demo/main.html create mode 100644 start-server.bat diff --git a/demo/api.html b/demo/api.html new file mode 100644 index 0000000..7e4e882 --- /dev/null +++ b/demo/api.html @@ -0,0 +1,233 @@ +
+
+ + +

Configuration Options

+ +

These are the available options for the zoom

+ +

See some examples of usage on our examples page +

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionDefault ValueDesciption
responsivefalseSet to true to activate responsivenes. If you have a theme which changes size, or tablets which + change orientation this is needed to be on. Possible Values: "True", + "False"
scrollZoomfalseSet to true to activate zoom on mouse scroll. Possible Values: "True", "False" +
imageCrossfadefalseSet to true to activate simultaneous crossfade of images on gallery change. Possible Values: + "True", "False"
loadingIconfalseSet to the url of the spinner icon to activate, e.g, http://www.example.com/spinner.gif. + Possible Values: "True", "False"
easingfalseSet to true to activate easing. Possible Values: "True", "False"
easingTypezoomdefault

default easing type is easeOutExpo, (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b
+ Extend jquery with other easing types before initiating the plugin and pass the easing type as a + string value. +

easingDuration2000 
lensSize200used when zoomType set to lens, when zoom type is set to window, then the lens size is auto + calculated +
zoomWindowWidth400Width of the zoomWindow (Note: zoomType must be "window")
zoomWindowHeight400Height of the zoomWindow (Note: zoomType must be "window")
zoomWindowOffetx0x-axis offset of the zoom window
zoomWindowOffety0y-axis offset of the zoom window
zoomWindowPosition1Once positioned, use zoomWindowOffsetx and zoomWindowOffsety to adjust
+ Possible values: 1-16 +
lensFadeInfalseSet as a number e.g 200 for speed of Lens fadeIn
lensFadeOutfalseSet as a number e.g 200 for speed of Lens fadeOut
zoomWindowFadeInfalseSet as a number e.g 200 for speed of Window fadeIn
zoomWindowFadeOutfalseSet as a number e.g 200 for speed of Window fadeOut
zoomTintFadeInfalseSet as a number e.g 200 for speed of Tint fadeIn
zoomTintFadeOutfalseSet as a number e.g 200 for speed of Tint fadeOut
borderSize4Border Size of the ZoomBox - Must be set here as border taken into account for plugin + calculations +
zoomLenstrueset to false to hide the Lens
borderColour#888Border Colour
lensBorder1Width in pixels of the lens border
lensShapesquarecan also be round (note that only modern browsers support round, will default to square in older + browsers) +
zoomTypewindowPossible Values: Lens, Window, Inner
containLensZoomfalsefor use with the Lens Zoom Type. This makes sure the lens does not fall outside the outside of + the image +
lensColourwhitecolour of the lens background
lensOpacity

0.4

used in combination with lensColour to make the lens see through. When using tint, this is + overrided to 0 +
lenszoomfalse 
tintfalseenable a tint overlay, other options: true
tintColour#333colour of the tint, can be #hex, word (red, blue), or rgb(x, x, x)
tintOpacity0.4opacity of the tint
gallerynullThis assigns a set of gallery links to the zoom image
cursordefaultThe default cursor is usually the arrow, if using a lightbox, then set the cursor to pointer so + it looks clickable - Options are default, cursor, crosshair +
+ +
+
+

 

+ + + +
+
+ +
+ diff --git a/demo/app.js b/demo/app.js deleted file mode 100644 index c85e8f0..0000000 --- a/demo/app.js +++ /dev/null @@ -1,4 +0,0 @@ -angular.module('demo', [ - 'demo.controllers', - 'ezplus' -]); diff --git a/demo/css/style.css b/demo/css/style.css new file mode 100644 index 0000000..7206b04 --- /dev/null +++ b/demo/css/style.css @@ -0,0 +1,541 @@ +/* +Theme Name: FancyBox Theme +Theme URI: http://fancybox.net +Description: Custom Theme for the FancyBox Homepage +Version: 1.0 +Author: Janis Skarnelis +Author URI: http://fancybox.net +*/ +html, body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, pre, form, fieldset, p, blockquote, th, td, img, a { + margin: 0; + padding: 0; + border: 0; +} + +html, body { + height: 100%; +} + +body { + color: #3e3e3e; + font: normal 12px Verdana,"lucida console",sans-serif; + background: #F0F0F0 url('../images/bg.jpg') top center no-repeat; +} + +.clear { + clear: both; + font-size: 1px; + line-height: 1px; +} + +h2 { + font-size: 16px; + font-family: "Lucida Grande",Helvetica,Arial,sans-serif; + font-weight: bold; + margin-bottom: 5px; +} + +a { + color: #15081F; + text-decoration: underline; + outline: none; +} + +a:hover { + color: #C73B7C; +} + +#page { + width: 1033px; + margin: 0 auto; +} + +#page.home { + width: 860px; +} + + + +#header { + height: 110px; +} + +#header h1 { + float: left; + margin-left: 20px; + margin-top: 15px; +} + +#header h1 a { + color: #fff; + text-decoration: none; + font-size: 30px; +} + +#header ul { + float: right; + margin-top: 33px; +} + +#header ul li { + display: inline; + padding-left: 27px; + padding-bottom: 10px; +} + +#header ul li a { + color: #D52000; + font-size: 15px; + font-family: Arial; + text-decoration: none; + /*text-shadow: 1px 1px 1px #222222;*/ + position: relative; +} + +#header ul li a.active, #header ul li a:hover { + border-bottom: 1px solid #D52000; +} + +#col_wrap { + /*min-height: 610px;*/ + /*background: #F9F9F7 url('../images/bg_col_right.gif') top right repeat-y;*/ +} + +#col_top { + background: url('../images/bg_col.gif') top left no-repeat; + height: 10px; + line-height: 1; + font-size: 1px; +} + +#col_sep { + background: url('../images/bg_col_sep.gif') bottom left no-repeat; + padding: 17px 0; +} + +#col_left { + float: left; + /*width: 570px;*/ + padding: 20px 20px 20px 30px; +} + +#col_left h1 { + font-family: Tahoma; + font-size: 26px; + font-weight: normal; + color: #872651; + margin-top: 10px; + margin-bottom: 15px; +} + +#col_left h1 span { + font-size: 20px; +} + +#col_left p { + padding-bottom: 15px; + margin: 0; + line-height: 22px; +} + +/* +#col_left img { + padding: 5px; + background: white; + border: 1px solid #BBB; + margin: 7px 14px 7px 0; + width: 160px; +}*/ + +#col_left ul { + padding: 0; + margin: -10px 0 15px 30px; +} + +#col_left ul li { + line-height: 25px; +} + +table.options { + border-left: 1px solid #E2E2E2; + margin-bottom: 15px; +} + +table.options th { + background: #15081F; + color: #fff; + padding: 10px; + text-align: left; + font-weight: normal; + border-right: 1px solid #3B224F; + border-bottom: 1px solid #3B224F; +} + +table.options td { + padding: 7px 10px; + border-right: 1px solid #DDD; + border-bottom: 1px solid #DDD; + line-height: 1.6; +} + +table.options tr.even { + background: #E9E9E9; +} + +table.options tr.sep td { + border-bottom: 1px solid #BBB; +} + +#col_right { + float: right; + width: 230px; + text-align: center; +} + +#col_right h2 { + margin-bottom: 10px; +} + +#col_right p { + text-align: left; + padding-left: 20px; + line-height: 24px; + font-size: 12px; +} + +#adblock { + margin-top: 20px; + margin-left: 25px; + width: 130px; + padding: 0; + text-align: left; +} + +.advertise { + font-size: 10px; + padding-left: 15px; +} + +body .one .bsa_it_ad{background:transparent;border:none;padding:0;margin:0;} +body .one .bsa_it_ad:hover img{-moz-box-shadow:0 0 3px #000;-webkit-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000;} +body .one .bsa_it_ad .bsa_it_i{display:block;padding:0;float:none;margin:0 0 5px;} +body .one .bsa_it_ad .bsa_it_i img{padding:0;border:none;} +body .one .bsa_it_ad .bsa_it_t{padding:6px 0 0 0;} +body .one .bsa_it_p{display:none;} +body #bsap_aplink,body #bsap_aplink:hover{display:block;font-size:10px;margin:12px 0 0;} + + +#col_bottom { + height: 10px; + background: url('../images/bg_col.gif') bottom left no-repeat; + line-height: 1; + font-size: 1px; +} + +#footer { + color: #75A1D0; + padding: 10px 30px 50px 30px; +} + +#footer p { + font-size: 11px; + line-height: 20px; +} + +#footer p a { + color: #75A1D0; +} + +#footer p a:hover { + color: #BBB; +} + +/*#col_left pre { + padding: 0; + margin: 0; + margin-bottom: 10px; + line-height: 20px; + background: #15081F; + width: 570px; + overflow: auto; + overflow-Y: hidden; +} + +#col_left pre code { + margin: 0 0 0 15px; + padding: 16px 0; + display: block; + color: #FFF; + font: normal 11px/18px Verdana,Sans-Serif; +} + +#col_left pre code a { + color: #FFF; +}*/ + +#col_left .faq { + padding: 10px 0; +} + +#col_left .faq strong { + display: block; + padding: 10px; + color: #FFF; + background: #270B2B; + font-weight: normal; +} + +#col_left .faq p { + padding: 10px; + background: #FFF; +} + +#col_left ul.list { + list-style: none; + margin-top: -10px; + margin-left: 10px; +} + +#col_left ul.list li { + background: url('../images/bullet.gif') 0 6px no-repeat; + padding-left: 20px; +} + +#col_left .list { + margin-bottom: 25px; +} + +#col_left .list .h { + font-weight: bold; + background: #F3F3F3; + border-top: 1px solid #E2E2E2; + border-bottom: 1px solid #E2E2E2; + padding: 12px 7px; + color: #555; + margin-bottom: 15px; +} + +#col_left .list p { + padding : 0 10px 10px 10px; +} + +#faq .list .h { + margin-bottom: 10px; +} + +#faq .list { + margin-bottom: 5px; +} + +.right { + float: right; +} + +.note { + padding: 20px 0 0 0; +} + +small { + font-size: 10px; +} + +#social { + float: right; + padding-right: 20px; +} + +#social a { + margin-left: 2px; +} + +#social a img { + padding-top: 4px; +} + +.warn { + padding: 10px 10px 0 10px; + background-color: #FFFFCC; + border: 1px solid #CCCCAA; + margin-right: 30px; + margin-bottom: 25px; + -moz-border-radius: 5px; +} + +/* +* Some CSS for examples +*/ +object, embed { + vertical-align: top; +} + +#login_error { + display: none; + background: red; + color: #FFF; +} + +form label { + display: block; +} + +form p { + padding: 7px; + line-height: 1.6; +} + +#inline1 { + overflow: auto; + width: 500px; + height: 100px; + background-color: #FDFDFD; +} + +#page #inline1 { + display: none; +} + +#page #inline2 { + display: none; +} + +#tip7-title { + text-align: left; +} + +#tip7-title b { + display: block; + margin-right: 80px; +} + +#tip7-title span { + float: right; +} + + + + +#zoom1, #zoom2, #zoom3, #zoom4, #zoom5{ + border: 1px solid #E8E8E6; +} + +.zoom-left{ + float:left; + width:412px; + +} +.zoom-right{ + float:left; + width:320px; + padding:20px; + +} +body { + +} + +hr { + margin: 13px 0; +} + +hr.style-one { + border: 0; + height: 1px; + background: #333; + background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); + background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); + background-image: -ms-linear-gradient(left, #ccc, #333, #ccc); + background-image: -o-linear-gradient(left, #ccc, #333, #ccc); +} + +hr.style-two { + border: 0; + height: 0px; + background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); + background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); + background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); + background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); +} + +hr.style-three { + border: 0; + border-bottom: 1px dashed #ccc; + background: #999; +} + + + + +.zoom-wrapper{ + border-radius: 10px; + border: 1px solid #E0E0E0; + padding: 10px; + background-color: #F7F7F7; +} +h6 { + clear: both; + margin-top: 13px !important; + font-size: 15px !important; + margin-top: 7px !important; +} +.view_source { + -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; + -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; + box-shadow:inset 0px 1px 0px 0px #ffffff; + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FCBDB2), color-stop(1, #E26464) ); + background:-moz-linear-gradient( center top, #FCBDB2 5%, #E26464 100% ); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCBDB2', endColorstr='#E26464'); + background-color:#FCBDB2; + -moz-border-radius:6px; + -webkit-border-radius:6px; + border-radius:6px; + border:1px solid #dcdcdc; + display:inline-block; + color:#ffffff; + font-family:Arial; + font-size:15px; + font-weight:bold; + padding:6px 24px; + text-decoration:none; +}.view_source:hover { + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #E26464), color-stop(1, #FCBDB2) ); + background:-moz-linear-gradient( center top, #FCBDB2 5%, #E26464 100% ); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#E26464', endColorstr='#FCBDB2'); + background-color:#FCBDB2; + }.view_source:active { + position:relative; + top:1px; + } +.menutop{ + z-index:3; +} +/* This imageless css button was generated by CSSButtonGenerator.com */ + + +.zoomContainer{ +} + +.zoom-gallery-hover{ + border: 2px solid orange; +} + +.examplenav { + list-style-type: none; + border-radius: 10px; + padding: 10px 10px 0 10px; + background-color: white; + border: 1px solid #F0F0F0; + float: left; + width: 153px; + height: 1000px; +} + +.floatingdiv { + background-color: white; + position: fixed; + left: 0; + bottom: 0; + height: 200px; + width: 200px; + + opacity: 0.4; +} diff --git a/demo/examples.html b/demo/examples.html new file mode 100644 index 0000000..1b4a691 --- /dev/null +++ b/demo/examples.html @@ -0,0 +1,1020 @@ +
+
+ + + + +
+ +

+
+ + + + +
+ +

Jquery Image Zoom Plugin Examples

+ +
+ +
+
+ +
+
+

Basic Zoom

+ +

The zoom works with either one or two images. Two images are recommended for the zoom to work + the + best. + Most of the settings for the zoom box can be overridden. +

+ SHOW THE CODE +
+
+ +
+
HTML
+ 
<img id="zoom_01" src="small/image1.png"
+                        data-zoom-image="large/image1.jpg"/>
+
JAVASCRIPT
+ 
$("#zoom_01").ezPlus();
+
+
+
+ + +
+
+ +
+
+

Tints

+ +

+ You can easily set tints for the zoom, you can set the colour and opacity of the tint + overlay to + be any value + +

+ Red
+ +
+
+ black
+ +
+
+ Green
+ +
+

+ SHOW THE CODE + +
+
+ +
+
HTML
+ 
<img id="zoom_02" src="small/image1.png"
+                        data-zoom-image="large/image1.jpg"/>
+
JAVASCRIPT
+ 
$("#zoom_02").ezPlus({tint:true,
+                        tintColour:'#F90', tintOpacity:0.5});
+
+
+
+ + +
+
+ + + +
+
+

Gallery & Lightbox

+ +

+ You can attach a set of images to the zoom. + Also you can pass a gallery to the lightbox +
+ NEW: The imageCrossfade option will give a simultaneous fadein / fadeout effect + on + the zoom. +

+ SHOW THE CODE +
+
+ + +
+
HTML
+
<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>
+
+    <div id="gal1">
+
+    <a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
+    <img id="img_01" src="thumb/image1.jpg" />
+    </a>
+
+    <a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
+    <img id="img_01" src="thumb/image2.jpg" />
+    </a>
+
+    <a href="#" data-image="small/image3.jpg" data-zoom-image="large/image3.jpg">
+    <img id="img_01" src="thumb/image3.jpg" />
+    </a>
+
+    <a href="#" data-image="small/image4.jpg" data-zoom-image="large/image4.jpg">
+    <img id="img_01" src="thumb/image4.jpg" />
+    </a>
+
+    </div>
+
JAVASCRIPT
+
//initiate the plugin and pass the id of the div containing gallery images
+    $("#zoom_03").ezPlus({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active',
+    imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
+
+    //pass the images to Fancybox
+    $("#zoom_03").bind("click", function(e) {
+    var ez = $('#zoom_03').data('ezPlus');
+    $.fancyboxPlus(ez.getGalleryList());
+    return false;
+    });
+
CSS
+ Note: Don't forget to put the class name you set on the default gallery image so it shows active + from + the start. +
/*set a border on the images to prevent shifting*/
+    #gallery_01 img{border:2px solid white;}
+
+    /*Change the colour*/
+    .active img{border:2px solid #333 !important;}
+
+
+
+ + + +
+
+ This container is to show that the zoom can be positioned into any on screen element +
+
+ + +
+ +
+ +
+
+ This container is to show that the zoom can be positioned into any on screen element +
+
+
+
+
+
+ Position 1: Default +
+
+ +
+
+
+
+ Position 12 +
+
+ + +
+
+
+
+ Position in a DIV +
+
+ + +
+
+
+
+ Position 1 - 10 px X-offset +
+
+ + + +
+
+
+ +
+

Window Position

+ +

+ Positioning the window can be done in by setting a default position, and then using x and y + offset + to adjust + +
You can also position the window into a container +

+ SHOW THE CODE + +
+
+ +
+
HTML
+
<img id="zoom_04a" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
+    <img id="zoom_04b" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
+    <img id="zoom_04c" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
+    <img id="zoom_04" src="small/image1.png"
+    data-zoom-image="large/image1.jpg"/>
+
JAVASCRIPT
+
$("#zoom_04a").ezPlus({zoomWindowPosition: 1});
+    $("#zoom_04b").ezPlus({zoomWindowPosition: 12});
+    $("#zoom_04c").ezPlus({zoomWindowPosition: "demo-container", zoomWindowHeight: 200,
+    zoomWindowWidth:200, borderSize: 0, easing:true});
+    $("#zoom_04d").ezPlus({zoomWindowPosition: 1, zoomWindowOffetx: 10});
+
+
+
+ + +
+
+ +
+
+

Inner Zoom

+ +

+ The zoom can be placed inside of the image +

+ SHOW THE CODE + +
+
+ +
+
HTML
+ 
<img id="zoom_05" src="small/image1.png"
+                    data-zoom-image="large/image1.jpg"/>
+
JAVASCRIPT
+
$("#zoom_05").ezPlus({
+    zoomType : "inner",
+    cursor: "crosshair"
+    });
+
+
+
+ + +
+
+ +
+
+

Lens Zoom

+ +

+ You can use the lens zoom setting to "Magnify the image".
+ The image to the lest has been constrained so it tucks underneath the image. +

+ SHOW THE CODE + +
+
+ +
+
HTML
+ 
<img id="zoom_07" src="small/image1.png"
+                    data-zoom-image="large/image1.jpg"/>
+
JAVASCRIPT
+
$("#zoom_07").ezPlus({
+    zoomType : "lens",
+    lensShape : "round",
+    lensSize : 200
+    });
+
+
+
+ + +
+
+ +
+
+

Fade in / Fade Out Settings

+ +

+ You can fade in and out on the Lens, Window and Tint +

+ SHOW THE CODE + +
+
+ +
+
HTML
+ 
<img id="zoom_08" src="small/image1.png"
+                    data-zoom-image="large/image1.jpg"/>
+
JAVASCRIPT
+
$("#zoom_08").ezPlus({
+    zoomWindowFadeIn: 500,
+    zoomWindowFadeOut: 500,
+    lensFadeIn: 500,
+    lensFadeOut: 500
+    });
+
+
+
+ + +
+
+ + + +
+
+

External Controls

+ +

+ You can fade in and out on the Lens, Window and Tint + Change the image on dropdown + +

+ SHOW THE CODE + +
+
+ +
+
HTML
+
<img id="zoom_09" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
+
+    <select id="select">
+    <option value="1">Front</option>
+    <option value="2">Back</option>
+    <option value="3">Scenery</option>
+    <option value="4">Side</option>
+    </select>
+
JAVASCRIPT
+
$("#zoom_09").ezPlus({
+    gallery : "gallery_09",
+    galleryActiveClass: "active"
+    });
+
+
+    $("#select").change(function(e){
+    var currentValue = $("#select").val();
+    if(currentValue == 1){
+    smallImage = 'https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/small/image1.jpg';
+    largeImage = 'https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/large/image1.jpg';
+    }
+    if(currentValue == 2){
+    smallImage = 'https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/small/image2.jpg';
+    largeImage = 'https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/large/image2.jpg';
+    }
+    if(currentValue == 3){
+    smallImage = 'https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/small/image3.jpg';
+    largeImage = 'https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/large/image3.jpg';
+    }
+    if(currentValue == 4){
+    smallImage = 'https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/small/image4.jpg';
+    largeImage = 'https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/large/image4.jpg';
+    }
+    // Example of using Active Gallery
+    $('#gallery_09 a').removeClass('active').eq(currentValue-1).addClass('active');
+
+
+    var ez = $('#zoom_09').data('ezPlus');
+
+    ez.swaptheimage(smallImage, largeImage);
+
+    });
+
+
+
+ + +
+
+ + +
+
+

Easing

+ +

+ You can use the default easing or a custom easing setting. + The amount of easing can also be altered - default is 12, set higher for more, lower for less + +

+ SHOW THE CODE + +
+
+ +
+
HTML
+ 
<img id="zoom_10" src="small/image1.png"
+                data-zoom-image="large/image1.jpg"/>
+
JAVASCRIPT
+ 
$("#zoom_10").ezPlus({easing :
+                    true});
+
+
+
+ + +
+
+ + +
+
+

Mousewheel Zoom

+ +

+ You can scroll over the image to zoom in closer! + +

+ SHOW THE CODE + +
+
+ +
+
HTML
+ 
<img id="zoom_mw" src="small/image1.png"
+                data-zoom-image="large/image1.jpg"/>
+
JAVASCRIPT
+ 
$("#zoom_mw").ezPlus({scrollZoom :
+                true});
+
+
+
+ + + +
+ + +
+
+ + +
+
+

Change the Zoom Window Size

+ +

+ The Zoom Window Size can be adjusted to any proportions. + +

+ SHOW THE CODE + +
+
+ +
+
HTML
+
<img id="zoom_13" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
+    <img id="zoom_14" src="small/image1.png"
+    data-zoom-image="large/image1.jpg"/>
+
JAVASCRIPT
+
$("#zoom_13").ezPlus({
+    zoomWindowWidth:300,
+    zoomWindowHeight:100
+    });
+
+    $("#zoom_14").ezPlus({
+    zoomWindowWidth:100,
+    zoomWindowHeight:300
+    });
+
+
+
+ + +
+
+ + + +
+
+

Image Constrain

+ +

+ You can attach a set of images to the zoom. + Also you can pass a gallery to the lightbox +

+ SHOW THE CODE +
+
+ + +
+
HTML
+
<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>
+
+    <div id="gal1">
+
+    <a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
+    <img id="img_01" src="thumb/image1.jpg" />
+    </a>
+
+    <a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
+    <img id="img_01" src="thumb/image2.jpg" />
+    </a>
+
+    <a href="#" data-image="small/image3.jpg" data-zoom-image="large/image3.jpg">
+    <img id="img_01" src="thumb/image3.jpg" />
+    </a>
+
+    <a href="#" data-image="small/image4.jpg" data-zoom-image="large/image4.jpg">
+    <img id="img_01" src="thumb/image4.jpg" />
+    </a>
+
+    </div>
+
JAVASCRIPT
+
//initiate the plugin and pass the id of the div containing gallery images
+    $("#zoom_03").ezPlus({constrainType:"height", constrainSize:274, zoomType: "lens",
+    containLensZoom: true, gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active"});
+
+    //pass the images to Fancybox
+    $("#zoom_03").bind("click", function(e) {
+    var ez = $('#zoom_03').data('ezPlus');
+    $.fancyboxPlus(ez.getGalleryList());
+    return false;
+    });
+
CSS
+ Note: Don't forget to put the class name you set on the default gallery image so it shows active + from the + start. +
/*set a border on the images to prevent shifting*/
+    #gallery_01 img{border:2px solid white;}
+
+    /*Change the colour*/
+    .active img{border:2px solid #333 !important;}
+
+
+
+ + +
+
+ +
+
+ diff --git a/demo/footer.html b/demo/footer.html new file mode 100644 index 0000000..dced1aa --- /dev/null +++ b/demo/footer.html @@ -0,0 +1,3 @@ +

Contact: info [at] issues    + /please, don`t send emails for help, use issues instead

diff --git a/demo/header.html b/demo/header.html new file mode 100644 index 0000000..44e6cc7 --- /dev/null +++ b/demo/header.html @@ -0,0 +1,6 @@ +

Angular-fancybox-plus

+ diff --git a/demo/images/bg.jpg b/demo/images/bg.jpg new file mode 100644 index 0000000000000000000000000000000000000000..88621459b5647ed62e2c079f0845157a469e5d9c GIT binary patch literal 26429 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 literal 0 HcmV?d00001 diff --git a/demo/images/bg_col_right.gif b/demo/images/bg_col_right.gif new file mode 100644 index 0000000000000000000000000000000000000000..a699e417134bd9c034b8f824c760032f44ede71b GIT binary patch literal 107 zcmZ?wbhEHbe8#}Yu$h73{rmUt-o1PK_U)TDZyr5*^y0;fXV0G9ym|BK)29sBfZ|UU pu&@q@1ew9WBJn{W<&=Q=3x-|)6Eyl#GUsKiT9@;BUlI$0H2@CNDhU7p literal 0 HcmV?d00001 diff --git a/demo/images/bg_col_sep.gif b/demo/images/bg_col_sep.gif new file mode 100644 index 0000000000000000000000000000000000000000..8b1e54d250b65a03c1e4aeac0e9e0c1de79ab058 GIT binary patch literal 1629 zcmbu4={FmQ0>x8J(@wm>7`3DZQ++5c#-WTVstYQV(k&^)w3gV*#8M^ES|_yCTGCNd z5nGcq#^{tN#ZbuvO{r|OmXKzVghUdxygc*%g?B&P5BJ>jyXX4)pLP2&iVxrerT~C1 zU)1aCDw#~CRx3Fij!Lz*wkDU$SCmSHO0|6u5&@UX6^R5ZD^iJ6D3waZVzEFV zV6)jurE+|Noh%JE+RiMxiGr2tg5=E zHVhM=heD^^e2i_xH{Ja8P6Fy-Iqj_l?HwVcnCQ^+z`M+Y zujIDOR#-ks42j{h3NO*?l~_Xz=jApxFI$^culF_BO=pjvQ9$^UuMHikc8}p9Ue#orP*F^1}%>Wwi8$;^`Hd&zXCal>k z-H5*;&y-w@o6FNb=%;BY8cMSXziU#kK3Z7Zb`w{4Fxq;yjPh*XjH9DHJ37;xY0N8M zIMKwjcZyM4I-KltyK(r8Ro09^vQQb2+LUHovK2PPsM_Ki>Y4?@mTc(Xg{gR06vC%185~z!Tfs$qM?j!O#NZE4 zhDlu_+izcFt|Ru4{{X}H{7!-d?CEH;6@%K5ZepX(biV^8FQMv)~zWf2b+O5dgNF zX&(UE2~&p>eYQxy=)<8_Z})F*wvQO-QdUMbD=}o65_cpe(uil{G?+xIi`lny>Bx^GpCrip&Mb_&Bd4Z3z3X)Tw)&3@nFRk~ z)6A1JRdGF`Yr$XLo4Ux)E6biMuYH<6{~)x&dd7vY^+LFetA8Qlb$lX;*@Ho(WyXY# zhA8PRO8hc(R1vsArD(=`M*Cu6&eCB}N-l$HO?XWl@w$&(>vibsc}u+N;Gy!n-?ueB z=4y9B5LBEmT@QpO{ij8oz|Cut`9i!J6_zls2K6TPP5mZ|lV7Jv2nD=%_Wof%BVg}` z3tFU3ZyT3Xe_f9Yz+&eC^NYd0M#KGD<`ePg2CFIgPKJ9 zv;xJ|{#IWP$sKZrfWT$JYR$Duo&gVe4}9hH0IeH5S7Km+(yyToS-G#424iprEq=qc zu+_3Fqd3D?)H60g-df-2p}_78v|iX8CKif}qm5>2 zs;{elB+#t3A9&1Sm-aOat&-DtfFX@~)?NPa0S14_+Mjj~CarI(wL+V0FVp_MM45O5^h57;M4^2kP7lj+o9r`b^oWhhDuX$|Uf^N$g#{aB2VmSUFVftZ)3l}c9cQQ0? zVknvKlsVs^bb*^w8^iSD3=3~E+;}l%*%OAgO%bzBF?e(_giR51?O?ce?V5WRL(4G+ zw{`}Xc7}WR?k%{%P`{QTxL@ePi~RYQ84kU0u3yD)@tNOP4ib|ZS#()77f3kqZ zbU-A?PYi4k4h;n!I#T^7mKY^kYPL6et!?&Eh??KP#I7tWXnyjr+MyUT0c9_QDHO@D@N$r*Fz&U0k21^|7Z BdrSZT literal 0 HcmV?d00001 diff --git a/demo/index.html b/demo/index.html index 4f4ee19..5debcc3 100644 --- a/demo/index.html +++ b/demo/index.html @@ -6,10 +6,7 @@ - Angular Colorbox Demo - - - + Angular-FancyBox-Plus Demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Angular Elevate Zoom Plus Examples

+ +

Basic example

+ +

Use these examples as a way to quickly start any new web project that requires image zooming.

+ + +

Basic Zoom

+ + +
+ +

Zoom example with Width/Height 75%

+ + + +
+ +

Gallery

+ + + + + + + + + +
+ +
+ + + + + + + + diff --git a/demo/js/app.js b/demo/js/app.js new file mode 100644 index 0000000..4923d4d --- /dev/null +++ b/demo/js/app.js @@ -0,0 +1,56 @@ +angular.module('elevatezoomdemo', [ + 'elevatezoomdemo.controllers', + 'ezplus', + 'fancyboxplus', + 'ui.router' +]) + + .run( + [ '$rootScope', '$state', '$stateParams', + function ($rootScope, $state, $stateParams) { + + // It's very handy to add references to $state and $stateParams to the $rootScope + // so that you can access them from any scope within your applications. + $rootScope.$state = $state; + $rootScope.$stateParams = $stateParams; + } + ] +) + + .config(function($stateProvider, $urlRouterProvider) { + // + // For any unmatched url, redirect to /state1 + $urlRouterProvider.otherwise("/main"); + // + // Now set up the states + $stateProvider + .state('main', { + url: "/main", + templateUrl: "main.html", + controller: DemoCtrl + }) + .state('api', { + url: "/api", + templateUrl: "api.html", + controller: CueCtrl + }) + .state('examples', { + url: "/examples", + templateUrl: "examples.html", + controller: CueCtrl + }); + + function CueCtrl($timeout) { + $timeout(function () { + Cufon.replace('h1', {color: '#ff6347'}); + }, 0); + } + + function BlogCtrl($timeout, $scope, fancyboxService) { + CueCtrl($timeout); + } + + function DemoCtrl($timeout, $scope, fancyboxService) { + CueCtrl($timeout); + } + }); diff --git a/demo/controller.js b/demo/js/controller.js similarity index 98% rename from demo/controller.js rename to demo/js/controller.js index c7deae8..accec8d 100644 --- a/demo/controller.js +++ b/demo/js/controller.js @@ -1,4 +1,4 @@ -angular.module('demo.controllers', []). +angular.module('elevatezoomdemo.controllers', []). controller('EZPlusCtrl', function ($scope, $location) { $scope.imagesForGallery = []; $scope.setApproot = function(appRoot) { diff --git a/demo/js/web.js b/demo/js/web.js new file mode 100644 index 0000000..0174455 --- /dev/null +++ b/demo/js/web.js @@ -0,0 +1,118 @@ +jQuery(document).ready(function () { + + var $ctb = $('.table tbody'), + $cta = $ctb.find('td .arrow'), + $ctr = $cta.parents('tr'); + // + //// object toggelen + //$cta.click(function () { + // return false; + //}); + //$ctr.find('td:lt(2)').hover( + // function () { + // $(this).parent().addClass('hover'); + // }, + // function () { + // $(this).parent().removeClass('hover'); + // } + //).click(function () { + // $('span.params', this).toggle(); + // $(this).parent().toggleClass('closed').find('td:eq(1) small span').each(function () { + // if (this.style.display === 'none') $(this).show(); + // else $(this).hide(); + // }); + // var obj = $('.' + $(this).parent().next().attr('id')); + // if (obj[0].style.display === 'none') obj.show(); + // else obj.hide(); + // return false; + // }).css('cursor', 'pointer').end().find('td:lt(1)').click(); + // + //// achtergrond even/oneven + $ctb.each(function () { + var ctrn = 0; + $('.table tbody tr:odd').addClass('odd'); + $('.table tbody tr:even').addClass('even'); + + }); + + // code + italic + $ctb.find('tr').each(function () { + if ($('td', this).length === 5) $(this).find('td:eq(2)').wrapInner('').end().find('td:eq(3)').addClass('italic'); + if ($('td', this).length === 4) $(this).find('td:eq(2)').addClass('italic'); + if ($('td', this).length === 3) $(this).find('td:eq(1)').addClass('italic'); + }); + + /* + * Zebra-stripping table + */ + + //$('table.options tr:even').addClass('even'); +}); + + +$(document).ready(function () { + + // Using custom configuration + $('#img_01').ezPlus({ + zoomWindowFadeIn: 500, + zoomLensFadeIn: 500, + gallery: 'gal1', + imageCrossfade: true, + zoomWindowWidth: 411, + zoomWindowHeight: 274, + zoomWindowOffetx: 10, + scrollZoom: true, + cursor: 'pointer' + }); + + + $('#img_01').bind('click', function (e) { + var ez = $('#img_01').data('ezPlus'); + $.fancyboxPlus(ez.getGalleryList()); + return false; + }); + $('#img_02').ezPlus({ + gallery: 'gal2', + tint: true, + cursor: 'crosshair', + windowHeight: 600 + }); + $('#img_03').ezPlus({ + zoomType: 'lens', + lensShape: 'round', + lensSize: 200 + }); + + + $('#img_02').bind('click', function (e) { + var ez = $('#img_02').data('ezPlus'); + $.fancyboxPlus(ez.getGalleryList()); + return false; + }); + + +}); + +$(document).ready(function () { + $(function () { + var slide_duration = 1000; + $('.view_source').click(function () { + t = $(this).attr('rel'); + h = $('.' + t + ''); + h.slideToggle(slide_duration); + if ($(this).html() === 'SHOW THE CODE') { + $(this).html('HIDE THE CODE'); + h.show(); + } + else { + $(this).html('SHOW THE CODE'); + } + //slideToggle(slide_duration); + // s.find('div.script:not('+h+')').slideUp(slide_duration); + + return false; + }); + }); +}); + + diff --git a/demo/main.html b/demo/main.html new file mode 100644 index 0000000..d1f5fa9 --- /dev/null +++ b/demo/main.html @@ -0,0 +1,155 @@ +
+
+ + +

What is it?

+ +

+ ElevateZoom-Plus is a jquery + plugin for zooming images within a container or also in a + "lens" + that floats overtop of web page. +
+ It was built using the jQuery library. + Licensed under MIT license +

+ + +

Features

+ +
    +
  • Fully Customisable
    • +
  • Coloured Tints
    • +
  • Fancybox-Plus and Colorbox Gallery Support +
    • +
  • Variable zoom on mouse scroll
    • +
  • External Controls
    • +
  • Window Zoom, Lens Zoom and Inner Zoom
    • +
  • AngularJS directive available: angular-elevatezoom-plus +
    • +
  • Free to use under MIT license
    • + +
+ +
+ + +
+ + + + + + + + + + + + +
+
+
+ + +
+
HTML
+ 
<img id="zoom_04" src="small/image1.png"
+                    data-zoom-image="large/image1.jpg"/>
+
JAVASCRIPT
+ 
$("#zoom_04").ezPlus();
+
+ +
+ +
+ +
+

Installation and usage

+ +

No need to download anything, you only need to include the jquery and elevatezoom plugin files into + your project as show below:

+ +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+    <script type="text/javascript" src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/src/jquery.ez-plus.js"></script>
+ + +

Include your Image

+ +

ElevateZoom-Plus works best using two images, one low resolution for the visible image, and one + high + resolution for the zoomed image. + If you only have one image available, Elevate Zoom will still work if you scale down the + image, + although this is not recommended as your page load time will increase if + you are loading larger images

+ +

Please ensure your small image is proportionally scaled down from the large image. + +

+ 

<img id="zoom_01" src="small/image1.png"
+                    data-zoom-image="large/image1.jpg"/>
+

Activate the zoom - Basic + Example

+ + 
$("#img_01").ezPlus();
+ +

More Examples

+ + See More examples of the image zoom here + + +
+ + + +
+
+ +
+ diff --git a/start-server.bat b/start-server.bat new file mode 100644 index 0000000..7a5d897 --- /dev/null +++ b/start-server.bat @@ -0,0 +1 @@ +http-server .\ \ No newline at end of file