Image support

The plugin offers the different options for images.

Standard images

The attribute @class of body element controls general layout of the page. If the @class contains the value img-with-shadow, then all images will have a drop shadow by default.

           
<image keyref="img-dita" align="left" placement="break"/>


           
<image keyref="img-dita" align="center" placement="break"/>


           
<image keyref="img-dita" align="right" placement="break"/>


Floating image

                 
<p>
  <image keyref="img-dita" align="left" />
  Lorem ipsum dolor sit amet.
</p>     
      

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

         
<p>
  <image keyref="img-dita" align="right" />
  Lorem ipsum dolor sit amet.
</p>     
      

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

SVG support

The SVG is output a standard image.. This example use the jQuery Cycle under the license as an example.

           
<image keyref="img-dita-svg" align="right" />

Cycle

Please look at the image below for few seconds.

           
<sectiondiv outputclass="d4p-ui-cycle">
  <image keyref="img-dita-3" align="left"/>
  <image keyref="img-dita-2" align="left"/>
  <image keyref="img-dita" align="left"/>
</sectiondiv>