Zoom

Description

An interaction that zooms into an image and displays a higher resolution image that can be panned.

Zoom can be triggered by a tap on a button element, a tap on the image directly (which will focus on the coordinates tapped), or through a pinch gesture.

Attributes

Basic Advanced JavaScript

data-ur-set="zoom": add this attribute to the element that wraps the whole interaction
data-ur-zoom-component="img": the img element
data-ur-zoom-component="button": zoom in/out button
data-ur-zoom-component="loading": loading indicator when loading the larger image

Required


                  
                    
                      data-ur-set="zoom"

this element should wrap the whole interaction
multiple?: false
state: active / inactive (reflects currently visible item)
attributes
- optional: data-ur-touch: enabled/disabled (allow clicking image to zoom)


                  
                    
                      data-ur-zoom-component="img"

this attribute is for the image to be zoomed
multiple?: false
state: N/A
attributes
- required: data-ur-src: source of the larger image
- optional: data-ur-width: integer (width of larger image), use this to start the zoom animation before loading the larger image
- optional: data-ur-height: integer (height of larger image), used with data-ur-width

Optional


                  
                    
                      data-ur-zoom-component="button"

zoom in/out the image
multiple?: false
state: enabled / disabled


                  
                    
                      data-ur-zoom-component="loading"

indicates when big image is loading
multiple?: false
state: enabled / disabled

You can also directly initialize the widget in JavaScript (components can be passed in as strings/elements/arrays):

Uranium.lib.zoom({
  set: "#a",
  loading: "#b",
  imgs: [
    { img: "#c", width: 1024, height: 768 }
  ]
});

Demonstration

Example

+ −

Loading…

The Code

    <div data-ur-set="zoom">
      <img data-ur-zoom-component="img" src="images/pic1.jpg" data-ur-src="images/pic2.jpg">
      <div data-ur-zoom-component="button">
        <span>+</span>
        <span>&minus;</span>
      </div>
      <div data-ur-zoom-component="loading" data-ur-state="disabled">Loading&hellip;</div>
    </div>

Recommended Styles

SCSS CSS

    /* Recommended SCSS Styling (using the Bourbon mixin library) */

    [data-ur-set="zoom"] {
      display: inline-block;
      overflow: hidden;
      position: relative;
      max-width: 100%; // for when zoom is combined with carousel
    }
    
    [data-ur-zoom-component="img"] {
      vertical-align: top;
      &[data-ur-state="enabled-in"], &[data-ur-state="enabled-out"] {
        @include transition(0.4s ease-in-out);
        @include transition-property(transform);
      }
      &[data-ur-state="enabled-slide"] {
        @include transition(0.3s ease-out);
        @include transition-property(transform);
      }
    }

    [data-ur-zoom-component="loading"][data-ur-state="disabled"] {
      display: none;
    }

    /* Recommended CSS Styling */

    [data-ur-set="zoom"] {
      display: inline-block;
      overflow: hidden;
      position: relative;
      max-width: 100%; // for when zoom is combined with carousel
    }
    
    [data-ur-zoom-component="img"] {
      vertical-align: top;
    }
    [data-ur-zoom-component="img"][data-ur-state="enabled-in"], [data-ur-zoom-component="img"][data-ur-state="enabled-out"] {
      -webkit-transition: 0.4s ease-in-out;
      -moz-transition: 0.4s ease-in-out;
      transition: 0.4s ease-in-out;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      transition-property: transform;
    }
    [data-ur-zoom-component="img"][data-ur-state="enabled-slide"] {
      -webkit-transition: 0.3s ease-out;
      -moz-transition: 0.3s ease-out;
      transition: 0.3s ease-out;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      transition-property: transform;
    }

    [data-ur-zoom-component="loading"][data-ur-state="disabled"] {
      display: none;
    }

Zoom Examples

Carousel combo

Here we place zoom interactions inside a carousel

Example The Code

Prev Next

+ −

    <div data-ur-set="carousel" data-ur-fill="1">
      <div data-ur-carousel-component="dots"></div>
      <a data-ur-carousel-component="button" data-ur-carousel-button-type="prev">Prev</a>
      <a data-ur-carousel-component="button" data-ur-carousel-button-type="next">Next</a>
      <div data-ur-set="zoom">
        <div data-ur-zoom-component="button">
          <span>+</span>
          <span>&minus;</span>
        </div>
        <div data-ur-carousel-component="scroll_container">
          <div data-ur-carousel-component="item">
            <img data-ur-zoom-component="img" src="images/pic1.jpg" data-ur-src="images/pic2.jpg" data-ur-width="1000" data-ur-height="573">
          </div>
          <div data-ur-carousel-component="item">
            <img data-ur-zoom-component="img" src="images/pic3.jpg" data-ur-src="images/pic3.jpg">
          </div>
          <div data-ur-carousel-component="item">
            <img data-ur-zoom-component="img" src="images/pic4.jpg" data-ur-src="images/pic4.jpg">
          </div>
      </div>
    </div>