mirror of
https://github.com/imsky/holder.git
synced 2026-04-21 03:01:19 -04:00
154 lines
4.1 KiB
HTML
154 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
|
|
<link href='http://fonts.googleapis.com/css?family=Pacifico|Handlee' rel='stylesheet' type='text/css'>
|
|
<style>
|
|
body {font-family:sans-serif}
|
|
.thumb {width:300px;height:250px;margin:25px;float:left}
|
|
.thumb img, .thumb .holderjs {display:block;margin:0 auto}
|
|
.thumb .caption {padding:10px;text-align:center;margin-top:10px}
|
|
.thumb.fullpage {float:none;clear:both;width:auto}
|
|
.autosize img {width:100%}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="thumb">
|
|
<img data-src="holder.js/300x200">
|
|
<div class="caption">
|
|
Plain placeholder
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<img data-src="holder.js/300x200/social">
|
|
<div class="caption">
|
|
Themed placeholder
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<img data-src="holder.js/300x200/lava/text:заполнитель">
|
|
<div class="caption">
|
|
Placeholder with text
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<img data-src="holder.js/300x200/sky/text:Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
|
|
<div class="caption">
|
|
Placeholder with lengthy text
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<img data-src="holder.js/200x150" src="image.jpg">
|
|
<div class="caption">
|
|
Placeholder with missing image source
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<img data-src="holder.js/80%x50%/vine">
|
|
<div class="caption">
|
|
Fluid placeholder
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<div class="autosize">
|
|
<img data-src="holder.js/200x100/#555:#aaa/auto">
|
|
</div>
|
|
<div class="caption">
|
|
Auto-sized placeholder
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<div class="autosize">
|
|
<img data-src="holder.js/200x100/auto/textmode:exact">
|
|
</div>
|
|
<div class="caption">
|
|
Auto-sized placeholder in exact mode
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<div class="holderjs" style="background:url(?holder.js/200x100/#ff0000:#ffffff);width:200px;height:100px">
|
|
</div>
|
|
<div class="caption">
|
|
<code><div></code> with background placeholder
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<!--
|
|
<div class="holderjs" style="background:url(?holder.js/100%x100%/#ff0000:#ffffff);width:200px;height:100px">
|
|
-->
|
|
</div>
|
|
<div class="caption">
|
|
<code><div></code> with fluid background placeholder
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<div id="thumb1">
|
|
</div>
|
|
<div class="caption">
|
|
Placeholder added through Holder API
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<img data-src="custom.holder/50x50/custom/auto" style="width:200px;height:200px">
|
|
<div class="caption">
|
|
Auto-sized <code>canvas</code> placeholder with custom domain and theme
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<img data-src="holder.js/300x200/font:Pacifico/text:Pacifico">
|
|
<div class="caption">
|
|
Placeholder using Pacifico font</span>
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<img data-src="fontawesome.holder/300x200/font:FontAwesome/text:">
|
|
<div class="caption">
|
|
Placeholder using FontAwesome font, rendering <span style="font-family:FontAwesome"></span>
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<img data-src="holder.js/100x20">
|
|
<img data-src="holder.js/200x50">
|
|
<img data-src="holder.js/300x100">
|
|
<div class="caption">
|
|
Placeholders demonstrating adaptive text size
|
|
</div>
|
|
</div>
|
|
<div class="fullpage thumb">
|
|
<img data-src="holder.js/80%x50%/industrial">
|
|
<div class="caption">
|
|
Full-page fluid placeholder
|
|
</div>
|
|
</div>
|
|
<div class="fullpage thumb">
|
|
<img data-src="holder.js/80%x50%/vine/textmode:literal">
|
|
<div class="caption">
|
|
Full-page fluid placeholder in literal mode
|
|
</div>
|
|
</div>
|
|
<div class="thumb">
|
|
<img data-src="holder.js/300x200">
|
|
<div class="caption">
|
|
Plain placeholder
|
|
</div>
|
|
</div>
|
|
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
<script src="../holder.js"></script>
|
|
<!--
|
|
<script src="require.js" data-main="test.js"></script>
|
|
-->
|
|
<script>
|
|
Holder.add_image("holder.js/250x120/sky", "#thumb1").run();
|
|
Holder.add_theme("custom", {foreground: "#fff", background: "#000", size: 15}).run({
|
|
domain: "custom.holder",
|
|
use_canvas: true
|
|
})
|
|
Holder.add_theme("fontawesome", {foreground: "#00ccaa", background: "#002211", size: 12}).run({
|
|
domain: "fontawesome.holder"
|
|
})
|
|
//Holder.run({use_canvas:true})
|
|
</script>
|
|
</body>
|
|
</html>
|