Skip to content

Commit

Permalink
panel no more needed ! .. id as rel .. id to identify the slider
Browse files Browse the repository at this point in the history 
no panel-class needed all childs are used !
id of given slider is used to identify this .. no more sliderCount
now slider in slider is possible !!!
  • Loading branch information
Austin Strange committed Feb 14, 2012
1 parent 84e0fae commit ce83d23
Showing 1 changed file with 56 additions and 86 deletions.
142 changes: 56 additions & 86 deletions js/magic-slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@
improvenments by Austin Strange
*/

var sliderCount = 1;

$.fn.magicSlider = function(settings) {

settings = $.extend({
Expand Down Expand Up @@ -44,68 +42,59 @@ $.fn.magicSlider = function(settings) {

return this.each(function(){

var slider = $(this);
var slider = $(this),
sliderID = slider.attr('id');

// If Headlineanimation wanted
if ( settings.changeSliderHeadline == true ){ var panelHeadlines = new Array(); };

// N E W .. no more need for panel-class
slider.children().each( function(index) {
$(this).addClass( sliderID + '_panel' );
if ( settings.changeSliderHeadline == true ){
if ( $(this).find(settings.panelTitleSelector).length > 0 ){
panelHeadlines[ index ] = $(this).find(settings.panelTitleSelector).html();
} else {
panelHeadlines[ index ] = index;
};
};
});

// If we need arrows
if (settings.dynamicArrows) {
slider.parent().addClass("arrows");
slider.before('<div class="magic-nav-left" id="magic-nav-left-' + sliderCount + '"><a href="#">' + settings.dynamicArrowLeftText + '</a></div>');
slider.after('<div class="magic-nav-right" id="magic-nav-right-' + sliderCount + '"><a href="#">' + settings.dynamicArrowRightText + '</a></div>');
slider.before('<div class="magic-nav-left" id="magic-nav-left-' + sliderID + '"><a href="#">' + settings.dynamicArrowLeftText + '</a></div>');
slider.after('<div class="magic-nav-right" id="magic-nav-right-' + sliderID + '"><a href="#">' + settings.dynamicArrowRightText + '</a></div>');
};

// Slider vars
var panelWidth = slider.find(".panel").width(),
panelCount = slider.find(".panel").size(),
var panelWidth = slider.find('.' + sliderID + '_panel').width(),
panelCount = slider.find('.' + sliderID + '_panel').size(),
navClicks = 0; // Used if autoSlideStopWhenClicked = true
last = false; // Used in carousel mode
clon = ''; // Used in carousel mode => 'first' / 'last'


// If Headlineanimation wanted
if ( settings.changeSliderHeadline == true ){ var panelHeadlines = new Array(); };


// Special vars depend on Slider-Type
if (settings.slideDirection == "horizontal"){
var panelContainerWidth = (settings.carousel) ? panelWidth*( panelCount+1 ) : panelWidth*panelCount
slider.css('height', 'auto');
slider.find('.panel').css('height', 'auto');
if ( settings.changeSliderHeadline == true ){
slider.find(".panel").each(function(index) {
if ( $(this).find(settings.panelTitleSelector).length > 0 ){
panelHeadlines[index] = $(this).find(settings.panelTitleSelector).html();
} else {
panelHeadlines[index] = index;
};
});
};
slider.find('.' + sliderID + '_panel').css('height', 'auto');
} else {
var panelHeight = slider.find(".panel").height();
var panelHeight = slider.find('.' + sliderID + '_panel').height();
var panelContainerWidth = panelWidth;
var panelContaineroffset = new Array();
var panelsHeights = new Array();
var daHeight = 0;
slider.find(".panel").each(function(index) {
if ( settings.changeSliderHeadline == true ){
if ( $(this).find(settings.panelTitleSelector).length > 0 ){
panelHeadlines[ index ] = $(this).find(settings.panelTitleSelector).html();
} else {
panelHeadlines[ index ] = index;
};
};
slider.find('.' + sliderID + '_panel').each(function(index) {
panelContaineroffset[ index ] = daHeight;
daHeight = daHeight + $(this).height();
panelsHeights[ index ] = $(this).height();
});
var panelContainerHeight = (settings.carousel) ? (daHeight + panelHeight) : daHeight
// $('.magic-slider').css('width', 'auto');
// $('.magic-slider .panel').css('width', 'auto');
// $('.magic-slider').css('height', 'auto');
// $('.magic-slider .panel').css('height', 'auto');
var panelContainerHeight = (settings.carousel) ? (daHeight + panelHeight) : daHeight;
var biggestPanel = Array_max( panelsHeights );
if (settings.autoHeight != true) {
daHeight = 0;
slider.find(".panel").each(function(index) {
slider.find('.' + sliderID + '_panel').each(function(index) {
panelContaineroffset[ index ] = daHeight;
daHeight = daHeight + biggestPanel;
panelsHeights[ index ] = biggestPanel;
Expand All @@ -115,14 +104,14 @@ $.fn.magicSlider = function(settings) {
};

// Surround the collection of panel divs with a container div (wide enough for all panels to be lined up end-to-end)
$('.panel', slider).wrapAll('<div class="panel-container"></div>');
$('.' + sliderID + '_panel', slider).wrapAll('<div class="' + sliderID + '_panel_container"></div>');
// Specify the width of the container div (wide enough for all panels to be lined up end-to-end)
$(".panel-container", slider).css({ width: panelContainerWidth });
if (settings.slideDirection != "horizontal") {
$(".panel-container", slider).css({ height: panelContainerHeight });
$('.' + sliderID + '_panel_container', slider).css({ width: panelWidth, height: panelContainerHeight });
} else {
$('.' + sliderID + '_panel_container', slider).css({ width: panelContainerWidth, height: panelHeight });
};


// Initial Panel Load
if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
var currentPanel = parseInt(location.hash.slice(1));
Expand All @@ -133,9 +122,8 @@ $.fn.magicSlider = function(settings) {
};
moveToPanel(currentPanel);


// Left-Nav = click
$("#magic-nav-left-" + sliderCount + " a").click(function(){
$("#magic-nav-left-" + sliderID + " a").click(function(){
navClicks++;
var navList = $(this).parents('div.magic-slider-wrapper').find('.magic-nav ul');
if (currentPanel == 1 && !settings.carousel) {
Expand All @@ -156,7 +144,7 @@ $.fn.magicSlider = function(settings) {
});

// Right-Nav = click
$('#magic-nav-right-' + sliderCount + ' a').click(function(){
$('#magic-nav-right-' + sliderID + ' a').click(function(){
navClicks++;
var navList = $(this).parents('div.magic-slider-wrapper').find('.magic-nav ul');
if (currentPanel == panelCount && !settings.carousel) {
Expand All @@ -176,11 +164,9 @@ $.fn.magicSlider = function(settings) {
return false;
});



// If we need a dynamic menu
if (settings.dynamicTabs) {
var dynamicTabs = '<div class="magic-nav" id="magic-nav-' + sliderCount + '"><ul></ul></div><div class="clearfix"></div>';
var dynamicTabs = '<div class="magic-nav" id="magic-nav-' + sliderID + '"><ul></ul></div><div class="clearfix"></div>';
switch (settings.dynamicTabsPosition) {
case "bottom":
slider.parent().append(dynamicTabs);
Expand All @@ -189,11 +175,10 @@ $.fn.magicSlider = function(settings) {
slider.parent().prepend(dynamicTabs);
break;
};
ul = $('#magic-nav-' + sliderCount + ' ul');
ul = $('#magic-nav-' + sliderID + ' ul');
var dynamicListWidth = 0;

// Create the nav items
$('.panel', slider).each(function(n) {
$('.' + sliderID + '_panel', slider).each(function(n) {
if ( $(this).find(settings.panelTitleSelector).length > 0 && settings.dynamicTabsContent == "title" ) {
ul.append('<li class="tab' + (n+1) + '"><a href="#' + (n+1) + '">' + $(this).find(settings.panelTitleSelector).text() + '</a></li>');
} else {
Expand All @@ -213,9 +198,8 @@ $.fn.magicSlider = function(settings) {
};
};


// If we need a tabbed nav
$('#magic-nav-' + sliderCount + ' a').each(function(z) {
$('#magic-nav-' + sliderID + ' a').each(function(z) {
// What happens when a nav link is clicked
$(this).bind("click", function() {
navClicks++;
Expand All @@ -226,11 +210,10 @@ $.fn.magicSlider = function(settings) {
});
});


// External triggers (anywhere on the page)
$(settings.externalTriggerSelector).each(function() {
// Make sure this only affects the targeted slider
if (sliderCount == parseInt($(this).attr("rel").slice(13))) {
if ( sliderID == $(this).attr("rel") ) {
$(this).bind("click", function() {
navClicks++;
targetPanel = parseInt($(this).attr("href").slice(1));
Expand All @@ -246,23 +229,20 @@ $.fn.magicSlider = function(settings) {
};
});



// Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking).
if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
$("#magic-nav-" + sliderCount + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
$("#magic-nav-" + sliderID + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
// If there's no cross-linking, check to see if we're supposed to load a panel other than Panel 1 initially...
} else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) {
$("#magic-nav-" + sliderCount + " a:eq(" + (settings.firstPanelToLoad - 1) + ")").addClass("current");
$("#magic-nav-" + sliderID + " a:eq(" + (settings.firstPanelToLoad - 1) + ")").addClass("current");
// Otherwise we must be loading Panel 1, so make the first tab the current one.
} else {
$("#magic-nav-" + sliderCount + " a:eq(0)").addClass("current");
$("#magic-nav-" + sliderID + " a:eq(0)").addClass("current");
};


// Set the height of the first panel
if (settings.autoHeight) {
panelHeight = $('.panel:eq(' + (currentPanel - 1) + ')', slider).height();
panelHeight = $('.' + sliderID + '_panel:eq(' + (currentPanel - 1) + ')', slider).height();
if (settings.slideDirection == "horizontal"){
slider.css({ height: panelHeight });
} else {
Expand All @@ -274,23 +254,20 @@ $.fn.magicSlider = function(settings) {
}
};


// Trigger autoSlide
if (settings.autoSlide) {
slider.ready(function() {
setTimeout(autoSlide,settings.autoSlideInterval);
});
};


function alterPanelHeight(x) {
if (settings.autoHeight) {
panelHeight = $('.panel:eq(' + x + ')', slider).height()
panelHeight = $('.' + sliderID + '_panel:eq(' + x + ')', slider).height()
slider.animate({ height: panelHeight }, settings.autoHeightEaseDuration, settings.autoHeightEaseFunction);
};
};


function autoSlide() {
if (navClicks == 0 || !settings.autoSlideStopWhenClicked) {
if (currentPanel == panelCount) {
Expand All @@ -306,14 +283,11 @@ $.fn.magicSlider = function(settings) {
};
};


function moveToPanel(targetPanelIndex) {
// Navigation
var navList = slider.parents('div.magic-slider-wrapper').find('.magic-nav ul');
var currentLink = navList.find('li:eq(' + (targetPanelIndex - 1) + ') a');
navList.find('a').removeClass('current');
currentLink.addClass('current');
// Panel itself
if ( last == true ) {
doTheDouble( clon )
last = false;
Expand All @@ -324,20 +298,20 @@ $.fn.magicSlider = function(settings) {
if ( settings.changeSliderHeadline == true ){
$(settings.sliderHeadlineSelector).html( panelHeadlines[ targetPanelIndex - 1 ] );
};
slider.find('div.panel-container div.panel').removeClass('current');
slider.find('div.panel-container div.panel:eq('+ (targetPanelIndex - 1) + ')').addClass('current');
slider.find('div.' + sliderID + '_panel_container div.' + sliderID + '_panel').removeClass('current');
slider.find('div.' + sliderID + '_panel_container div.' + sliderID + '_panel:eq('+ (targetPanelIndex - 1) + ')').addClass('current');
};


function doThePanelMove(targetPanelIndex) {
if (settings.slideDirection == "horizontal"){
$('.panel-container', slider).animate(
$('.' + sliderID + '_panel_container', slider).animate(
{ marginLeft: -1 * panelWidth*(targetPanelIndex -1) },
settings.slideEaseDuration,
settings.slideEaseFunction
);
} else {
$('.panel-container', slider).animate(
$('.' + sliderID + '_panel_container', slider).animate(
{ marginTop: -1 * panelContaineroffset[ targetPanelIndex -1 ] },
settings.slideEaseDuration,
settings.slideEaseFunction
Expand All @@ -348,54 +322,50 @@ $.fn.magicSlider = function(settings) {

function doTheDouble( clon ) {
if ( clon == 'last' ) {
slider.find('.panel:last-child').clone().addClass('duplicate').prependTo( slider.find('.panel-container') );
slider.find('.' + sliderID + '_panel:last-child').clone().addClass('duplicate').prependTo( slider.children('.' + sliderID + '_panel_container') );
if (settings.slideDirection == "horizontal") {
$('.panel-container', slider).css("marginLeft", -panelWidth );
$('.' + sliderID + '_panel_container', slider).css("marginLeft", -panelWidth );
} else {
$('.panel-container', slider).css("marginTop", -panelsHeights[ panelCount -1 ] );
$('.' + sliderID + '_panel_container', slider).css("marginTop", -panelsHeights[ panelCount -1 ] );
};
} else {
slider.find('.panel:first-child').clone().addClass('duplicate').appendTo( slider.find('.panel-container') );
slider.find('.' + sliderID + '_panel:first-child').clone().addClass('duplicate').appendTo( slider.children('.' + sliderID + '_panel_container') );
};
if (settings.slideDirection == "horizontal"){
$('.panel-container', slider).animate(
$('.' + sliderID + '_panel_container', slider).animate(
{ marginLeft: clon == 'last' ? 0 : -( panelWidth * panelCount ) },
settings.slideEaseDuration,
settings.slideEaseFunction,
function() {
last = false;
if (clon == 'last') {
$(this).css( "marginLeft", -(panelWidth*(panelCount-1)) ).find('.panel.duplicate').remove();
$(this).css( "marginLeft", -(panelWidth*(panelCount-1)) ).find('.' + sliderID + '_panel.duplicate').remove();
} else {
$(this).css( "marginLeft", 0 ).find('.panel.duplicate').remove();
$(this).css( "marginLeft", 0 ).find('.' + sliderID + '_panel.duplicate').remove();
}
}
);
} else {
$('.panel-container', slider).animate(
$('.' + sliderID + '_panel_container', slider).animate(
{ marginTop: clon == 'last' ? 0 : -1 * (panelContaineroffset[ panelCount -1 ] + panelsHeights[ panelCount -1 ]) },
settings.slideEaseDuration,
settings.slideEaseFunction,
function() {
last = false;
if (clon == 'last') {
$(this).css( "marginTop", -(panelContaineroffset[ panelCount -1 ]) ).find('.panel.duplicate').remove();
$(this).css( "marginTop", -(panelContaineroffset[ panelCount -1 ]) ).find('.' + sliderID + '_panel.duplicate').remove();
} else {
$(this).css( "marginTop", 0 ).find('.panel.duplicate').remove();
$(this).css( "marginTop", 0 ).find('.' + sliderID + '_panel.duplicate').remove();
}
}
);
};
};


// little Helper to find the biggest Pannel
function Array_max( array ){
return Math.max.apply( Math, array );
};


sliderCount++;

});
};

0 comments on commit ce83d23

Please sign in to comment.