<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js"> <!--<![endif]-->
<head>
<title>The Aloha Editor Captioned Image Demo</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="The Aloha Editor Captioned Image Demo">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="../../css/aloha.css" type="text/css">
<style>#content { margin: 30px; }</style>
<script src="../../lib/vendor/jquery-1.7.2.js"></script>
<script src="../../lib/require.js"></script>
<script>
var Aloha = {
settings: {
jQuery: $,
toolbar: {
tabs: [{
label: 'Captioned Image',
showOn: { scope: '__hidden__' },
components: [
'imgAlignLeft',
'imgAlignRight',
'imgAlignCenter',
'imgAlignClear'
]
}]
},
plugins: {
captionedImage: {
/*
selector: 'img.aloha-captioned-image',
render: function (properties, callback, error) {
error({message: 'noop'});
},
defaultCSS: false,
captionedImageClass: 'aloha-captioned-image',
blockClass: 'mycms-captioned-image-block',
*/
}
}
}
};
</script>
<script src="../../lib/aloha.js"
data-aloha-plugins="common/ui,
common/format,
common/block,
common/align,
extra/captioned-image"></script>
</head>
<body>
<div id="content">
<img class="aloha-captioned-image"
src="http://www.aloha-editor.org/images/aloha-editor-logo.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
convallis nisl eu mi posuere et congue metus posuere. Etiam sodales
tristique urna, malesuada accumsan erat laoreet vel. Aliquam
tincidunt porttitor mi, faucibus molestie mauris vestibulum ac.
Fusce sollicitudin, nibh nec iaculis egestas, ligula tellus iaculis
augue, quis faucibus nisl libero ac nulla. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Nunc pulvinar luctus eros, ut laoreet enim aliquam vel.
</p>
<img src="http://www.aloha-editor.org/logo/Aloha%20Editor%20HTML5%20sticker%20transparent%20256.png"
alt="Sample alt text"
data-caption="Short caption."
class="aloha-captioned-image" />
<p>
Vestibulum molestie velit volutpat magna molestie non condimentum
metus tincidunt. Curabitur imperdiet lacus eget est hendrerit in
aliquam elit hendrerit. Nullam porttitor urna ac ante volutpat
feugiat semper quam volutpat. Donec auctor odio ut dui lobortis
euismod imperdiet purus pellentesque. Quisque lacinia sem ac lacus
commodo eu congue nisl porttitor. Aenean et velit quis urna
porttitor dignissim consequat eu lectus. Nam interdum elit a lacus
blandit porttitor. Integer id libero sed lectus tempus pulvinar ac
sit amet lacus. Curabitur lobortis magna a est ultrices sagittis
non eget nibh. In lobortis arcu odio.
</p>
<img src="http://www.aloha-editor.org/images/aloha-editor-logo.png"
data-caption="Praesent commodo molestie adipiscing. Mauris
lorem justo, tincidunt eget iaculis et, fermentum nec odio."
class="aloha-captioned-image" />
<p>
Praesent commodo molestie adipiscing. Mauris lorem justo, tincidunt eget iaculis et, fermentum nec odio. Ut pulvinar tristique quam, ut congue diam accumsan eleifend. Nulla sagittis tincidunt lacus, sit amet condimentum nibh ornare quis. Nulla ac nibh eu nunc rhoncus consectetur nec et velit. Cras nec dolor non felis placerat lobortis ut vitae ante. Curabitur at lectus non sem ultricies dictum.
</p>
<p>
Vivamus eu tellus id elit sollicitudin varius. Donec suscipit, risus eget vehicula eleifend, turpis felis hendrerit quam, eget tincidunt orci massa non lacus. Morbi commodo vestibulum fermentum. Pellentesque ut urna in nisi suscipit posuere. Vivamus at erat vitae nisl mollis luctus vel sit amet eros. Proin sodales adipiscing velit, id ultricies magna egestas ut. Aenean et eros magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id elit at neque dictum aliquam. Nunc adipiscing, risus vel eleifend luctus, ligula libero blandit diam, at vehicula odio nibh eu elit.
</p>
<p>
Nulla sit amet turpis mauris, quis tincidunt quam. Sed vestibulum consequat ligula, sed ullamcorper ipsum placerat eget. Morbi ut magna luctus justo gravida rutrum id ac odio. Maecenas et ipsum dolor, ullamcorper pretium lacus. Pellentesque et tellus velit, in luctus massa. Nulla facilisi. Ut convallis pellentesque elit in egestas.
</p>
<p>
Curabitur semper ultricies eros sit amet egestas. Donec pellentesque tincidunt arcu vel facilisis. Curabitur vitae purus odio, ac pulvinar massa. Phasellus malesuada congue volutpat. Maecenas elit nibh, mattis fringilla viverra nec, pretium dapibus lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dui velit, ullamcorper ac tincidunt non, dapibus ornare diam. Etiam mattis adipiscing turpis, sed interdum turpis tincidunt eget. Proin sodales, ante sit amet porta vehicula, est mauris porttitor neque, ut mollis eros risus feugiat urna. In fringilla dui ut mauris lobortis vulputate. Integer gravida, turpis ut viverra dictum, nulla turpis lobortis quam, eu vehicula sapien est ac tortor. Maecenas congue pretium vehicula. Phasellus vel quam sit amet elit lacinia vehicula in elementum purus. Phasellus tempor mauris eu felis tristique blandit. Curabitur egestas mi a leo sollicitudin tristique. Praesent imperdiet turpis quam, bibendum suscipit turpis.
</p>
</div>
<script type="text/javascript">
Aloha.ready( function(){
Aloha.jQuery('#content').aloha();
});
</script>
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->
</body>
</html>