Starting Reel without Javascript

[pisi]

Traditionally Reel instance can be started in three-step process:

1. Link the external jquery.reel.js Javascript file.
2. Have an <img> tag.
3. Execute a Javascript command (call .reel()) to connect these two and to configure the resulting Reel.

Something like this:

<img src="some/image.jpg" width="300" height="200" id="my_reel_image">
<script>
  $('#my_image').reel({
    image: "some/image-reel.jpg",
    frames: 24
  });
</script>

Problem is, that people often indicate struggles with step 3, with the need to use the Javascript. Most significant source of these troubles are security-motivated restrictions on using <script> tag or user scripting in general where HTML is otherwise allowed on blog engines, forums, CMSs, e-commerce etc.

Let's simplify! This brand new feature allows to define the Reel directly on the <img> tag itself by using HTML data attributes. Without a single line of Javascript! This will eliminate the need for step 3 completely, leaving us with a much streamlined two-step process:

1. Link the external jquery.reel.js Javascript file.
2. Have an <img> tag configured for Reel.

This way:

<img src="some/image.jpg" width="300" height="200" id="my_reel_image"
  class="reel"
  data-image="some/image-reel.jpg"
  data-frames="24">

When such an <img> tag is found in your HTML, Reel will automatically convert all such to Reels on DOM ready. When you add such an tag by Javascript afterwards, call $.reel.scan() to re-scan.

Note, that this feature does NOT remove the means of Javascript initialization or manipulation - the old way. All facilities remain in place without any change and all traditional techniques still work. To complement them this adds an alternative non-Javascript technique - the new way.

[pisi]

This feature fully working is already available in the gh-193-data-config branch along with improved examples.