');
if ( $(this).hasClass('active') ) { $(list).addClass('active'); }
if ( index < $('#work li').length/2 ) {
(list).css('left', index*(thumbWidth+thumbMargin)+thumbOffsetX);
(list).css('top', 0+thumbOffsetY);
}
else {
(list).css('left', ((Math.round($('#work li').length/2)*2)-index-1)*(thumbWidth+thumbMargin)+thumbOffsetX);
(list).css('top', thumbHeight+thumbMargin+thumbOffsetY);
}
$('#map').append(list);
// Arbeitsproben zur Bühne hinzufügen und positionieren
var work = $(this).children('div').first();
$(work).children('img').first().addClass('active');
$(work).children('img:not(:first)').hide();
if ( index < $('#work li').length/2 ) {
(work).css('left', index*(stageWidth+stageMargin));
(work).css('top', 0);
}
else {
(work).css('left', ((Math.round($('#work li').length/2)*2)-index-1)*(stageWidth+stageMargin));
(work).css('top', stageHeight+stageMargin);
}
$('#stage').append(work);
// Bei Klick auf Navigationspunkt zur entsprechenden Arbeitsprobe navigieren
$(this).children('a').click( function() {
stageMove(index);
return false;
});
$('#map li').eq(index).children('a').first().click( function() {
stageMove(index);
return false;
});
});
// Markierungs-Rahmen an das Ende der Liste setzen und positionieren
if ( $('#work') ) {
var mapMarker = $('
');
(mapMarker).css('left', 0+thumbOffsetX-1);
(mapMarker).css('top', 0+thumbOffsetY-1);
$('#map').append(mapMarker)
}
// Wenn erste Arbeitsprobe mehr als ein Bild hat, Seitennavigation einblenden
if ( $('#work') ) {
var stage = $('#stage').children('div').first();
if (stage.children('img').length > 1) {
buildPagina(stage);
$('#pagina').fadeIn();
}
}
// Beschreibung der ersten Arbeitsprobe einblenden
var description = $('#work').children('li').eq(0).children('div').first().html() || '';
$('#description').html(description).fadeIn();
// Funktion um den Darstellungsbereich zur gewünschten Arbeitsprobe zu navigieren
function stageMove(index) {
// Parameter in Variablen definieren
var moveLeft = parseInt($('#stage div').eq(index).css('left'));
var moveTop = parseInt($('#stage div').eq(index).css('top'));
var thumbLeft = parseInt($('#map li').eq(index).css('left'))-1;
var thumbTop = parseInt($('#map li').eq(index).css('top'))-1;
var speed = 1500;
var effect = 'swing'; // Alternativer Effekt: 'easeOutBounce'
// Keine die gleiche Arbeitsprobe ausgewählt wurde, keine Bewegung durchführen
if ( (moveLeft == parseInt($('#stage').css('left'))*-1) && (moveTop == parseInt($('#stage').css('top'))*-1) ) {
return;
}
// Seitennavigation und Beschreibung ausblenden
$('#pagina').fadeOut();
$('#description').fadeOut();
// Darstellungsbereich und Markierungs-Rahmen zur gewünschten Arbeitsprobe bewegen
$('#map_marker').stop().animate({left: thumbLeft+'px', top: thumbTop+'px'}, speed, effect)
$('#stage').stop().animate({left: '-'+moveLeft+'px', top: '-'+moveTop+'px'}, speed, effect, function() {
// Aktiven Navigationspunkt hervorheben
$('#work li, #map li').removeClass('active');
$('#work li').eq(index).addClass('active');
$('#map li').eq(index).addClass('active');
// Wenn Arbeitsprobe mehr als ein Bild hat, Seitennavigation einblenden
var stage = $('#stage').children('div').eq(index);
if (stage.children('img').length > 1) {
buildPagina(stage);
$('#pagina').fadeIn();
}
// Wenn Arbeitsprobe eine Beschreibung hat, diese einblenden
var description = $('#work').children('li').eq(index).children('div').first().html() || '';
$('#description').html(description).fadeIn();
});
}
// Funktion zum Aufbauen der Seitennavigation
function buildPagina(stage) {
// Arbeitsprobe ermitteln und zum Element speichern
var index = $('#stage div').index(stage);
$('#pagina').data('index', index);
// Seitennavigation aufbauen
$('#pagina').html('');
stage.children('img').each( function(index) {
var list = $('
'+(index+1)+'');
if ( $(this).hasClass('active') ) { $(list).addClass('active'); }
$('#pagina').append(list);
});
// Klick-Event für Seitennavigation erstellen
$('#pagina li a').click( function() {
// Parameter in Variablen definieren
var delay = 400;
// Gespeicherte Arbeitsprobe und gewähltes Bild ermitteln
stage = $('#stage div').eq($('#pagina').data('index'));
var index = $('#pagina li a').index(this);
// Alle Bilder ausblenden und Klassen entsprechend setzen
$(stage).children('img').fadeOut(delay).removeClass('active');
$('#pagina li').removeClass('active');
// Gewähltes Bild einblenden und Klassen entsprechend setzen
setTimeout(function(){ $(stage).children('img').eq(index).fadeIn(delay).addClass('active'); }, delay);
$(this).parent('li').first().addClass('active');
// False zurückgeben, damit der Link nicht ausgeführt wird
return false;
});
}
// ==========================================================================
// Alternativer Horizontaler Scrollbalken
// ==========================================================================
// Alternativer Horizontaler Scrollbalken einfügen
$('.tinyscrollbar').tinyscrollbar({ sizethumb: 18, axis: 'x', size: '595' });
$('.tinyscrollbar-y').tinyscrollbar({ sizethumb: 18, axis: 'y', size: '465' });
$('.tinyscrollbar-reference').tinyscrollbar({ sizethumb: 18, axis: 'y', size: '335' });
// ==========================================================================
// Video über JQuery-Plugin jPlayer einbinden
// ==========================================================================
if ( $('#jp_video').length ) {
$('#jp_video').jPlayer({
ready: function () {
$(this).jPlayer('setMedia', {
m4v: $(this).data('flv'),
poster: $(this).data('poster')
}).jPlayer('play');
},
ended: function (event) {
window.history.back();
},
preload: 'auto',
solution: 'flash',
supplied: 'm4v',
backgroundColor: '#FFFFFF',
swfPath: '/scripts/jquery'
});
}
});