mirror of
https://github.com/fergalmoran/dss.git
synced 2025-12-30 21:49:22 +00:00
110 lines
3.5 KiB
HTML
110 lines
3.5 KiB
HTML
<script type="text/javascript">
|
|
function initSlider() {
|
|
// contentSlider by: roXon
|
|
//########### SET SLIDER SPEED HERE!
|
|
|
|
var slideSpeed = 1300;
|
|
|
|
//#################################
|
|
|
|
|
|
// STRETCH SLIDER width:
|
|
var boxCount = $('.box').length; // count num of boxes
|
|
var boxW = $('#content_slider').width(); // count Cslider width
|
|
$('#slider').width(boxCount * boxW); // set #slider total width
|
|
//#
|
|
|
|
//Add style to first li 'button'
|
|
$('#nav li:eq(0)').addClass('btnActive');
|
|
//#
|
|
|
|
// AUTO GENERATE a custom-numerated ID to each button 'li' and .box
|
|
var liNum = 0;
|
|
$('#nav li').attr('id', function () {
|
|
liNum++;
|
|
return 'nav-' + liNum;
|
|
});
|
|
var boxNum = 0;
|
|
$('.box').attr('id', function () {
|
|
boxNum++;
|
|
return 'box-' + boxNum;
|
|
});
|
|
//#
|
|
|
|
// FANCY 'on animation' BOX STYLE (pt.1/3)
|
|
$(".box").not(':eq(0)').fadeTo(0, 0.7); // on page load fade to 0.8 all boxes EXCEPT the first one.
|
|
//#
|
|
|
|
|
|
// ADJUST HEIGHT after scroll
|
|
var initHeight = $('#box-1').height() + 50;
|
|
$('#content_slider').animate({height:initHeight }, 0);
|
|
|
|
function adjustHeight() {
|
|
var id = $('.btnActive').attr('id');
|
|
var xn = id.substring(id.indexOf("-", 0) + 1);
|
|
var boxN = $("#box-" + xn);
|
|
var adj = $("#box-" + xn).height() + 50;
|
|
$('#content_slider').delay(slideSpeed / 2).animate({height:adj }, slideSpeed / 2);
|
|
}
|
|
|
|
//#
|
|
|
|
|
|
// SLIDE!
|
|
function slide() {
|
|
var id = $('.btnActive').attr('id');
|
|
var xn = id.substring(id.indexOf("-", 0) + 1);
|
|
var boxN = $("#box-" + xn);
|
|
var boxOffset = boxN.offset().left;
|
|
var sliderOffset = $("#slider").offset().left;
|
|
$('#slider').animate({left:(sliderOffset - boxOffset) + 'px'}, slideSpeed, function () {
|
|
// FANCY 'on animation' BOX STYLE (pt.2/3)
|
|
$('.box').fadeTo(0, 0.7);
|
|
$("#box-" + xn).fadeTo(300, 1);
|
|
//#
|
|
});
|
|
|
|
adjustHeight();
|
|
}
|
|
|
|
//$
|
|
|
|
|
|
// TITLE ANIMATIONS
|
|
function showTitle() {
|
|
//get position
|
|
var p = $('.btnActive');
|
|
var offset = p.offset();
|
|
//set position of element (and adjust)
|
|
$("#csTitle").offset({left:(offset.left - 40)});
|
|
//#
|
|
var navTitle = $('.btnActive').text();
|
|
$('#csTitle').html('<h1>' + navTitle + '</h1>').animate({height:'0px', top:'12px'}, 0, function () {
|
|
$(this).animate({height:'45px', top:'-35px'}, 1300);
|
|
});
|
|
$('.btnActive').fadeTo(1300, 0);
|
|
}
|
|
|
|
showTitle(); // for dom load
|
|
//#
|
|
|
|
|
|
// CLICK EVENT
|
|
$('#nav li:not(.btnActive)').live('click', function () {
|
|
$('#nav li').removeClass('btnActive');
|
|
$(this).addClass('btnActive');
|
|
// FANCY 'on animation' BOX STYLE (nav) (pt.3/3)
|
|
$('#nav li').not('.btnActive').stop().fadeTo(100, 0.5).delay(400).fadeTo(1400, 1);
|
|
//#
|
|
|
|
slide(); // !! SLIDE FUNCTION CALLED !!
|
|
showTitle();
|
|
});
|
|
//#
|
|
}
|
|
</script>
|
|
<div id="release-audio-sample-area">
|
|
<ul id="release-audio-slide-nav" class="selector-button">
|
|
</ul>
|
|
</div> |