Scroll Watch

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level: 
Advanced

The Scroll-Watch Plugin gives you specific controls over band imagery. In the sections below we will examine the different types of band imagery scroll-watches that can be implemented. The specific modifiers for each will be listed out and links to an example page will be given.

The Scroll-Watch plugin encompasses a variety of effects. Start with a <div class="wdn-band"> add place a div nested in it. Apply the wdn-scroll-watch class to it, which should look like this: <div class="wdn-scroll-watch">. You will also need to initialize it with the following JavaScript:

<script>
    WDN.initializePlugin('band_imagery');
</script>

Add the desired effect properties to that same div (these are gone into detail below). Enter in the property values that give you the desired effect. Save, test and revise as needed.

Band Imagery, Scroll-Watch Plugin Samples

Scale

Scale properties control the scaling applied to the band image. By setting different values you can control when and how much an image will scale.

data-lerp="scale" Tells the plugin to use the Scaling effect.
data-lerp-scale-start="#attribute1" Tells the plugin when to begin the effect.
data-lerp-scale-end="#atribute2" Tells the plugin when to end the effect.

The scale-start and scale-end are set to trigger at specific IDs. These could be existing page IDs, like #header or #maincontent or a custom ID that you place on your page, such as #scalestart and #scaleend. Use a naming convention that helps to easily identify it.

data-scale-start="1" Tells the plugin what size the image should be at the beginning of the effect.
data-scale-end="1.1" Tells the plugin what size the image should end at.

The data-scale-start and data-scale-end values can range from .1 to 3 or more. The value represents percentage of size; .1 equals 10% of original size while 3 would be 300%.
Example of Scale

Here's how you do it Source code


<div class="wdn-band">
        <div class="wdn-stretch wdn-scroll-watch" data-lerp="scale" data-lerp-scale-start="#header" data-lerp-scale-end="#maincontent" data-scale-start="1" data-scale-end="1.1">
            <figure>
              <img src="samplecontent/unsplash_525a7e89953d1_1.jpg" alt="Black and white sunset">
         </figure>
        </div>
    </div>

Opacity

Opacity properties control the opacity of the band image. By setting different values you can control when and how opaque an image will start and end at.

For this effect you will want to choose a background-color for the wdn-band the opacity div will be nested in. Whatever color you choose will show through when your band image's opacity drops, so keep that in mind.

data-lerp="opacity" Tells the plugin to use the Opacity effect.
data-lerp-opacity-start="#attribute1" Tells the plugin where to begin the effect.
data-lerp-opacity-end="#attribute2" Tells the plugin where to end the effect.

The opacity-start and opacity-end are set to trigger at specific IDs. These could be existing page IDs, like #header or #maincontent or a custom ID that you place on your page, such as #opacitystart and #opacityend. Use a naming convention that helps to easily identify it.

data-opacity-start="1" Tells the plugin what opacity to start at.
data-opacity-end="0.0" Tells the plugin what opacity to end at.

The data-opacity-start and data-opacity-end values can range from 0.0 to 1. The value represents percentage of opacity; 0.0 equals 0% opacity (or completely transparent) while 1 would be 100% (or fully opaque).

Our code example uses a slightly different way of implementing the start and stop of the Opacity effect. Here we rely on absolute positioning applied to our divs: <div id="opacity-start" style="position:absolute; bottom:75%;"></div> and <div id="opacity-end" style="position:absolute; bottom:10%;"></div>. This gives us a beginning and end to the effect relative to the page position of our band, it could be applied to any of our Scroll Watch effects, so play around with different techniques.

Example of Opacity

Here's how you do it Source code


  <div class="wdn-band" style="background-color:black;">
         <div class="wdn-stretch wdn-scroll-watch" data-lerp="opacity" data-lerp-opacity-end="#attribute2" data-lerp-opacity-start="#attribute1" data-opacity-end="0.0" data-opacity-start="1">
             <figure>
                 <img alt="Wheat field" src="samplecontent/unsplash_522af94630a3d_1.jpg">
             </figure>
         </div>
         <div id="opacity-start" style="position:absolute; bottom:55%;"> </div>
         <div id="opacity-end" style="position:absolute; bottom:30%;"> </div>
     </div>

Flipbook

Flipbook properties control a series of images that will display within the band image as the user scrolls the page. By setting different values you can control when and what images will cycle through the band image. A traditional flipbook is a crude form of animation, where you create a bunch of sequential images and flip through them quickly, creating the illusion of motion. While the Flipbook effect is named after this sequential animation, you need not implement it in such a fashion, meaning the photos don't need .

data-lerp="flipbook" Tells the plugin to use the Opacity effect.
data-lerp-flipbook-start="#attribute1" Tells the plugin where to begin the effect.
data-lerp-flipbook-end="#attribute2" Tells the plugin where to end the effect.

The flipbook-start and flipbook-end are set to trigger at specific IDs. These could be existing page IDs, like #header or #maincontent or a custom ID that you place on your page, such as #flipbookstart and #flipbookend. Use a naming convention that helps to easily identify it.

After you've created the wdn-band nest within it a div with the class wdn-scroll-watch, you will also need to add wdn-stretch to that same div, or the images you use won't go fullscreen. Speaking of which, nested in the scroll-watch div, place the images you want to use in individual <figure> tags. Save and test your page. Don't forget your trigger IDs!

Example of Flipbook

Here's how you do it Source code


      <div class="wdn-band">
            <div class="wdn-stretch wdn-scroll-watch" data-lerp="flipbook" data-lerp-flipbook-start="#attribute1" data-lerp-flipbook-end="#attribute2">
                <figure>
                    <img src="resources/bandimagescrollwatch/IMG_2341.jpg" alt="Michael and Jackson" />
                </figure>
                <figure>
                    <img src="resources/bandimagescrollwatch/IMG_2345.jpg" alt="Michael and Jackson" />
                </figure>
                <figure>
                    <img src="resources/bandimagescrollwatch/IMG_2348.jpg" alt="Michael and Jackson" />
                </figure>
            </div>
        </div>

Locked Aside

Locked Aside properties sets an image as a static, or locked, background image, with an area of scrolling text layered over it, usually with a transparent layer beneath the text. When the effect triggers, the background image will expand to take up the entire screen, and return to normal width when the end effect ID triggers.

data-lerp="locked" Tells the plugin to use the Locked Aside effect.
wdn-scroll Tells the plugin to scroll the content.

Start by creating a div with the classes wdn-stretch, wdn-scroll-watch and locked applied to it and nest it within your wdn-band. Nested in the locked div nest the image you want as your Locked Aside background in a figure tag. Create a new div nested in the wdn-band apply the wdn-grid-set and wdn-scroll classes to it. This is where you will place your scrolling text. In the example we use a half column but you could use nearly any width of column you wanted. Add a float and background color to the wdn-col with a style tag. Add your content (HINT! you will need enough text/content to warrant scrolling or there won't be a visible effect!). Save and revise as needed!

Example of Locked Aside

Here's how you do it Source code


<div class="wdn-band">
            <div class="wdn-stretch wdn-scroll-watch locked">
                <figure>
                    <img src="resources/bandimagescrollwatch/unsplash_527bf5fd7f5f6_1.jpg" alt="Tractor in a field" />
                </figure>
            </div>
            <div class="wdn-grid-set wdn-scroll">
                <div class="wdn-col-one-half" style="float:right;background-color:rgba(255,255,255,0.8);padding:5em;">
                    <h3 class="wdn-brand">Locked figure aside scrolling content</h3>
                    <h4 class="wdn-alt-header">Start your story</h4>
                    <p>Lucas ipsum dolor sit amet fisto antilles leia calamari hoth darth ackbar naboo darth tatooine. Secura owen kenobi watto. Ackbar biggs mace kessel. Ewok fett darth moff baba. Padmé yoda moff luke. Skywalker qui-gon dooku jinn mothma biggs chewbacca wampa wookiee. Dantooine ponda sidious aayla utapau hutt yavin darth anakin. Calamari solo moff kit lars kashyyyk ackbar r2-d2 skywalker. Lando skywalker wampa kit. Darth antilles calrissian organa dagobah moff ahsoka. Tatooine boba wookiee grievous solo mon.</p>
                    <p>Calamari jinn jabba jar amidala calamari c-3p0 jade twi'lek. Utapau mon dantooine zabrak amidala vader. Organa wicket yavin biggs grievous tatooine owen hoth. Darth mace jinn coruscant antilles r2-d2. Jinn mon coruscant thrawn. Kessel kenobi ahsoka organa chewbacca tusken raider luke obi-wan. Ponda darth moff skywalker antilles. Sidious hutt skywalker skywalker amidala calamari ben. Moff hutt windu cade hutt dantooine han hutt fett. Lobot darth organa biggs padmé. Obi-wan mon darth organa sith antilles.</p>
                    <p>Lars organa mandalorians darth ackbar moff palpatine dooku. Darth fett windu binks lobot hutt binks obi-wan. Skywalker obi-wan biggs mon. Moff lando watto antilles hoth ahsoka. Skywalker darth antilles kenobi ewok skywalker. Greedo binks ackbar k-3po qui-gon. Kessel moff sidious skywalker hutt hutt. Hoth gonk jango amidala. Antilles antilles anakin jango biggs. Utapau chewbacca skywalker leia. Antilles antilles hutt utapau mara moff windu. Kessel luuke maul fett mara c-3po skywalker ben darth. Darth mara hutt mara.</p>
                    <h4 class="wdn-alt-header">Give it meaning</h4>
                    <p>Grievous coruscant thrawn solo dooku. Wicket bothan moff ewok twi'lek dantooine. Ackbar jawa jango coruscant gamorrean thrawn skywalker han. Ben moff solo naboo. Moff ben fisto windu. Moff mandalorians jabba ponda hutt. Coruscant skywalker chewbacca jabba ponda moff hutt darth k-3po. Skywalker wedge solo skywalker moff binks. Mustafar darth calamari vader calamari. Fett solo jade organa mandalorians obi-wan darth skywalker. Yoda greedo darth wedge. Antilles owen c-3po sidious calamari. Ewok droid vader antilles ben padmé wicket darth ahsoka.</p>
                    <p>Ewok anakin jawa binks hutt ackbar. Solo hoth antilles mon binks chewbacca. Luuke ben ben sebulba hutt antilles. Dantooine darth leia moff solo sidious skywalker hoth. Tatooine jinn yoda solo boba yoda jade boba antilles. Binks dantooine solo jango. Skywalker maul vader binks lando. Kamino mandalore bespin darth jabba moff luke wampa. Binks jade antilles dagobah mothma. Solo owen owen tusken raider droid. Obi-wan fett c-3p0 lando jade sidious. Jinn boba solo darth lars jade. Jade fett ventress mustafar.</p>
                    <p>Lucas ipsum dolor sit amet fisto antilles leia calamari hoth darth ackbar naboo darth tatooine. Secura owen kenobi watto. Ackbar biggs mace kessel. Ewok fett darth moff baba. Padmé yoda moff luke. Skywalker qui-gon dooku jinn mothma biggs chewbacca wampa wookiee. Dantooine ponda sidious aayla utapau hutt yavin darth anakin. Calamari solo moff kit lars kashyyyk ackbar r2-d2 skywalker. Lando skywalker wampa kit. Darth antilles calrissian organa dagobah moff ahsoka. Tatooine boba wookiee grievous solo mon.</p>
                    <p>Calamari jinn jabba jar amidala calamari c-3p0 jade twi'lek. Utapau mon dantooine zabrak amidala vader. Organa wicket yavin biggs grievous tatooine owen hoth. Darth mace jinn coruscant antilles r2-d2. Jinn mon coruscant thrawn. Kessel kenobi ahsoka organa chewbacca tusken raider luke obi-wan. Ponda darth moff skywalker antilles. Sidious hutt skywalker skywalker amidala calamari ben. Moff hutt windu cade hutt dantooine han hutt fett. Lobot darth organa biggs padmé. Obi-wan mon darth organa sith antilles.</p>
                    <p>Lars organa mandalorians darth ackbar moff palpatine dooku. Darth fett windu binks lobot hutt binks obi-wan. Skywalker obi-wan biggs mon. Moff lando watto antilles hoth ahsoka. Skywalker darth antilles kenobi ewok skywalker. Greedo binks ackbar k-3po qui-gon. Kessel moff sidious skywalker hutt hutt. Hoth gonk jango amidala. Antilles antilles anakin jango biggs. Utapau chewbacca skywalker leia. Antilles antilles hutt utapau mara moff windu. Kessel luuke maul fett mara c-3po skywalker ben darth. Darth mara hutt mara.</p>
                    <p>Grievous coruscant thrawn solo dooku. Wicket bothan moff ewok twi'lek dantooine. Ackbar jawa jango coruscant gamorrean thrawn skywalker han. Ben moff solo naboo. Moff ben fisto windu. Moff mandalorians jabba ponda hutt. Coruscant skywalker chewbacca jabba ponda moff hutt darth k-3po. Skywalker wedge solo skywalker moff binks. Mustafar darth calamari vader calamari. Fett solo jade organa mandalorians obi-wan darth skywalker. Yoda greedo darth wedge. Antilles owen c-3po sidious calamari. Ewok droid vader antilles ben padmé wicket darth ahsoka.</p>
                    <p>Ewok anakin jawa binks hutt ackbar. Solo hoth antilles mon binks chewbacca. Luuke ben ben sebulba hutt antilles. Dantooine darth leia moff solo sidious skywalker hoth. Tatooine jinn yoda solo boba yoda jade boba antilles. Binks dantooine solo jango. Skywalker maul vader binks lando. Kamino mandalore bespin darth jabba moff luke wampa. Binks jade antilles dagobah mothma. Solo owen owen tusken raider droid. Obi-wan fett c-3p0 lando jade sidious. Jinn boba solo darth lars jade. Jade fett ventress mustafar.</p>
                    <p>Lucas ipsum dolor sit amet fisto antilles leia calamari hoth darth ackbar naboo darth tatooine. Secura owen kenobi watto. Ackbar biggs mace kessel. Ewok fett darth moff baba. Padmé yoda moff luke. Skywalker qui-gon dooku jinn mothma biggs chewbacca wampa wookiee. Dantooine ponda sidious aayla utapau hutt yavin darth anakin. Calamari solo moff kit lars kashyyyk ackbar r2-d2 skywalker. Lando skywalker wampa kit. Darth antilles calrissian organa dagobah moff ahsoka. Tatooine boba wookiee grievous solo mon.</p>
                    <p>Calamari jinn jabba jar amidala calamari c-3p0 jade twi'lek. Utapau mon dantooine zabrak amidala vader. Organa wicket yavin biggs grievous tatooine owen hoth. Darth mace jinn coruscant antilles r2-d2. Jinn mon coruscant thrawn. Kessel kenobi ahsoka organa chewbacca tusken raider luke obi-wan. Ponda darth moff skywalker antilles. Sidious hutt skywalker skywalker amidala calamari ben. Moff hutt windu cade hutt dantooine han hutt fett. Lobot darth organa biggs padmé. Obi-wan mon darth organa sith antilles.</p>
                </div>
            </div>
        </div>

Locked Flipbook Aside

The Locked Flipbook Aside might sound like a mashup of the previous two styles. That's because it is! For this effect you will use a set of images for the image band. When the initial effect trigger is tripped, the first image in the set will expand to fit full screen. As you scroll through the content in the 'aside' box the images will switch to the next image in the set. The final image will return to normal width when the end trigger is tripped.

Follow the steps for setting up a Flipbook found above. Add the class locked to the wdn-scroll-watch div to add the Locked style to the Flipbook. It should look something like this: <div class="wdn-stretch wdn-scroll-watch locked" data-lerp="flipbook" data-lerp-flipbook-start=".locked-lerp-start" data-lerp-flipbook-end=".locked-lerp-end">. To finish the effect create the wdn-grid-set for the scrolling text. Detailed instructions can be found in the Locked Aside section above, but in short, after placing your images for the Flipbook, add a div with wdn-grid-set and wdn-scroll classes applied to it. Add your wdn-col that will hold your content, style it, add your content. Save. Test. Revise.

Example of Locked Flipbook Aside

Here's how you do it Source code


        <div class="wdn-band">
            <div class="wdn-stretch wdn-scroll-watch locked" data-lerp="flipbook" data-lerp-flipbook-start=".locked-lerp-start" data-lerp-flipbook-end=".locked-lerp-end">
                <figure>
                    <img src="resources/bandimagescrollwatch/IMG_2341.jpg" alt="Michael and Jackson" />
                </figure>
                <figure>
                    <img src="resources/bandimagescrollwatch/IMG_2345.jpg" alt="Michael and Jackson" />
                </figure>
                <figure>
                    <img src="resources/bandimagescrollwatch/IMG_2348.jpg" alt="Michael and Jackson" />
                </figure>
            </div>
            <div class="wdn-grid-set wdn-scroll">
                <div class="wdn-col-one-half" style="float:right;background-color:rgba(255,255,255,0.8);padding:5em;">
                    <div class="locked-lerp-start"></div>
                    <h3 class="wdn-brand">Locked flipbook aside scrolling content</h3>
                    <p>Lucas ipsum dolor sit amet fisto antilles leia calamari hoth darth ackbar naboo darth tatooine. Secura owen kenobi watto. Ackbar biggs mace kessel. Ewok fett darth moff baba. Padmé yoda moff luke. Skywalker qui-gon dooku jinn mothma biggs chewbacca wampa wookiee. Dantooine ponda sidious aayla utapau hutt yavin darth anakin. Calamari solo moff kit lars kashyyyk ackbar r2-d2 skywalker. Lando skywalker wampa kit. Darth antilles calrissian organa dagobah moff ahsoka. Tatooine boba wookiee grievous solo mon.</p>
                    <p>Calamari jinn jabba jar amidala calamari c-3p0 jade twi'lek. Utapau mon dantooine zabrak amidala vader. Organa wicket yavin biggs grievous tatooine owen hoth. Darth mace jinn coruscant antilles r2-d2. Jinn mon coruscant thrawn. Kessel kenobi ahsoka organa chewbacca tusken raider luke obi-wan. Ponda darth moff skywalker antilles. Sidious hutt skywalker skywalker amidala calamari ben. Moff hutt windu cade hutt dantooine han hutt fett. Lobot darth organa biggs padmé. Obi-wan mon darth organa sith antilles.</p>
                    <p>Lars organa mandalorians darth ackbar moff palpatine dooku. Darth fett windu binks lobot hutt binks obi-wan. Skywalker obi-wan biggs mon. Moff lando watto antilles hoth ahsoka. Skywalker darth antilles kenobi ewok skywalker. Greedo binks ackbar k-3po qui-gon. Kessel moff sidious skywalker hutt hutt. Hoth gonk jango amidala. Antilles antilles anakin jango biggs. Utapau chewbacca skywalker leia. Antilles antilles hutt utapau mara moff windu. Kessel luuke maul fett mara c-3po skywalker ben darth. Darth mara hutt mara.</p>
                    <h4 class="wdn-alt-header">Give it meaning</h4>
                    <p>Grievous coruscant thrawn solo dooku. Wicket bothan moff ewok twi'lek dantooine. Ackbar jawa jango coruscant gamorrean thrawn skywalker han. Ben moff solo naboo. Moff ben fisto windu. Moff mandalorians jabba ponda hutt. Coruscant skywalker chewbacca jabba ponda moff hutt darth k-3po. Skywalker wedge solo skywalker moff binks. Mustafar darth calamari vader calamari. Fett solo jade organa mandalorians obi-wan darth skywalker. Yoda greedo darth wedge. Antilles owen c-3po sidious calamari. Ewok droid vader antilles ben padmé wicket darth ahsoka.</p>
                    <p>Ewok anakin jawa binks hutt ackbar. Solo hoth antilles mon binks chewbacca. Luke ben ben sebulba hutt antilles. Dantooine darth leia moff solo sidious skywalker hoth. Tatooine jinn yoda solo boba yoda jade boba antilles. Binks dantooine solo jango. Skywalker maul vader binks lando. Kamino mandalore bespin darth jabba moff luke wampa. Binks jade antilles dagobah mothma. Solo owen owen tusken raider droid. Obi-wan fett c-3p0 lando jade sidious. Jinn boba solo darth lars jade. Jade fett ventress mustafar.</p>
                    <p>Lucas ipsum dolor sit amet fisto antilles leia calamari hoth darth ackbar naboo darth tatooine. Secura owen kenobi watto. Ackbar biggs mace kessel. Ewok fett darth moff baba. Padmé yoda moff luke. Skywalker qui-gon dooku jinn mothma biggs chewbacca wampa wookiee. Dantooine ponda sidious aayla utapau hutt yavin darth anakin. Calamari solo moff kit lars kashyyyk ackbar r2-d2 skywalker. Lando skywalker wampa kit. Darth antilles calrissian organa dagobah moff ahsoka. Tatooine boba wookiee grievous solo mon.</p>
                    <p>Calamari jinn jabba jar amidala calamari c-3p0 jade twi'lek. Utapau mon dantooine zabrak amidala vader. Organa wicket yavin biggs grievous tatooine owen hoth. Darth mace jinn coruscant antilles r2-d2. Jinn mon coruscant thrawn. Kessel kenobi ahsoka organa chewbacca tusken raider luke obi-wan. Ponda darth moff skywalker antilles. Sidious hutt skywalker skywalker amidala calamari ben. Moff hutt windu cade hutt dantooine han hutt fett. Lobot darth organa biggs padmé. Obi-wan mon darth organa sith antilles.</p>
                    <p>Lars organa mandalorians darth ackbar moff palpatine dooku. Darth fett windu binks lobot hutt binks obi-wan. Skywalker obi-wan biggs mon. Moff lando watto antilles hoth ahsoka. Skywalker darth antilles kenobi ewok skywalker. Greedo binks ackbar k-3po qui-gon. Kessel moff sidious skywalker hutt hutt. Hoth gonk jango amidala. Antilles antilles anakin jango biggs. Utapau chewbacca skywalker leia. Antilles antilles hutt utapau mara moff windu. Kessel luuke maul fett mara c-3po skywalker ben darth. Darth mara hutt mara.</p>
                    <p>Grievous coruscant thrawn solo dooku. Wicket bothan moff ewok twi'lek dantooine. Ackbar jawa jango coruscant gamorrean thrawn skywalker han. Ben moff solo naboo. Moff ben fisto windu. Moff mandalorians jabba ponda hutt. Coruscant skywalker chewbacca jabba ponda moff hutt darth k-3po. Skywalker wedge solo skywalker moff binks. Mustafar darth calamari vader calamari. Fett solo jade organa mandalorians obi-wan darth skywalker. Yoda greedo darth wedge. Antilles owen c-3po sidious calamari. Ewok droid vader antilles ben padmé wicket darth ahsoka.</p>
                    <p>Ewok anakin jawa binks hutt ackbar. Solo hoth antilles mon binks chewbacca. Luke ben ben sebulba hutt antilles. Dantooine darth leia moff solo sidious skywalker hoth. Tatooine jinn yoda solo boba yoda jade boba antilles. Binks dantooine solo jango. Skywalker maul vader binks lando. Kamino mandalore bespin darth jabba moff luke wampa. Binks jade antilles dagobah mothma. Solo owen owen tusken raider droid. Obi-wan fett c-3p0 lando jade sidious. Jinn boba solo darth lars jade. Jade fett ventress mustafar.</p>
                    <p>Lucas ipsum dolor sit amet fisto antilles leia calamari hoth darth ackbar naboo darth tatooine. Secura owen kenobi watto. Ackbar biggs mace kessel. Ewok fett darth moff baba. Padmé yoda moff luke. Skywalker qui-gon dooku jinn mothma biggs chewbacca wampa wookiee. Dantooine ponda sidious aayla utapau hutt yavin darth anakin. Calamari solo moff kit lars kashyyyk ackbar r2-d2 skywalker. Lando skywalker wampa kit. Darth antilles calrissian organa dagobah moff ahsoka. Tatooine boba wookiee grievous solo mon.</p>
                    <p>Calamari jinn jabba jar amidala calamari c-3p0 jade twi'lek. Utapau mon dantooine zabrak amidala vader. Organa wicket yavin biggs grievous tatooine owen hoth. Darth mace jinn coruscant antilles r2-d2. Jinn mon coruscant thrawn. Kessel kenobi ahsoka organa chewbacca tusken raider luke obi-wan. Ponda darth moff skywalker antilles. Sidious hutt skywalker skywalker amidala calamari ben. Moff hutt windu cade hutt dantooine han hutt fett. Lobot darth organa biggs padmé. Obi-wan mon darth organa sith antilles.</p>
                    <div class="locked-lerp-end"></div>
                </div>
            </div>
        </div>

Accessibility Considerations: 

To be added.

Usability Considerations: 

  • Relying on many scroll watching elements can lead to jank.
Contributed By: 
IIM

Comments

raiken2's photo

Somewhere on this page I think it should mention that you need the javascript to initialize the plugin – had to grab it off of one of the demo pages:

<script>
  WDN.initializePlugin('band_imagery');
</script>
s-mfairch4's photo

Thank you Becky. I added it to the introduction.