Advanced XML usage

Just like with HTML markup, you can use XML to add layers, links, lightboxes and all the other elements that you could add with HTML code.

Layers

For each layer you will need to create a 'layer' node. The customization of the layers is similar to how it's done with HTML code. The differences are that you will use the 'style' attribute to specify the classes you want to assign to the layer, and instead of appending the 'data-' term to the name of the setting, you will only use the name. For example, you will use transition="right" instead of data-transition="right".

<slide>
    <image alt="image alt">../presentation-assets/images/slides/image1.jpg</image>
    <layer style="black" transition="left" offset="100" horizontal="center" vertical="top">First layer.</layer>
    <layer style="white static" horizontal="center" vertical="center">Second layer.</layer>
    <layer style="black rounded" transition="up" width="50%" horizontal="center" vertical="bottom">Third layer.</layer>
</slide>

You can see a list of all the available attributes here.

Links and lightboxes

Adding links and lightboxes is different from doing the same in HTML, but it's still very easy. Instead of wrapping the image tag/node inside an anchor, you will need to create a <link> node for the main slide link and a <thumbnailLink> node for the thumbnail. The URL of the link will need to be added inside this node. If you want to transform a link to a lightbox, you will need to add some extra attributes to the link node:

  • type="slider-lightbox" for indicating that the link is a lightbox
  • group="some_group" to create a lightbox gallery
  • title attribute for specifying the description of the lightbox

In order to specify a title for the lightbox, you will need to add the "alt" attribute to the <image> and/or <thumbnail> node.

<slide>
    <image alt="image alt">../presentation-assets/images/slides/image1.jpg</image>
    <link title="link title">http://yahoo.com</link>
    <thumbnail alt="Slide 1" title="tooltip content">../path/to/image1.jpg</thumbnail>
</slide>

<slide>
    <image>../presentation-assets/images/slides/image3.jpg< alt="Slide 3"/image>
    <link type="slider-lightbox" group="slides" title="some description">../path/to/image.jpg</link>
    <thumbnail alt="Slide 3" title="tooltip content">../path/to/image3.jpg</thumbnail>
</slide>

Lazy loaded images

When you want an image to be lazy loaded you will need to add the "data-image" attribute to the <slide> node instead of adding the path inside the node.

<slide data-image="../presentation-assets/images/slides/image5.jpg">
    <thumbnail>../presentation-assets/images/thumbnails/image5.jpg</thumbnail>
</slide>

<slide data-image="../presentation-assets/images/slides/image6.jpg">
    <thumbnail>../presentation-assets/images/thumbnails/image6.jpg</thumbnail>
</slide>

Captions

To add a caption for the main slide you need to create a <caption> node, and to create a caption for the thumbnail you need to add the "alt" attribute to the <thumbnail> node. You can also add a a tooltip to the thumbnail by using the "title" attribute.

<slide>
    <image alt="image alt">../presentation-assets/images/slides/image2.jpg</image>
    <thumbnail alt="Slide 2" title="tooltip content">../path/to/image2.jpg</thumbnail>
    <thumbnailLink title="thumbnail link title">http://yahoo.com</thumbnailLink>
    <caption>Some caption for the slide.</caption>
</slide>

Inline HTML content

The same rules for working with inline HTML content apply when you work with XML. If you skipped the "Using HTML" chapter, please take a look at the sections that show how to use inline HTML content and how to have the videos automatically handled.

You will need to use the <html> node to insert the inline HTML, and you will also need to add the content inside a CDATA tag.

<slide>
    <html>
        <![CDATA[
            <div class="images-box">
                <img src="../presentation-assets/images/other/image7.jpg" alt=""/>
                <img src="../presentation-assets/images/other/image8.jpg" alt=""/>
                <img src="../presentation-assets/images/other/image9.jpg" alt=""/>
                <img src="../presentation-assets/images/other/image10.jpg" alt=""/>
            </div>
            <div class="content-box">
                <p class="title">Inline HTML content</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                <a class="button" href="#">Read More</a>
            </div>
        ]]>
    </html>
</slide>
 
<slide>
    <html>
        <![CDATA[
            <video id="video-1" class="video video-js vjs-default-skin" controls="controls" preload="none" width="580" height="380" poster="../videos/sintel/sintel-poster.jpg" data-video="{}">
                <source src="../videos/sintel/sintel-trailer.mp4" type="video/mp4"/>
                <source src="../videos/sintel/sintel-trailer.ogv" type="video/ogg"/>
            </video>
        ]]>
    </html>
</slide>

<slide>
    <html>
        <![CDATA[
            <iframe class="video" src="http://www.youtube.com/embed/msIjWthwWwI?rel=0&enablejsapi=1&wmode=transparent" width="580" height="380" frameborder="0"></iframe>
]]>
    </html>
</slide>
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk