liquid-src - Fluid links management
Managing a large collection of links can be a pain. What if your super-awesome
client keeps sending you new YouTube promos to show-off on their websites? Do
they actually expect you to sed
your way through each of their 150 HTML files?
What if there was a way to keep just a single copy of your URLs which can be
referenced from anywhere?
So that this:
<img src="https://www.google.co.uk/images/srpr/logo11w.png"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Looks like this:
<img data-src="google-logo" class="liquid-src"/>
<script data-src="jquery-ui" class="liquid-src"></script>
You create one single list of URLs with unique names for them, then you use those names in your HTML.
Getting Started
To start with, we create our list of named URLs:
$.data(document.body, 'liquid-src', {
"iframe": {
"gangnam-style": "http://www.youtube.com/embed/9bZkp7q19f0",
"higgs-boson-blues": "http://www.youtube.com/embed/1GWsdqCYvgw"
},
"img": {
"google-logo": "https://www.google.co.uk/images/srpr/logo11w.png"
},
"script": {
"jquery-ui": "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"
}
});
Let's call it links.js
. Now, we simply include the (extremely lightweight)
JavaScript library
and include it in your HTML files (note, requires jQuery), along with the list
of links we just made:
<script src="http://chriscummins.github.io/liquid-src/js/liquid-src-latest.min.js"></script>
<script src="js/links.js"></script>
Now, any time you want to use one of your links, simple add the liquid-src
class to the element, and instead of setting the src
attribute to point to a
URL, set a data-src
attribute to the name which you gave the link. For
example, to include the Google logo from the above example:
<img class="liquid-src" data-src="google-logo"/>
It works on any kind of tag with a src=
attribute!
<!-- Embedded YouTube videos -->
<iframe class="liquid-src" data-src="gangnam-style" width="420" height="315" frameborder="0" allowfullscreen></iframe>
<!-- JavaScript libraries -->
<script class="liquid-src" data-src="jquery-ui"/></script>
For further uses, see the examples section.
License
Fluid-src is licensed under the Apache License, Version 2.0. View the license file.
Copyright 2013 Chris Cummins.