Testing the timeline

by blackjid

HTML

<div class="sliderGallery">
  <ul class="playlist-song-friends relative action-song-showhistory state-expanded items" title="">
    <li class="vux-playlist-song-friend relative data-tag action-searchbar-replace hasTooltip" title="Pelagio Pavez, hace más de un mes">
        <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs254.snc3/23126_1068970121_7263_q.jpg" width="35" height="35" class="vux-image-placeholder">
    </li>
    <li class="vux-playlist-song-friend relative data-tag action-searchbar-replace hasTooltip" title="">
        <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs338.snc4/41771_676989852_2790_q.jpg" width="35" height="35" class="vux-image-placeholder">
    </li>
    <li class="vux-playlist-song-friend relative data-tag action-searchbar-replace hasTooltip" title="">
        <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs322.snc4/41396_625033689_4689_q.jpg" width="35" height="35" class="vux-image-placeholder">
    </li>
    <li class="vux-playlist-song-friend relative data-tag action-searchbar-replace hasTooltip" title="">
        <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs327.snc4/41498_643901649_1501_q.jpg" width="35" height="35" class="vux-image-placeholder">
    </li>
</ul>
  <div class="slider">
    <!-- the handler to action the slide -->
    <div class="handle"></div>
    <!-- labels appear against the slider, as pointers to the user -->
    <span class="slider-lb1">slider label 1</span>
    <span class="slider-lb2">slider label 2</span>
    <span class="slider-lb3">slider label 3</span>
  </div>
</div>

CSS

/* ========================================================================
SONG ELEMENT
========================================================================*/
.vux-playlist-song{
    border-bottom: 1px solid #d9d9d9;
    padding:6px 0;
}
.vux-playlist-song:hover{
    background: #f1f1f1 /* COLOR PRESET XLIGHTGRAY*/
}
.vux-playlist-song.state-friends-expanded{
    top:0px;
    position:relative;
    background:#ccc;
    margin:-15px 0 -13px 0;
    border-width: 2px 0;
    border-style: solid;
    border-color: #aaa;
    z-index: 20;
}


/* Lock */
.vux-playlist-song-lock{
    margin-top: 9px;
}
.vux-playlist-song.state-withfriend .vux-playlist-song-lock{
    margin-top: 16px;
}
/* Friend */
.playlist-song-friends{
    height:40px;
}
.vux-playlist-song-friend{
    margin-top: 2px;
    margin:2px 5px 0 0;
}
.vux-playlist-song-friend .vux-image-placeholder{
    border: 1px solid #d9d9d9; /* COLOR PRESET XLIGHTGRAY*/
    background-color: white;
}
/* Friend Collapsed */
.playlist-song-friends.state-collapsed{
    width:42px;
}
.playlist-song-friends.state-collapsed:hover .vux-image-placeholder{
    border: 1px solid #d9d9d9; /* COLOR PRESET XLIGHTGRAY*/
    background-color: white;
    box-shadow:0 0 5px #232323;
    -moz-box-shadow:0 0 5px #232323;
    -webkit-box-shadow:0 0 5px #232323;
}
.playlist-song-friends.state-collapsed .vux-playlist-song-friend{
    position: absolute;
    left: 5px;
    top: 5px;
    -webkit-transition:-webkit-transform 0.3s ease-in;
    -webkit-transition:left 0.3s ease-in;
    -moz-transition:-moz-transform 0.3s ease-in;
    -moz-transition:left 0.3s ease-in;
}
.playlist-song-friends.state-collapsed .vux-playlist-song-friend:first-child{
    position: absolute;
    left: 0px;
    top: 0px;
}
.playlist-song-friends.state-collapsed:hover .vux-playlist-song-friend{
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    left:15px;
}
.playlist-song-friends.state-collapsed:hover .vux-playlist-song-friend:first-child{
  ...

JavaScript

$('div.sliderGallery').each(function () {
    var ul = $('ul', this);
    var productWidth = ul.innerWidth() - $(this).outerWidth();

    var slider = $('.slider', this).slider({ 
      handle: '.handle',
      minValue: 0, 
      maxValue: productWidth, 
      slide: function (ev, ui) {
        ul.css('left', '-' + ui.value + 'px');
      }, 
      stop: function (ev, ui) {
        ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
      }
    });
  });