Fork me on GitHub

Zoom

Description

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

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
+
1
2
3
    <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>