diff --git a/agile_carousel.alpha.js b/agile_carousel.alpha.js index f421a88..727ff47 100644 --- a/agile_carousel.alpha.js +++ b/agile_carousel.alpha.js @@ -17,8 +17,8 @@ continuous_scrolling: false, transition_type: "slide", transition_time: 600, - number_slides_visible: 1, - change_on_hover: "", + number_slides_visible: 1, + change_on_hover: "", control_set_1: "", control_set_2: "", control_set_3: "", @@ -36,9 +36,11 @@ var ac_html = ""; var ac_content = ""; var ac_numbered_buttons = ""; + var ac_unnumbered_buttons = ""; var ac_group_numbered_buttons = ""; var ac_thumbnails = ""; var ac_content_buttons = ""; + var ac_content_panels = ""; var ac_pause = ""; var ac_previous_button = ""; var ac_next_button = ""; @@ -80,9 +82,11 @@ var content = ""; var obj_inner = ""; var content_button = ""; - var $this = ""; - var timer_data = ""; - var ac_timer = ""; + var content_panel = ""; + var content_link = ""; + var $this = ""; + var timer_data = ""; + var ac_timer = ""; // get the number of slides $.each(carousel_data, function (key, value) { @@ -181,6 +185,8 @@ content = obj_inner.content; var thumbnail_button = obj_inner.thumbnail_button; content_button = obj_inner.content_button; + content_panel = obj_inner.content_panel; + content_link = obj_inner.content_link; //////////////////////// @@ -212,11 +218,23 @@ ac_numbered_buttons += ""; } + //////////////////////// + // UnNumbered Buttons + //////////////////////// + if (i == 1) { + ac_unnumbered_buttons += "
"; + } + //////////////////////// // Thumbnails - //////////////////////// + //////////////////////// if (thumbnail_button) { if (i == 1) { @@ -245,6 +263,19 @@ } // if } + //////////////////////// + // Content Panel + //////////////////////// + if (content_panel) { + if (i === 1) { + ac_content_panels += ""; + } + } + i++; @@ -266,6 +297,11 @@ control_set_html += ac_numbered_buttons; } + // unnumbered_buttons + if (control_set_array[j] == "unnumbered_buttons") { + control_set_html += ac_unnumbered_buttons; + } + // group_numbered_buttons if (control_set_array[j] == "group_numbered_buttons") { control_set_html += ac_group_numbered_buttons; @@ -279,6 +315,10 @@ if (control_set_array[j] == "content_buttons") { control_set_html += ac_content_buttons; } + // content_panels + if (control_set_array[j] == "content_panels") { + control_set_html += ac_content_panels; + } // pause_button if (control_set_array[j] == "pause_button") { control_set_html += ac_pause; @@ -415,7 +455,7 @@ } } // if - + if (continuous_scrolling === false && number_slides_visible > 1) { // if first slide @@ -479,8 +519,11 @@ function add_selected_class(slide_num) { + obj.find(".content_panel.ac_selected").css('display','none'); obj.find(".ac_selected").removeClass("ac_selected"); obj.find(".slide_number_" + slide_num).addClass("ac_selected"); + obj.find(".content_panel_" + slide_num).addClass("ac_selected"); + obj.find(".content_panel_" + slide_num).css('display',''); } // prepare carousel for number_slides_visible = 1 @@ -705,8 +748,8 @@ }, { duration: transition_time }); - - } // if transition type is slide + + } // if transition type is slide ///////////////////////////////// @@ -754,7 +797,7 @@ - } // if transition type is slide + } // if transition type is slide } // if current slide is not the next slide } // if slide button is not disabled && transition complete @@ -762,18 +805,18 @@ add_selected_class(next_slide_number); } // transition_slides; - + - ///////////////////// - ///////// button behavior - //////////////////// - - + ///////////////////// + ///////// button behavior + //////////////////// + + var agile_carousel_buttons_click = obj.find(".ac_click"); var agile_carousel_buttons_hover = obj.find(".ac_hover"); - + // start timer if(timer !== 0){ ac_timer = setInterval(timer_transition, timer); @@ -784,73 +827,73 @@ function pause_slideshow() { if(pause_button.length > 0){ - pause_button.html("play"); - pause_button.data("options").paused = true; - pause_button.addClass("play_button"); - } + pause_button.html("play"); + pause_button.data("options").paused = true; + pause_button.addClass("play_button"); + } clearInterval(ac_timer); } // function - ///////////////// - //////// click button - //////////////// - - $(agile_carousel_buttons_click).click(function(){ - pause_slideshow(); - if(obj.find(':animated').length < 1){ - transition_slides($(this).data().options); - } else { - $this = $(this); - // don't use timer on next & previous buttons... causes strage, infinite cycle - if($this.data("options").button_action != "next" && $this.data("options").button_action != "previous") { - function check_transition(){ - - if(ac_slides_container.find(':animated').length < 1){ - transition_slides($this.data().options); - clearInterval($this.data("options").timeout); - } // if - } // function - - t = setInterval(check_transition,30); - - $this.data("options").timeout = t; - }// if - } // else - - }); // click - - - ///////////////// - //////// hover button - //////////////// - - $(agile_carousel_buttons_hover).hover(function() { - pause_slideshow(); - if(ac_slides_container.find(':animated').length < 1){ - transition_slides($(this).data().options); - - } else { - $this = $(this); - - function check_transition(){ - - if(ac_slides_container.find(':animated').length < 1){ - transition_slides($this.data().options); - clearInterval($this.data("options").timeout); - } // if - } // function - - t = setInterval(check_transition,30); - - $this.data("options").timeout = t; - - } // else - - }, function() { - $this = $(this); - clearInterval($this.data("options").timeout); - }); + ///////////////// + //////// click button + //////////////// + + $(agile_carousel_buttons_click).click(function(){ + pause_slideshow(); + if(obj.find(':animated').length < 1){ + transition_slides($(this).data().options); + } else { + $this = $(this); + // don't use timer on next & previous buttons... causes strage, infinite cycle + if($this.data("options").button_action != "next" && $this.data("options").button_action != "previous") { + function check_transition(){ + + if(ac_slides_container.find(':animated').length < 1){ + transition_slides($this.data().options); + clearInterval($this.data("options").timeout); + } // if + } // function + + t = setInterval(check_transition,30); + + $this.data("options").timeout = t; + }// if + } // else + + }); // click + + + ///////////////// + //////// hover button + //////////////// + + $(agile_carousel_buttons_hover).hover(function() { + pause_slideshow(); + if(ac_slides_container.find(':animated').length < 1){ + transition_slides($(this).data().options); + + } else { + $this = $(this); + + function check_transition(){ + + if(ac_slides_container.find(':animated').length < 1){ + transition_slides($this.data().options); + clearInterval($this.data("options").timeout); + } // if + } // function + + t = setInterval(check_transition,30); + + $this.data("options").timeout = t; + + } // else + + }, function() { + $this = $(this); + clearInterval($this.data("options").timeout); + }); //////////////////////////// @@ -860,14 +903,14 @@ //////////////////////////// - timer_data = { + timer_data = { "button_action": "next", "button_type": "pause", "disabled": false, "trigger_type": "ac_click" }; - + function timer_transition() { transition_slides(timer_data); } @@ -879,7 +922,7 @@ pause_button.html("pause"); pause_button.data("options").paused = false; pause_button.addClass("pause_button"); - pause_button.removeClass("play_button"); + pause_button.removeClass("play_button"); transition_slides(timer_data); ac_timer = setInterval(timer_transition, timer); return ac_timer; diff --git a/agile_carousel.css b/agile_carousel.css index 9f56120..b75406d 100644 --- a/agile_carousel.css +++ b/agile_carousel.css @@ -55,13 +55,13 @@ z-index: 4000; /*-- default styles for all button containers --*/ .agile_carousel .button_container { -z-index: 5000; +z-index: 5000; } /*-- default style for controls whose trigger type is "hover" --*/ .agile_carousel .ac_hover { -cursor:text; +cursor:text; } /*-- default style for controls which are currently selected @@ -195,7 +195,7 @@ margin-top: 28px; /*-- individual slides --*/ #multiple_slides_visible .slide_inner { -text-align: center; +text-align: center; } #multiple_slides_visible .slide_inner { overflow: hidden; @@ -285,7 +285,7 @@ background-image: url(../images/sprite_ac_hover.png); #multiple_slides_visible .control_set_1 .ac_disabled { background-image: url(../images/sprite_ac_disabled.png); } - + /*-- .control_set_2 - includes: group_numbered_buttons --*/ #multiple_slides_visible .control_set_2 { @@ -616,4 +616,99 @@ overflow: hidden; float: left; border: 1px solid #000; margin: 3px 3px 0 3px; +} + +/* -------------------------------------------- */ +/*-- #flavor_4 styles --*/ +/* -------------------------------------------- */ + +/*-- outer container --*/ + +#flavor_4 .agile_carousel { +overflow: hidden; +-moz-box-shadow: 0px 0px 4px #dfdfdf; /* FF3.5+ */ +-webkit-box-shadow: 0px 0px 0px #dfdfdf; /* Saf3.0+, Chrome */ +box-shadow: 0px 0px 4px #dfdfdf; /* Opera 10.5, IE9, Chrome 10+ */ +} + +#flavor_4 a:link,#flavor_4 a:visited{text-decoration:none;font-size:12px;font-family:Arial, Helvetica, sans-serif;outline:none;} +#flavor_4 a:active,#flavor_4 a:hover{text-decoration:none;outline:none;} + + +/*-- hide the captions --*/ +#flavor_4 .caption { +display: none; +} + +/*-- .control_set_1 - includes: content_panel --*/ + +#flavor_4 .control_set_1 { +left: 0px; +bottom: 0px; +width: 900px; +height: 350px; +float: left; +-webkit-border-radius: 5px; +-moz-border-radius: 5px; +border-radius: 5px; +opacity: 1; +} + +#flavor_4 .content_panel { +color: #FFF; +padding-top: 15px; +padding-left:75px; +padding-right:440px; +width: 385px; +height: 335px; +opacity:0; +line-height: 16px; +} + +#flavor_4 .content_panel_container { +width: 900px; +height: 350px; +} + +/*-- .control_set_2 - includes: unnumbered_buttons --*/ + +#flavor_4 .control_set_2 { +left: 2px; +bottom: 2px; +height: 12px; +float: left; +margin: 2px 2px 2px 2px; + +-webkit-border-radius: 5px; +-moz-border-radius: 5px; +border-radius: 5px; +padding: 2px 2px 2px 2px; +opacity: 1; +} + +#flavor_4 .unnumbered_buttons_container { +float: left; +margin-right: 0px; +margin-top: 1px; +} +#flavor_4 .unnumbered_button { +background: #FFF; +padding: 0 0px; +font-size: 12px; +margin-right: 2px; +background-position: -95px 0; +width: 10px; +height: 10px; +overflow: hidden; +text-indent: 1000px; +border-radius: 5px; +opacity:.4; +} +#flavor_4 .unnumbered_button:hover, #flavor_4 .unnumbered_buttons_container .ac_selected { +background:#FFF; +opacity:1; +} + +#flavor_4 .control_set_2 .slide_button { +float: left; } \ No newline at end of file diff --git a/sample.html b/sample.html new file mode 100644 index 0000000..fb14b81 --- /dev/null +++ b/sample.html @@ -0,0 +1,41 @@ + + + + +