-
+
- Basic Zoom +
- Tints +
- Gallery & Lightbox +
- Window Position +
- Lens Zoom +
- Inner Zoom +
- Fade In - Fade Out +
- External Controls +
- Easing +
- Scroll Zoom +
- Zoom Level +
- Zoom Window Size +
- Zoom with Image Constrain +
+
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 + +
+
+ +
+ +
+ 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.
+
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;}+ + + +
+ +
+
+
+
+ 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
+
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});+ + +
+ 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.
+
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});+ + +
+
+ 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;}+ + + +
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
+-
+
- Home +
- API & Options +
- Examples +
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%
+ ++ +