在mbBgndGallery jQuery插件中设置包含窗口的宽度和高度

时间:2015-10-03 19:24:47

标签: jquery jquery-plugins

        clear: false,

        buildGallery: function (options) {
            var opt = {};
            jQuery.extend(opt, jQuery.mbBgndGallery.defaults, options);
            opt.galleryID = new Date().getTime();
            var el = jQuery(opt.containment).get(0);
            el.opt = opt;
            jQuery.mbBgndGallery.el = el;
            if (el.opt.onStart)
                el.opt.onStart();

            el.opt.gallery = jQuery("<div/>").attr({ id: "bgndGallery_" + el.opt.galleryID }).addClass("mbBgndGallery");
            var pos = el.opt.containment == "body" ? "fixed" : "absolute";
            el.opt.gallery.css({
                position: pos,
                top: 0, left: 0,
                width: "100%",
                height: "85%",
                overflow: "hidden",
                "-webkit-transform-style": "flat",
                "-webkit-transform": "translateZ(0)"
            });

            var containment = el.opt.containment;


            if (containment != "body" && jQuery(containment).text().trim() != "") {
                var wrapper = jQuery("<div/>").css({ "position": "absolute", minHeight: "100%", minWidth: "100%", zIndex: 3 });
                jQuery(containment).wrapInner(wrapper);
                if (jQuery(containment).css("position") == "static")
                    jQuery(containment).css("position", "relative");
            }

            if (opt.raster) {
                var raster = jQuery("<div/>").css({ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", background: "url(" + opt.raster + ")", zIndex: 1 });
                opt.gallery.append(raster);
            }

            jQuery(containment).prepend(opt.gallery);

感谢您的帮助! 我的“mbBgndGallery”jQuery图像滑块工作正常。它设置为文档窗口的100%宽度和高度。但我需要100%宽度和80%高度。我对Javascript太新了,不能单独解决这个问题。再次感谢。

以下是该插件的链接:http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-bgndgallery/comment-page-6/#comments

这是init:

    sliderInit: function() {

        $('#carousel').height($(window).height());

        if($('#carousel').length) {
            $.mbBgndGallery.buildGallery({
                containment:"#carousel",
                timer:2000,
                effTimer:4000,
                controls:"#controls",
                //grayScale:false,
                //shuffle:false,
                //preserveWidth:false,
                effect:'zoom',

                images:[
                    "/images/home/slide-1a.jpg",
                    "/images/home/slide-2a.jpg",
                    "/images/home/slide-3a.jpg",
                    "/images/home/slide-5a.jpg",
                ]

            });
        }
    },

1 个答案:

答案 0 :(得分:0)

为什么不更改以下行,将轮播设置为100%高度:

$('#carousel').height($(window).height());

乘以0.8得到80%的高度,就像这样?

$('#carousel').height($(window).height() * 0.8);