Sideburn Settings

autoplay?
show initial animation?
nav
nav style
show total?
include show all?
number style

HTML

JSON

    • Hipster Ipsum

      Wayfarers tofu williamsburg thundercats, DIY +1 viral beard quinoa. Mcsweeney's DIY wes anderson lomo terry richardson, vice Austin artisan keffiyeh master cleanse letterpress echo park. Fixie scenester brunch carles irony portland. Beard skateboard before they sold out PBR, banksy lo-fi mixtape. Food truck stumptown four loko, scenester cliche photo booth freegan letterpress keytar leggings vice brooklyn wayfarers dreamcatcher etsy. Austin portland locavore, keffiyeh farm-to-table cardigan DIY organic fap. Brooklyn butcher PBR scenester jean shorts.

      Cliche 3 wolf moon echo park squid keffiyeh craft beer. Twee fanny pack keffiyeh, trust fund iphone PBR single-origin coffee artisan scenester mlkshk 8-bit vice dreamcatcher. Tofu photo booth yr, +1 quinoa wes anderson farm-to-table jean shorts cred whatever banh mi banksy organic. Butcher fap iphone +1 readymade artisan. Brooklyn gluten-free tattooed letterpress aesthetic, VHS quinoa shoreditch iphone cosby sweater etsy readymade single-origin coffee seitan. Tumblr irony etsy, fanny pack put a bird on it twee keffiyeh biodiesel master cleanse. Irony vegan messenger bag, williamsburg salvia aesthetic vice keytar.

    • Samuel L. Ipsum (lite)

      The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

      Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

    • Classic Lorem Ipsum

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan urna sit amet dui condimentum sollicitudin. Etiam et gravida eros. Sed non neque et odio molestie condimentum eget eget felis. Sed nibh massa, rhoncus ac porttitor et, facilisis iaculis sem. Vestibulum fringilla dapibus sapien nec euismod. Sed eu orci in elit rhoncus pellentesque nec eu dolor. Nullam ullamcorper dolor at metus suscipit nec consectetur risus sollicitudin. Ut laoreet luctus ullamcorper. Mauris vel libero non diam tristique euismod. Nulla tincidunt magna ut eros hendrerit ut blandit odio elementum. In hac habitasse platea dictumst. Nulla aliquam rhoncus mattis. Aenean vel quam in diam semper mollis nec in nisl. Aliquam ultrices, mi vitae aliquet gravida, mauris dui varius justo, vitae placerat quam arcu et libero.

      Praesent ornare augue id turpis venenatis venenatis. Sed at ipsum dui, sit amet blandit nisi. Sed odio eros, volutpat eget luctus ut, sodales non neque. Curabitur vitae magna consequat augue vulputate vestibulum in quis metus. Maecenas vitae tortor sit amet justo suscipit aliquet. Aliquam quis erat est. Nullam vitae lorem tristique quam pellentesque lacinia ac sollicitudin felis. Nam at metus in nisl pellentesque laoreet. Nam venenatis consectetur ipsum, vel viverra lacus convallis id. Aenean magna erat, adipiscing et placerat ut, venenatis sit amet felis. Donec posuere condimentum arcu ut placerat. Nunc felis diam, auctor eget auctor quis, semper a turpis. Praesent magna metus, gravida et blandit eget, tempor non metus.

      Integer in augue magna. Pellentesque pulvinar vehicula imperdiet. Morbi adipiscing, enim sed dictum aliquam, felis sapien lobortis metus, feugiat consectetur dolor nisl condimentum metus. Fusce a augue nisl. Vivamus condimentum malesuada facilisis. Sed sapien est, gravida ut dictum et, ullamcorper at urna. Etiam ut metus in eros placerat hendrerit. Donec tristique nunc quis erat accumsan hendrerit. Nullam bibendum dapibus dapibus. Nullam ultrices sollicitudin odio, non congue tortor iaculis a.

      Suspendisse sagittis eros eu felis mollis sagittis. Proin lacinia nibh eu nisl interdum feugiat interdum enim egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum consectetur turpis a eros varius sit amet mattis magna sollicitudin. Nullam turpis dui, lacinia at porta interdum, volutpat eget turpis. Nam convallis aliquet purus eget pretium. Donec lectus mi, laoreet eget mollis non, scelerisque sed felis. Donec tincidunt lacus a tellus bibendum vitae condimentum purus consectetur. Donec volutpat tempus massa, sed blandit orci feugiat vel. Sed sagittis viverra odio ut faucibus. In mattis dignissim lacus ac varius. Nullam eget mattis ipsum.

      Integer ultricies enim vel ante bibendum gravida. Nulla viverra interdum hendrerit. Vivamus vitae libero justo, a vehicula urna. Nullam tincidunt ipsum sed quam posuere molestie. Integer commodo tincidunt sapien at blandit. Vivamus leo tellus, consectetur molestie facilisis quis, commodo at nibh. Nam eu purus sed tortor euismod ornare. Donec tincidunt enim id ante pellentesque lobortis. Sed laoreet odio in arcu tincidunt sit amet ullamcorper odio varius.

Documentation

Sideburn receives all the settings from data attributes on the <ul> element. This allows different slideshows in the page to have different settings. It is also much more flexible than using CSS classes to handle configuration. A CMS can add the settings inline and then all you need for your slideshows to work is something like:

$(document).ready(function() {
    $('ul.sideburn').sideburn(); // see? no configuration required here
});

Sideburn has some special support to help responsive / fluid layouts: It preloads images and "hardcodes" the elements' width whenever the window resizes. This helps because typically the elements are absolutely positioned and images inside them will likely have max-width: 100%; and height: auto; set so that the browser can resize them to fit.

Resize your browser to see the demo adapt to the available width.

Settings

speed

Time the transition will take to complete in milliseconds. The default is 500.

transition

Name of the transition effect. Possible values are:

timeout

Time between automatic transitions in milliseconds. The default is 0 which means "autoplay" is disabled.

start

Zero-based index of the first element to show. This defaults to 0 - the first element. Alternatively you can add class="start" to the element you want to be first. (The demo uses that so that it doesn't jump back to the first one every time you change settings.)

showfirstrun

Sideburn always preloads images. If it had to preload images this will make it fade in the first one. With showfirstrun disabled it will just appear immediately without animating. The first run animation is different from the normal transition because there is no "previously shown" element to transition from. If it doesn't have to preload images (because the images are already cached) then it never enters the loading state in the first place. This defaults to false.

nav

A JSON object. To disable navigation this can be omitted entirely. It has the following keys:

position

This is either above or below.

style

next, jump or thumbnails. Next means the next/previous style nav, jump is for the numbered nav (it is easy to replace in CSS with dots) and thumbnails is for thumbnails that also jump straight to the image. Thumbnails only supports image-only content. The default is next.

navSeparator

Text content for the separator span tag when using next or jump style nav. It defaults to /. It should be easy to replace with an image in CSS.

nextText

The text button/link for the next element. For next style nav only. Defaults to Next.

previousText

The text button/link for the previous element. For next style nav only. Defaults to Previous.

showTotal

If this is true, then the current position and total (ie. 1 of 10) will be added to the nav. For next style nav only. Defaults to false.

totalSeparator

Text content for the separator span tag between the current and total numbers. This only applies when you have showTotal set to true. It defaults to of . It should be easy to replace with an image in CSS.

showAll

If this is true, then there will be a link/button in the next nav to toggle between showing all the items or just one. Defaults to false.

allText

The text button/link for entering show all. Defaults to Show all.

oneText

The text button/link for entering show one. Defaults to Show one.

numbering

For jump style nav only. Set to 1 if you want 1 2 3 .. 9 10 or 01 if you want 01 02 03 .. 09 10.

Methods

$('ul.sideburn').sideburn("destroy");

Remove the elements, data attributes and event handlers added by sideburn. Used by the demo before applying the new settings.

$('ul.sideburn').sideburn("refresh");

Sometimes it is necessary to tell sideburn to recalculate its dimensions. For example: If it was hidden when the window got resized it won't pick up the new dimensions unless you manually tell it to refresh. If your slideshows are always visible you wouldn't have to do this.

$('ul.sideburn').sideburn("next");

Move to the next item. (Same as clicking on the next link.)

$('ul.sideburn').sideburn("previous");

Move to the previous item. (Same as clicking on the previous link.)

$('ul.sideburn').sideburn("jump", "id");

Move to the item with the specified id. (Similar to clicking on jump nav.)

Get the code and more info at http://github.com/thisarmy/sideburn.