lowersrc

Loren Ipsum for images

Wow! Creating fake-o images as wireframe placeholders for prototyping has never been so easy! Simply add some regular-ol' HTML image tags, and lowersrc will spring to work - dynamically creating images (based on your customisations) - leaving you to get on with your layout.

To get started, include the lowersrc script in your project, add an image or two with the "lowersrc" class, and Hey Presto! Images a-go-go. The default design is the ol' trusy rectangle-with-a-cross-through-it - but you can add text, change colours, change patterns - whatever works for your wireframe. Because they are rendered as regular HTML images, they can also be styled and targeted like regular images. They can be any size you need! 120 x 150, 80 x 80, 12 x 103... you name it!

Using lowersrc

Add a regular ol' image tag, and give it the "lowersrc" class. You can customise the output by setting attributes:

<img class="lowersrc" />
<img class="lowersrc" width="100" height="150" />
<img class="lowersrc" data-text="My Image" />
<img class="lowersrc" data-bg-col="#e8e2e8" />

Features

• Customise your images in a limited number of ways!
  • Background: data-bg="none|solid" data-bg-col="#f0f|{random}"
  • Border: data-border="none|solid" data-border-col="#f0f|{random}"
  • Foreground: data-fg="none|cross|circle" data-fg-col="#f0f|{random}"
  • Text: data-text="your text" data-text-col="#f0f|{random}" data-text-bg-col="#f0f|{random}"
  • Colours: can be any valid HTML colour, or the string "{random}" for a random colour
• Not a fan of px? Bust out some %s!: width="100%"
• Create some default settings for all images based on the setting of one image: Add data-default="true" to the "master" image.
• Copy another image settings: data-copy="image-id" (where the other image has id "image-id")...

It's just that simple!