Javascript

Make sure to check setup on how to setup JS on your site

Smart Image Loader

Adding the class cd-smart-loader to the cd-screen element of your device, it will wait for the first element in the screen to finish loading and then fade it in. Note: only built for <img> loading for now, untested with <video> and <iframe>. It fades in at 250 milliseconds by default.

...
  <div class="cd-screen cd-smart-loader">
    <img src="img/source.png">
  </div>
...

Options:

You can specify the speed at which you want the element to fade in once it has loaded by adding the data-fade-in-speed property to the cd-screen element. Note: The value is the time in milliseconds. The example below fades the image in over the course of 5 seconds.

...
  <div class="cd-screen cd-smart-loader" data-fade-in-speed="5000">
    <img src="img/source.png">
  </div>
...

Automatic Slideshow

The automatic slideshow will fade between the elements of the device automatically if there are more than 1 elements in the cd-screen. Tip: You can fade between any elements as long as they are a child of the cd-screen. It waits on each page for 5 seconds and fades between them for 1 second by default.

...
  <div class="cd-screen">
    <img src="img/source.png">
    <img src="img/source1.png">
    <img src="img/source2.png">
    <div>This is text that is in the screen!</div>
  </div>
...

Options:

You can use a slider animation for your slideshow by giving the cd-screen element the class cd-transition-slider.

...
  <div class="cd-screen cd-transition-slider">
    <img src="img/source.png">
    <img src="img/source1.png">
    <img src="img/source2.png">
    <div>This is text that is in the screen!</div>
  </div>
...

You can control the speed at which you want the element to fade and how long to stay on each element using the data-transition-speed and data-pause-speed properties to the cd-screen element. Note: The value is the time in milliseconds.

...
  <div class="cd-screen" data-pause-speed="3400" data-transition-speed="750">
    <img src="img/source.png">
    <img src="img/source1.png">
    <img src="img/source2.png">
    <div>This is text that is in the screen!</div>
  </div>
...

If you have multiple elements in your screen and do NOT want them to automatically slideshow, you can add the class cd-no-slideshow to the cd-screen element.

Device Fill Parent Element

By adding the class cd-fill-parent to the top level element of your device, it will set the width of the element to the width of it's parent. This is GREAT for responsive websites. Hint: Add the cd-padded-device helper to this to keep a 20px margin around the device.

<div class="cd-iphone-6 cd-fill-parent">
  ...
</div>

Note! The device fades in when using this to eleviate a different sized device to flash on the screen before the JS runs. You can use the data-fade-in-speed property to adjust the 250 millisecond fade in.

Device Fade In

By adding the class cd-device-loader to the top level element of your device, it will fade in the device on page load. By default it fades in a 250 milliseconds.

<div class="cd-iphone-6 cd-device-loader">
  ...
</div>

Options:

You can use the data-fade-in-speed property to adjust the device fade in speed in milliseconds. The example fades the device in over the course of 2 seconds.

<div class="cd-iphone-6 cd-device-loader" data-fade-in-speed="2000">
  ...
</div>