Showing Cinephoto in a Browser

Benjamin Chen

updated Oct. 11, 2016

Here is a sample cinephoto that you can download. It is a zip file containing a html file and all the images files needed for the cinephoto. Once downloaded and unzipped it, you can simply drag and drop the html file (Copeland-1.html) to a browser. You will be able to see this sample cinephoto.

The html file illustrates important features of the Cinephoto Player. It is listed below. We will explain the features used in this sample, so that you can make one of your own cinephoto. If you are new to html, there are many tutorials online. Here is one of them.

<!DOCTYPE html>
<html>
  <head>
    <title>Copeland, Rocky Mountain</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://resources.xozon.com/css/cinephoto.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://resources.xozon.com/js/cinephoto.js"></script>
  </head>

  <body bgcolor="black">
      ... ...
      <div class="cinephoto" interval="150">
        <!-- 1-2-3-4 -->
        <cineframe layer="layer0" src="ouzelFalls/copeland-1_4966.jpg"></cineframe>
        <cineframe opacity="20" src="ouzelFalls/copeland-1_4974.jpg"></cineframe>
        <cineframe>
          <layer1 opacity="40" src="ouzelFalls/copeland-1_4974.jpg"></layer1>
        </cineframe>
        <cineframe opacity="60" src="ouzelFalls/copeland-1_4974.jpg"></cineframe>
        <cineframe opacity="80" src="ouzelFalls/copeland-1_4974.jpg"></cineframe>
        <cineframe layer="layer0" src="ouzelFalls/copeland-1_4974.jpg"></cineframe>
        <cineframe opacity="20" src="ouzelFalls/copeland-1_4975.jpg"></cineframe>
        ... ...
        <cineframe opacity="80" src="ouzelFalls/copeland-1_4966.jpg"></cineframe>
      </div>
  </body>

Element div of class cinephoto signifies that here is a Cinephoto. Attribute interval specifies milliseconds between each frame. The default is 40, equivalent to 25 frames a second.

You probably have already noticed that your photos for a cinephoto are specified in cineframe tags, defining a frame like in video or movie. When a cineframe has only one photo, src attribute can be used to specify the photo, like in this example. When multiple photos are used to make up a cineframe, they are specified in child elements of cineframe. These child elements are layer0 through layer4. Two cineframes for copeland-1_4974.jpg with opacity of 20 and 40 are exactly the same except of course their opacity. They are two different ways to define a cineframe when there is only one photo involved. When there are more than one photo for a cineframe, the only format is the later one. Attribute src specifies the location of a photo. In this case it is a local file. As a matter of fact, src attribute specifies a URL. It can be an image on some web server also.

A cineframe has one and up to five layers, layer0 through layer4. When only one layer is used, layer can be specified by attribute layer as shown, or use a child element layer of cineframe as demonstrated. If layer is specified, default to layer1. As a new cineframe is played, all the layers above the current highest layers are cleared.

Attribute opacity specifies how much lower layers are showing through. When there is only one layer, and shorthand cineframe is used, opacity can be attribute of cineframe. The default for opacity is 100, meaning 100%. Only percentage of 5 increments are valid, i.e. 5%, 10% and etc.

To make these a tags special, you need to make them as child elements of a div element, whose class is set to cinephoto. That is almost all you need to do.

With this setup, the base image is displayed like a background, and the overlayed images are played one by one at 25 images per second. The default behavior for the display is looping over all the overlay images, in the order as listed. As you may noticed, the div with class cinephoto may have an attribute loopBackTo. This attribute specifies the image that you want to loop back to. In our case it is driving_0073.png.

How did the magic happen? Now let's direct your attention to the head element. It has

a stylesheet, cinephoto.css
a jquery library, jquery-1.10.2.js
a javascript file, cinephoto.js

They provide program support to display the cinephoto. A simple description of the programming function is as follows.

find cinephoto class divs
start loading each image as specified by a tag (children of the div).
display the base image
wait, until all images are loaded
start playing the overlay images at 25 images per second
when hiting the end, go back to the image specified by loopBackTo attribute; if not specified, go back to the first overlay image

This html file can be used as a template. You only need to replace the images with your own art work. Now you have your own cinephoto.

Happy cinephotoing!