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.