Camera.js api- continued | part 4

---

Apis, classes and HTML5 data- attributes - repost

TO MANIPULATE ALMOST EVERYTHING...

A SIMPLE SLIDE

This is the "simple anathomy" of a slide:

<div data-src="images/image_1.jpg"></div>

CAPTIONS

You can add a caption to the slide, just put a div with class "camera_caption" into the div above:

<div data-src="images/image_1.jpg">
 <div class="camera_caption">The text of your caption</div>
</div>

By adding one more class to the "camera_caption" div you can decide the effect of the caption. The possible classes are: "moveFromLeft", "moveFomRight", "moveFromTop", "moveFromBottom", "fadeIn", "fadeFromLeft", "fadeFromRight", "fadeFromTop", "fadeFromBottom"

HTML ELEMENTS

You can also put some HTML elements into your slides. These elements must be wrapped into a div with position:absolute and they can be included in the transition effect too:

<div data-src="images/image_1.jpg">
 <div class="fadeIn camera_effected">The text of your html element</div>
</div>

An HTML element can have a class "fadeIn": in this case it will be displayed with a fading effect. By adding the class "camera_effected" to the div, it will be included in the transition effect (but pay attention, this could make the transition slow).

VIDEOS

To include a video into your slideshow you must put an iframe into one of your slides:

<div data-src="images/image_1.jpg">
 <iframe src="http://player.vimeo.com/video/1084537" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

As you can see I set the width and the height of the iframe to 100%, so it changes its size according with the size of the slideshows (I mean the iframe, the video in the iframe will mantain its ratio).

The iframes can't be included in the transition effect, so you can use a screenshot of the iframe as image for your slide. By default they are displayed after the transition, but you can decide to display them only after clicking the image of the slide itself. Just add to the div (the slide) the attribute data-video="hide" (see below the data- attributes).

THE "DATA-" ATTRIBUTES

The URL of the image on the slide is added by using the HTML5 data- attribute. This allows to load the image only when the slideshow calls it and not (lazy load method).

By using the HTML5 data- attribute you can add many properties to your slide, that overwrite the general ones. For instance the URL of the thumbnails:

<div data-src="images/image_1.jpg" data-thumb="images/thumbs/image_1.jpg"></div>

or a particular alignment for one slide only:

<div data-src="images/image_1.jpg" data-alignment="topLeft"></div>

Here below you can see all the other "data-" possibilities

data-alignment

"topLeft", "topCenter", "topRight", "centerLeft", "center", "centerRight", "bottomLeft", "bottomCenter", "bottomRight"

data-easing

for the complete list http://jqueryui.com/demos/effect/easing.html

data-mobileEasing

the easing effect for mobile devices only

data-fx

"random","simpleFade", "curtainTopLeft", "curtainTopRight", "curtainBottomLeft", "curtainBottomRight", "curtainSliceLeft", "curtainSliceRight", "blindCurtainTopLeft", "blindCurtainTopRight", "blindCurtainBottomLeft", "blindCurtainBottomRight", "blindCurtainSliceBottom", "blindCurtainSliceTop", "stampede", "mosaic", "mosaicReverse", "mosaicRandom", "mosaicSpiral", "mosaicSpiralReverse", "topLeftBottomRight", "bottomRightTopLeft", "bottomLeftTopRight", "bottomLeftTopRight"

data-link

the URL where you go by clicking your slide

data-portrait

"true", "false". Select "true" if you don't want that your images are cropped

data-slideOn

"next", "prev", "random": decide if the transition effect will be applied to the current (prev) or the next slide

data-src

the URL of the image of the slide

data-target

"_blank", "_new", "_parent", "_self", "_top", the target values for the data-link attribute

data-thumb

the URL of the thumbnail of the slide (if the value of the 'thumbnail' option is true)

data-time

the milliseconds between the end of the sliding effect and the start of the nex one

data-transPeriod

the length of the sliding effect in milliseconds

data-video="hide"

"hide" is the unique possible value. If you use this data- attribute means you are using a video on your slideshow. The videos on Camera can be displayed only after the transition. By adding this data- attribute you must click the image to display the video, otherwise the video will be displayed automatically after the transition. More info are available on the demo pages