From add5f3352a34282ff192d3ad027c44c7da2e6670 Mon Sep 17 00:00:00 2001 From: Rob Garrison Date: Fri, 4 Mar 2016 10:21:23 -0600 Subject: [PATCH] Tweaks to pull #604 --- demos/css/page.css | 61 ++++++------ js/jquery.anythingslider.js | 3 +- js/jquery.anythingslider.video.js | 31 +++--- video.html | 156 +++++++++++++++--------------- 4 files changed, 124 insertions(+), 127 deletions(-) diff --git a/demos/css/page.css b/demos/css/page.css index ccc7a44..ad01b9d 100644 --- a/demos/css/page.css +++ b/demos/css/page.css @@ -42,7 +42,7 @@ ul li { font: 15px Georgia, Serif; margin: 0 0 8px 0; } #main #slider2 { width: 800px; height: 390px; list-style: none; } /* Set slider1 panel 5 stuff - adding padding directly to the panel will - shift panels after it, so we need a wrapper */ +shift panels after it, so we need a wrapper */ #main #slider1 .panel5 ul { width: 200px; margin: 0 5px; } /* Set slider2 panel sizes, Main & FX demo pages */ @@ -79,7 +79,7 @@ ul li { font: 15px Georgia, Serif; margin: 0 0 8px 0; } #cboxTitle { color: #000 !important; } /* Change metallic slider defaults to show thumbnails - - using #demo2 (page wrapper) to increase this CSS priority */ +using #demo2 (page wrapper) to increase this CSS priority */ #demo2 div.anythingControls { bottom: 25px; } #demo2 div.anythingSlider-metallic .thumbNav a { background-image: url(); height: 30px; width: 30px; border: #000 1px solid; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } #demo2 div.anythingSlider-metallic .thumbNav a span { visibility: visible; } @@ -111,10 +111,10 @@ ul li { font: 15px Georgia, Serif; margin: 0 0 8px 0; } #slider3 .caption-top, #slider3 .caption-right, #slider3 .caption-bottom, -#slider3 .caption-left { background: #000; color: #fff; padding: 10px; margin: 0; position: absolute; z-index: 10; opacity: .8; filter: alpha(opacity=80); } +#slider3 .caption-left { background: #000; color: #fff; padding: 10px; margin: 0; position: absolute; z-index: 10; opacity: .8; filter: alpha(opacity=80); } /* Top caption - padding is included in the width (480px here, 500px in the script), same for height */ -#slider3 .caption-top { left: 0; top: 0; width: 480px; height: 30px; } +#slider3 .caption-top { left: 0; top: 0; width: 480px; height: 30px; } /* Right caption - padding is included in the width (130px here, 150px in the script), same for height */ #slider3 .caption-right { right: 0; bottom: 0; width: 130px; height: 180px; } @@ -166,19 +166,18 @@ body#expand h3 { text-align: center; } .group { border: #000 1px solid; } /************************** -Updating Video -**************************/ - + Updating Video + **************************/ #updatingVideoDemo div#slider1, ul#slider1 div { - width: 300px; - height: 200px; - list-style: none; + width: 300px; + height: 200px; + list-style: none; } #updatingVideoDemo div#slider2, div#slider2 div { - width: 300px; - height: 200px; - list-style: none; + width: 300px; + height: 200px; + list-style: none; } #updatingVideoDemo .updatingVideoDemoInputs { @@ -192,29 +191,29 @@ Updating Video /****************** css3 demo page ******************/ -.animations { margin: 20px 20px 20px 5px; } -.ani { margin-top: 10px; } +.animations { margin: 20px 20px 20px 5px; } +.ani { margin-top: 10px; } /****************** tooltips (Jatt) ******************/ .tooltip { cursor: pointer; } #tooltip { - min-width: 100px; - color: #dddddd; - background: #444; - border: 1px solid #777; - padding: 8px; - display: none; - opacity: 0.9; - filter: alpha(opacity=90); - text-align: left; - border-radius: .5em; - -moz-border-radius: .5em; - -webkit-border-radius: .5em; - z-index: 1000; + min-width: 100px; + color: #dddddd; + background: #444; + border: 1px solid #777; + padding: 8px; + display: none; + opacity: 0.9; + filter: alpha(opacity=90); + text-align: left; + border-radius: .5em; + -moz-border-radius: .5em; + -webkit-border-radius: .5em; + z-index: 1000; } #tooltip .body { - display: block; - text-align: center; -} \ No newline at end of file + display: block; + text-align: center; +} diff --git a/js/jquery.anythingslider.js b/js/jquery.anythingslider.js index f5e8687..4ed774a 100644 --- a/js/jquery.anythingslider.js +++ b/js/jquery.anythingslider.js @@ -341,7 +341,8 @@ base.navWidths = base.$nav.find('li').map(function(){ return $(this).outerWidth(true) + Math.ceil(parseInt($(this).find('span').css('left'),10)/2 || 0); }).get(); - base.navLeft = base.currentPage; + // start navLeft at one so calling base.navWindow() will position the current page on the left + base.navLeft = 1; // add 25 pixels (old IE needs more than 5) to make sure the tabs don't wrap to the next line base.$nav.width( base.navWidth( 1, base.pages + 1 ) + 25 ); base.$controls.find('.anythingNavWindow') diff --git a/js/jquery.anythingslider.video.js b/js/jquery.anythingslider.video.js index 34c03e5..54f35a0 100644 --- a/js/jquery.anythingslider.video.js +++ b/js/jquery.anythingslider.video.js @@ -24,20 +24,17 @@ } // ,onVideoInitialized : function(base){} }; - return this.each(function(){ // make sure a AnythingSlider is attached - var video, tmp, service, sel, base = $(this).data('AnythingSlider'); + var video, tmp, service, sel, panel, + base = $(this).data('AnythingSlider'); if (!base) { return; } - //if anythingSliderVideo was initialized before, don't overwrite it + // if anythingSliderVideo was initialized before, don't overwrite it if(typeof base.video == 'undefined'){ video = base.video = {}; - // Next update, I may just force users to call the video extension instead of it auto-running on window load - // then they can change the video options in that call instead of the base defaults, and maybe prevent the - // videos being initialized twice on startup (once as a regular video and second time with the API string) video.options = $.extend({}, defaults, options); - + // check if SWFObject is loaded video.hasSwfo = (typeof(swfobject) !== 'undefined' && swfobject.hasOwnProperty('embedSWF') && typeof(swfobject.embedSWF) === 'function' && swfobject.hasFlashPlayerVersion('1')); video.list = {}; @@ -51,28 +48,28 @@ video = base.video; video.$items = base.$items.filter(':not(.cloned)'); } - + // find and save all known videos for (service in video.services) { /*jshint loopfunc:true */ if (typeof(service) === 'string') { sel = video.services[service].selector; video.$items.find(sel).each(function(){ tmp = $(this); - var pan = tmp.closest('.panel'); - if(pan.data('AnythingSliderVideoInitialized') != true){ + panel = tmp.closest('.panel'); + if (panel.data('AnythingSliderVideoInitialized') != true){ // save panel and video selector in the list tmp.attr('id', video.options.videoId + $.fn.anythingSliderVideo.videoIndex); video.list[$.fn.anythingSliderVideo.videoIndex] = { id : video.options.videoId + $.fn.anythingSliderVideo.videoIndex++, - panel : pan[0], + panel : panel[0], service : service, selector : sel, - status : -1, // YouTube uses -1 to mean the video is unstarted - isInitialized : false, //Mark as Initialized to prevent double initialisation on adding video to slider + status : -1, // YouTube uses -1 to mean the video is unstarted + isInitialized : false, // Mark as Initialized to prevent double initialisation on adding video to slider }; - //add indicator that this video was already initialized - pan.data('AnythingSliderVideoInitialized', true); + // add indicator that this video was already initialized + panel.data('AnythingSliderVideoInitialized', true); video.hasVid = true; if (sel.match('embed|object')) { video.hasEmbed = true; @@ -84,7 +81,7 @@ }); } } - + // Initialize each video, as needed $.each(video.list, function(i,s){ // s.id = ID, s.panel = slider panel (DOM), s.selector = 'jQuery selector' @@ -275,7 +272,7 @@ $.fn.anythingSliderVideo.services = { $vid.attr('src', function(i,r){ // initialze api and add wmode parameter return r + (vidsrc.match(/\?/g) ? '' : '?') + '&wmode=' + (base.video.options.wmode || base.options.addWmodeToObject) + - '&api=1&player_id=' + $vid[0].id; + '&api=1&player_id=' + $vid[0].id; }); }, cont : function(base, $vid, index){ diff --git a/video.html b/video.html index 2012468..9fdcacd 100644 --- a/video.html +++ b/video.html @@ -51,87 +51,87 @@ fs : 1 } }); - + //Update demo $("#slider1, #slider2").anythingSlider({ - expand: false, - resizeContents: false, - mode: "fade", - autoPlay: false, - delay: 5000, - infiniteSlides: false, - buildArrows : true, // If true, builds the forwards and backwards buttons - buildNavigation : false, // If true, builds a list of anchor links to link to each panel - buildStartStop : false, // If true, builds the start/stop button - resumeDelay : 2500, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds). - animationTime : 800, // How long the slideshow transition takes (in milliseconds) - }) //AnythingSlider + expand: false, + resizeContents: false, + mode: "fade", + autoPlay: false, + delay: 5000, + infiniteSlides: false, + buildArrows : true, // If true, builds the forwards and backwards buttons + buildNavigation : false, // If true, builds a list of anchor links to link to each panel + buildStartStop : false, // If true, builds the start/stop button + resumeDelay : 2500, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds). + animationTime : 800, // How long the slideshow transition takes (in milliseconds) + }) //AnythingSlider .anythingSliderVideo({ - // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex - videoId : 'asvideo', - // this option replaces the `addWmodeToObject` option in the main plugin - wmode : "opaque", - // auto load YouTube api script - youtubeAutoLoad : true, - // YouTube iframe parameters, for a full list see: - // https://developers.google.com/youtube/player_parameters#Parameters - youtubeParams : { - modestbranding : 1, - autohide : 1, - color: 'white', - fs: 0, - controls: 1, - showinfo: 0, - rel: 0, - wmode: 'opaque' // this is set by the wmode option above, so no need to include it here - } + // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex + videoId : 'asvideo', + // this option replaces the `addWmodeToObject` option in the main plugin + wmode : "opaque", + // auto load YouTube api script + youtubeAutoLoad : true, + // YouTube iframe parameters, for a full list see: + // https://developers.google.com/youtube/player_parameters#Parameters + youtubeParams : { + modestbranding : 1, + autohide : 1, + color: 'white', + fs: 0, + controls: 1, + showinfo: 0, + rel: 0, + wmode: 'opaque' // this is set by the wmode option above, so no need to include it here + } }); //add Video $(document).on('click', '#sliderOneAdd', function(){ - var html = '
'; - //append - $(html).appendTo('#slider1'); - //update - $('#slider1').anythingSlider().anythingSliderVideo(); - //alert - alert('Video added successfully!'); + var html = '
'; + //append + $(html).appendTo('#slider1'); + //update + $('#slider1').anythingSlider().anythingSliderVideo(); + //alert + alert('Video added successfully!'); }); //add Video $(document).on('click', '#sliderTwoAdd', function(){ - var html = '
'; - //append - $(html).appendTo('#slider2'); - //update - $('#slider2').anythingSlider().anythingSliderVideo(); - //alert - alert('Video added successfully!'); + var html = '
'; + //append + $(html).appendTo('#slider2'); + //update + $('#slider2').anythingSlider().anythingSliderVideo(); + //alert + alert('Video added successfully!'); }); //delete Video $(document).on('click', '#sliderOneRemove', function(){ - var api = $('#slider1').data('AnythingSlider'); - if(api){ - var page = api.$currentPage; - page.remove(); - //update - $('#slider1').anythingSlider().anythingSliderVideo(); - //alert - alert('Video removed!'); - } + var api = $('#slider1').data('AnythingSlider'); + if (api){ + var page = api.$currentPage; + page.remove(); + //update + $('#slider1').anythingSlider().anythingSliderVideo(); + //alert + alert('Video removed!'); + } }); //delete Video $(document).on('click', '#sliderTwoRemove', function(){ - var api = $('#slider2').data('AnythingSlider'); - if(api){ - var page = api.$currentPage; - page.remove(); - //update - $('#slider2').anythingSlider().anythingSliderVideo(); - //alert - alert('Video removed'); - } + var api = $('#slider2').data('AnythingSlider'); + if (api){ + var page = api.$currentPage; + page.remove(); + //update + $('#slider2').anythingSlider().anythingSliderVideo(); + //alert + alert('Video removed'); + } }); }); @@ -159,7 +159,7 @@