As a web designer and/or developer, we have run into the need for placeholder images on more then on occasion. A client may be developing the content, or perhaps a photo shoot is on the calendar. Maybe your client or the photographer are waiting on you to define that space where the image needs to go. In any of these cases, we usually end up turning to Photoshop (or your preferred image creating software) and create a dummy image. This takes time and is a pain in the butt. Well dummy image no more! Mr. Speaker has come out with a solution to this problem, that they call “lowersrc: Loren Ipsum for images“.
This script (download here) is very easy to use and is surprisingly customizable. This is basically how you use it:
1. Download JavaScript Script
2. Reference script in the head of your HTML document: <script type="text/javascript" scr="[path]/lowersrc.js">
3. Insert an image tag where you want the placeholder to show up in your code: <img class="lowersrc" />
4. Add other desired attributes, which are as follows: background (data-bg), border (data-border), foreground (data-fg), text (data-text), and color.
And that is all there is to it. Of course you would want to go back and remove the script as well as the class of “lowersrc” from all of your pages just before “going live”, but this is a very easy to use and valuable development tool. It is just one more thing to add to your bag of tricks. If you want more details about the script, visit the github documentation.
Tags: Web Design, Web Dev, Web Development
Splist for jQuery: I am very excited to announce my jQuery plug-in -