Skip to content

Customizing jCoverflip's Titles

cmoody-newsig edited this page · 3 revisions

There are many Javascript coverflow widgets out there. But they all have the same issue of locking you into a single format for a coverflow. If they have any customization, it is changing the background color. This is so limiting, but not with jCoverflip. The following is the first post in a series of where we create a custom coverflow using jCoverflip.

We are going to start small by customizing the title. Out-of-the-box jCoverflip does its best to guess what the title should be. It searches searches for a title in several places with each coverflow item. The places and order it searches are:

  1. descendant element with a class of “title”
  2. the item element's title attribute
  3. the item element's alt attribute
  4. a descendant's title or alt attribute.

(Further down we will cover how to go beyond the jCoverflip default.)

Descendant element with a class of “title”

The first place jCoverflip searches for a title is for an element inside of the coverflow item with the class of “title”. For this example, the <li>s are the coverflow items and <p class=”title”>s will be used for the titles.

<ul id="flip">
  <li><span class="title">The first image</span><img src="1.png" /></li>
  <li><span class="title">A second image</span><img src="2.png" /></li>
  <li><span class="title">This is the description</span><img src="5.png" /></li>
  <li><span class="title">Another description</span><img src="4.png" /></li>
  <li><span class="title">A title for the image</span><img src="3.png" /></li>
</ul>

View demo

The item's title attribute

The second place is the title attribute for the item element. Similar to the previous example, except the title attribute on the coverflow items (<li>s) will be used for the titles.

<ul id="flip">
  <li title="The first image"><img src="1.png" /></li>
  <li title="A second image"><img src="2.png" /></li>
  <li title="This is the description"><img src="5.png" /></li>
  <li title="Another description"><img src="4.png" /></li>
  <li title="A title for the image"><img src="3.png" /></li>
</ul>

View demo

The item's alt attribute

The third place is the alt attribute for the item element. Whereas the title attribute can be used for pretty much any HTML element, the alt attribute is used for elements that require an alternative text version such as images or videos. In the example below, the <img>s are the coverflow items with their alt attributes used for the titles.

<p id="flip">
  <img alt="The first image" src="1.png" /></li>
  <img alt="A second image" src="2.png" /></li>
  <img alt="This is the description" src="5.png" /></li>
  <img alt="Another description" src="4.png" /></li>
  <img alt="A title for the image" src="3.png" /></li>
</p>

View demo

A descendant's title or alt attribute

The last place jCoverflip looks for a title is the descendants' title and alt attributes. Since there maybe more than one descendant with a title or alt attribute, the first one that is found will be used. In this example, the coverflow items (<li>s) have <img>s with alt and title attributes. For the first coverflow item, jCoverflip uses the alt attribute on the <img>; whereas, for the second item, jCoverflip uses the title attribute on the <img>.

<ul id="flip">
  <li>
    <img src="" alt="My title">
  </li>
  <li>
    <img src="" title="Another Title">
  </li>
</ul>

View demo

Custom titles

Perhaps the default way jCoverflip finds titles does not always match our needs. We are in luck, there is an option to control the way titles are created. When you create a jCoverflip widget (or any jQuery UI widget), you can pass in an options object. These options can control pretty much every customizable option for the widget. One of these options for jCoverflip is an option that controls how the titles are created. It is the “titles” option that takes an object with two functions to create the titles and destroy the titles.

$('#flip').jcoverflip({titles: { create: customTitleCreate, destroy: customTitleDestroy } });

The reason there is a destroy along with a create is because jQuery UI widgets can be turned off by calling the destroy method at anytime. The HTML element that became the widget will return to the same state before it was turned into a widget. To support this practice of jQuery UI, the custom titles needs a clean-up function.

We will do a simple example of having a title element with a class of “my-custom-title-class-name”. Our create function will find this element and then return a copy of it.

function customTitleCreate(itemElem) {
  var title = itemElem.find( '.my-custom-title-class-name').eq(0);
  var cloned = title.clone(); // copy the title
  cloned.data('origin_title', title); // keep a record of the original title for later
  title.hide(); // hide the original title element
  return cloned;
}

function customTitleDestroy( titleElem ) {
  titleElem.data('origin_title').show(); // show the original title
  titleElem.remove(); // delete the title element
}

$('#flip').jcoverflip({titles: { create: customTitleCreate, destroy: customTitleDestroy } });

The HTML code for it is:

<ul id="flip">
  <li>
    <img src="">
    <p class="my-custom-title-class-name">My title</p>
  </li>
  <li>
    <img src="">
  <p class="my-custom-title-class-name">Another Title</p>
  </li>
</ul>

View demo

We can do more with custom titles. We can synthesize titles – dynamically create custom titles. We have a list of images that link to a full size version. We want to create titles with the alt text from the image, a link to the full image and then tags that we added to the item's rel attribute.

function customTitleCreate(itemElem) {
  // 1. Create a new blank element to return
  var title = $('<div class="title"></div>')
  // 2. Add the alt attribute to the title
  .append(itemElem.find('img').attr('alt'))
  // 3. Add a link to view the full size image
  .append(' <a href="'+itemElem.attr('href')+'">(click here to view image)</a>')
  // 4. Add the tags from the rel attribute
  .append(' <span class="tags">'+itemElem.attr('rel')+'</span>');
  return title;
}

function customTitleDestroy( titleElem ) {
  titleElem.remove(); // delete the title element
}

$('#flip').jcoverflip({titles: { create: customTitleCreate, destroy: customTitleDestroy } });

The HTML code for is:

<p id="flip">  
  <a href="1.png" rel="tag tv"><img alt="The first image" src="1.png" /></a>
  <a href="2.png" rel="another-tag"><img alt="A second image" src="2.png" /></a>
  <a href="5.png" rel="photo murphy"><img alt="This is the description" src="5.png" /></a>
  <a href="4.png" rel="i-love-u"><img alt="Another description" src="4.png" /></a>
  <a href="3.png" rel="map"><img alt="A title for the image" src="3.png" /></a>
</p>

View demo

To recap, we can use jCoverflip's default search for titles—element with classname of “title”, the item's title attribute, the item's alt attribute and then the title or alt attribute of a descendant element. If this is not enough, then we can pass in a function with the options to create a custom title element.


Previous: Advanced Customization

Next: Questions and Answers

Something went wrong with that request. Please try again.