Question

这里第一次问问题。我确实在WordPress中将此脚本排入队列，但无法使其正常工作。脚本在

下面

/***********************************************
* Youtube Video Gallery script (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Requires: JQuery 1.5+
* Last modified: April 15th, 16 v1.2 to fix iOS devices not loading videos
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

var youtubeapidfd = $.Deferred()

function onYouTubeIframeAPIReady(){
    youtubeapidfd.resolve()
}

var ddyoutubeGallery = (function($){

    var youtubethumbnailsurl = 'http://img.youtube.com/vi/VIDEO-ID/default.jpg'
    var youtubescreenshotsurl = 'http://img.youtube.com/vi/VIDEO-ID/mqdefault.jpg'
    var idevice = /ipad|iphone|ipod/i.test(navigator.userAgent)

    function ddyoutubeGallery(setting){
        var thisinst = this
        this.$slider = $('#' + setting.sliderid)
        this.$videowrapper = this.$slider.find('.videoWrapper:eq(0)')
        this.$nav = this.$slider.find('.videoNav:eq(0)')
        this.totalvids = setting.playlist.length
        this.currentvid = setting.selected || 0
        this.$navbelt
        this.setting = setting
        var tempdiv = $('<div />').appendTo( this.$videowrapper ) // temporary DIV container to be replaced with Youtube IFRAME
      var tag = document.createElement('script')
      tag.src = "https://www.youtube.com/iframe_api"
      var firstScriptTag = document.getElementsByTagName('script')[0]
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
        youtubeapidfd.then(function(){
          thisinst.player = new YT.Player(tempdiv.get(0), {
                playerVars: {
                    controls: 1,
                    playlist: setting.playlist.join(',')
                },
            events: {
              'onReady': function(e){
                        thisinst.populatenav(setting.playlist)
                        if (setting.autoplay && !idevice){
                            thisinst.player.playVideoAt( thisinst.currentvid )
                        }
                    },
              'onStateChange': function(e){
                        if (setting.autoplay && e.data == 5 && !idevice){ // if auto play video and playlist is cued and not iOS devices. See https://developers.google.com/youtube/iframe_api_reference for e.data details 
                            thisinst.player.playVideoAt( thisinst.currentvid )
                        }
                        if (setting.autocycle && e.data == 0 && !idevice){ // if auto cycle && current video finished playing
                            var nextvid = (thisinst.currentvid < thisinst.totalvids-1)? thisinst.currentvid + 1 : 0
                            thisinst._scrolltothumb( nextvid )
                            thisinst.player.playVideoAt( nextvid )
                        }
                    }
            }
          })
        })
    }

    ddyoutubeGallery.prototype = {


        _scrolltothumb(index){
            var indexnum = parseInt(index)
            var selectedvid = (indexnum < 0)? 0 : (indexnum > this.totalvids-1)? this.totalvids-1 : indexnum
            var $imgs = this.$nav.find('img')
            var $targetimg = $imgs.eq(selectedvid)
            var rightpos = $targetimg.position().left
            if (selectedvid <= this.currentvid){ // if clicking on thumbnail to the left of current selected thumbnail
                var navwidth = this.$nav.width()
                var imgwidth = $targetimg.width()
                var imagemargin = parseInt($targetimg.css('marginRight')) + parseInt($targetimg.parent().css('marginRight')) 
                rightpos -= navwidth - imgwidth - imagemargin
            }
            this.$navbelt.animate({scrollLeft: rightpos}, 400)
            $imgs.eq(this.currentvid).removeClass('selected').end()
                .eq(selectedvid).addClass('selected')
            this.currentvid = selectedvid
        },

        populatenav(playlist){
            var thisinst = this
            var navhtml = '<ul>\n'
            for (var i=0; i<playlist.length; i++){
                navhtml += '<li><img src="' + youtubethumbnailsurl.replace('VIDEO-ID', playlist[i]) + '" data-videoindex="' + i +'"/></li>\n'
            }
            navhtml += '</ul>\n'
            this.$nav.empty().html( navhtml )
            this.$navbelt = this.$nav.find('ul:eq(0)')
            this.$nav.off('.selectvideos').on('click.selectvideos', function(e){
                if (e.target.tagName == 'IMG'){
                    var $target = $(e.target)
                    var selectedvid = parseInt($target.data('videoindex'))
                    thisinst._scrolltothumb( selectedvid )
                    if (typeof thisinst.player != "undefined"){
                        if (idevice){
                            thisinst.player.cueVideoById( thisinst.setting.playlist[ selectedvid ] )
                        }
                        else{
                            thisinst.player.playVideoAt( selectedvid )
                        }
                    }
                    this.currentvid = parseInt($target.data('videoindex'))
                }
            })
            this._scrolltothumb( this.currentvid )
        }
    }

    return ddyoutubeGallery

})(jQuery);

我也在我的页面上使用此代码snipet调用它：

<div id="videojukebox" class="ddvideoGallery">
<div class="videoWrapper"></div>
<div class="videoNav"></div>

并确实把这个snipet放入页脚：

        <script>
var myvideogallery = new ddyoutubeGallery({
sliderid: 'videojukebox',
selected: 0,
autoplay: 1,
autocycle: 1, 
playlist: [ 
    'SbQc_JLUH7k',
    'fzrfrXhE-w4',
    'ROipDjNYK4k',
    '8ZRLlyxvr6E',
    'wEKLEeY_WeQ',
    'O_yVo3YOfqQ',
    'piH5_aP0fY8'
]
})

我尝试用

包装jQuery代码

$( document ).ready(function() { });

但它不起作用。我确实将脚本排入队列，已经检查了页面源代码，脚本已添加到页脚中，我也尝试将其放在<head>标记内。

Guide了解如何使用该脚本。

任何帮助表示赞赏！

编辑：页面加载正常，但滑块（脚本用于轮播滑块）。当我检查页面源代码时，我可以看到html标签：

<div id="videojukebox" class="ddvideoGallery">
<div class="videoWrapper"></div>
<div class="videoNav"></div>

但据我所知，剧本不起作用。 JS consol只给出错误：

未定义ddyoutubeGallery

jQuery YouTube Carousel脚本无法使用Wordpress

0 个答案: