New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Starting Reel without Javascript #193
Comments
…the boundary between code needed to run Reel instance and the typography and other stuff aimed to make the example pretty and readable when viewed as a web page is clearly marked. And `indicator` is the first to move below the line. #193
…el. Albeit Javascript viewer Reel you won't need to use Javascript at all to start Reel, just a `"reel"` class name and configuration as simple HTML data attributes of your original image (and use any HTML node as annotation). This change should allow even easier integration. #193
…ar of what sprite is Reel instance made of. (The automatic buildup of sprite filename with `suffix` when there's no `image` will remain functional.) #193
…k to definitions and URLs used link to the respective image (or a sample of a sequence) #193
… function is automatically called on DOM ready. For programmatic creation of Reel via the data configuration, you will currently need to make another scan yourself with `$.reel.scan()`. Automatic detection will be placed in the future. #193
…re picked up, have their data payload taken off and fed to `.reel()` as the usual options hash. #193
…e comma-separated values), which needs to be first made into an actual Array type #193
…OM). The node must carry `"reel-annotation"` class, has its own unique ID defined and must reference the Reel instance by its ID with the `data-for` attribute. Such annotations are then picked up, hi-jacked from their original position in the DOM and again their data are removed and serve as annotation definitions, much like the data on the image node does. #193
… have both the class and are not inside overlay #193
…lements in question are being returned by the function. #193
This feature fully working is already available in the gh-193-data-config branch along with improved examples. |
Works pretty well :) Why didn't I think of that earlier?! Elevated to development branch and ready for release. |
This is great! I've been thinking along the same lines regarding use of the data-attributes, but was going about intertwining the two my own way. Knowing this, will save me some headache in the future! |
Released today as part of v1.3.0 |
Traditionally Reel instance can be started in three-step process:
<img>
tag..reel()
) to connect these two and to configure the resulting Reel.Something like this:
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:<img>
tag configured for Reel.This way:
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.
The text was updated successfully, but these errors were encountered: