完全相同的脚本在网站上工作,它不适用于另一个

时间:2016-04-17 09:44:18

标签: javascript slider supersized

我想制作一个带有主页标题的滑块。我刚刚从一个网站中复制并粘贴了超大的脚本,其中滑块和标题看起来效果很好。

问题是: -Slider不会在页面加载时显示,当我调整窗口大小时会显示它。

*标题仅显示第一张,第二张和最后一张幻灯片。对于那些在第二个和最后一个之间的幻灯片,即使显示也没有显示标题。这个问题通过一个棘手的解决方案得以解决。

JS:

$(window).on('load', function () {

    //arrows
    $("#nextslide").click(function () {
        api.nextSlide();
    });
    $("#prevslide").click(function () {
        api.prevSlide();
    });
    //end arrows


    var get_img_src = [];
    if ($('#admin_supersized').find('img').length) {
        $("#admin_supersized div.photoGalleryElement div.thumbnail:last-child").addClass("last-child");

        var galleryData = $('#admin_supersized .photoGalleryElement .thumbContents a').map(function (ind, img) {
                return {
                    image : $(img).attr('src') || $(img).attr('href')
                }
            });

        $('#admin_supersized .photoGalleryElement .thumbContents a').each(function (i, v) {
            v = $(v);
            get_img_src.push({
                src : $(v).attr('src') || $(v).attr('href')
            });
        });

        var galArr = $.makeArray(galleryData);
        function slider(data) {
            $("#supersized").empty();
            $.supersized({
                slide_interval : 10000,
                transition_speed : 1000,
                performance : 0,
                horizontal_center : 1,
                vertical_center : 1,
                slide_links : 'empty',
                slides : data,
                transition : 6,
                image_protect : 0,
                //======================
                fit_always : 0
            });
            $('html').addClass('supersized_loaded');
        }
        slider(galArr);

        var li_itself = [];
        $('.rhs-banner li').each(function (i, e) {
            e = $(e);
            li_itself.push({
                li : $('a', e).attr('target'),
                li_s : $(e),
                li_a : $('a', e).html()
            });

        });

        var a_title = [];
        $('.rhs-banner #admin_supersized a').each(function (i, v) {
            v = $(v);
            a_title.push({
                title : $(v).attr('title')
            });

            if (typeof li_itself[i].li !== typeof undefined && li_itself[i].li !== false) {
                if (!$('body.editmode').length) {
                    $(li_itself[i].li_s).append('<div class="img_caption">' + a_title[i].title + '</div>');
                }
            } else {
                if (!$('body.editmode').length) {

                    $('#supersized').waitForImages({
                        finished : function () {
                            $('html').addClass('images_loaded');
                            var dum = $('#supersized').html();
                            //  console.log(dum);

                            var img_att = $('#supersized li.slide-2 a img').attr('style');
                            var img_src = $('#supersized li.slide-2 a img').attr('src');
                            //  console.log(img_att +''+ img_src );


                        },
                        each : function (i) {
                            //    console.log(i);
                        },
                        waitForAll : true
                    });

                    $('.supersized_loaded').onAvailable(function () {

                        $('html').addClass('img_attr_on');

                    });

                    $('.img_attr_on').onAvailable(function () {
                        //    if ( $(window).width > 1270 ) {
                        $(li_itself[i].li_s).append('<a target="_blank"><img class="top_0" img src=' + get_img_src[i].src + '></a>');
                        $(li_itself[i].li_s).append('<div class="img_caption">' + a_title[i].title + '</div>');
                        //    }

                    });

                }
            }

        });

    } else { //Default Image
        $.supersized({
            slide_interval : 10000,
            transition_speed : 800,
            performance : 0,
            horizontal_center : 1,
            vertical_center : 1,
            slide_links : 'empty',
            slides :
            [{
                    image : '/Templates/MainFolder/default-banner/default.jpg'
                },
            ]
        });
    }
});

$(window).on('load resize', function () {

    tier1Height();

    function tier1Height() {
        // Height Variables
        var windowHeight = $(window).height();
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            $("#section0, .tier-1").css('height', windowHeight);
        } else if (windowWidth == 768) {
            $("#section0, .tier-1").css('height', windowHeight - headerHeight - 221);
        } else if (windowWidth < 768 && windowWidth > 501) {
            $("#section0, .tier-1").css('height', '320px');
        } else if (windowWidth < 500) {
            $("#section0, .tier-1").css('height', '280px');
        }
    }

});

0 个答案:

没有答案