Durango Viewer
Example and Test Page
NOTE: This is a beta project so the tags used by it may and will change. However, if not used as a plugin the code can be dissected and pieces put into your own code. The code is not yet complete, clean, nor optimized for production. It is here to learn from. Though great care has been used in testing, I am not responsible for errors in the code at this time.
Durango Viewer turns pre-defined links to large images into previews and when followed displays the image in a lightbox. Eventually the hope is that it will create slideshows from WordPress galleries and auto responsive video and images.
Key Features:
- Responsive
- Accessible
- Gracefully degrade if NOSCRIPT
- Lightweight
- Loads images behind the scenes
The large "Preview" images are loaded in the background and do not hold up the page. If data attributes are used we can display an appropriate sized placeholder to prevent page jumping, load the right sized image, and only load the lightbox image when requested.
Previews and links are already implemented, galleries will come next once the current code is cleaned and implemented.
Image Light is not meant to be used in all image situations. It is best used when dealing with images that within context are generally viewed in larger formats outside the normal context of the page.
Example: Art Piece 1
Below is an example of a piece of art created by the world renouned artist Art I. St. Arthur. In the actual source of the page it is but a simple Anchor tag placed within a DIV, but JavaScript transforms it into a masterful preview that is responsive and accessible. Without JavaScript it remains a link, but still usable as a portal, linking directly to the image.
To show we don't overshadow any elements, here is some explanatory text. The image above was created by using the following static HTML code:
Example 2: Art Piece Titled "Level 1"
What is Level 1? It is a statement so bold and jarring that it must be made through art. The white text on the vibrant background gives the piece another level of dimension. It decorates it and calls out "Level 1! I am Level 1!" while just stating, quite minimalisticly, "Level 1"demonstrating Art I. St. Arthur's vision of his vision.
More text to show we aren't overshadowing by floats, z-index, or other misplaced styles and tags.
Example 3: Art Piece Titled "Level 1"
As a follow-up to Level 1 we enter the vision of Level 2. We are left to wonder is Art lifting us up to higher levels, or are the levels he's exposing us to sub-terranian? Perhaps we beleive we are being raised up when in fact we are finding ourselves burried under the dirt and slime of society which is often the case in Mr. St. Arthur's work. No one comes out unscathed. Also note the use of the font Comic Sans, as if Mr. St. Arthur is laughing at our assumptions.
Text after element.
Example 3b: Level 2, Constrained
Sometimes the world closes in around us and Art St. Arthur had his share of experiences of feeling crowded as he refused to sleep on top of beds, instead crawling below each night to ponder and let his artistic mind conjure up a world outside. A world outside he never saw as he shuttered all windows and became a recluse at the age of eight, remaining so until his death at age 96 during a night terror. Perhaps he was taken too soon, before he had enough time to ever experience the beauty of a world not so different than the one he visited and painted from his mind.
Example 4: The Wait
Mr. St. Arthur was facinated by movement, letting clocks and slow turning ceiling fans mesmorize him. He embraced his 900 baud modem and 300MHz computer well into the 21st century. He'd watch circles and dots gently rotate as he purposefully waited. This piece of art is purposefully demonstrating the passionate wait. Will it load? In fact, it won't, as it is a demonstration of what happens not only if an image is slow to load, but if it fails to load. However, the feeling of anticipation still consumes us, much like Pavlov's Dogs. However, we can only sit and wait for our treat.
And smaller:
Large again but with alt:
And smaller, with alt:
Text after element
Links to Images in Lightbox
We don't need to display images as previews, we can also just provide a link that displays the lightbox.
Here is Art I. St. Arthur's final masterpiece titled "Map" which he was found holding in his hands under his bed after the cold grip of death reached through his shuttered windows and took him. As if it were a premonition, it is a map which speaks strongly to where our spirit resides.
Here is a Map of where you are
Photo
