将额外的HTML添加到颜色框构建以在图像上方显示横幅

时间:2011-05-18 17:05:12

标签: colorbox

今天发布了几次 - 回复没有太多运气 - 希望有人可以帮忙解决这个问题。我需要在彩盒上显示横幅广告(PPC)。耗尽我能想到的所有解决方案 - 我是jQuery的新手 - 我想知道我是否可以将HTML附加到自己的彩色盒中,这样横幅广告的空间就会位于图像本身之上,然后重新加载每个加载新图像的时间?

我的jQuery是标准的彩盒下载,我想我需要专注于这个领域

// Initialize ColorBox: store common calculations, preload the interface graphics, append the html.
// This preps colorbox for a speedy open when clicked, and lightens the burdon on the browser by only
// having to run once, instead of each time colorbox is opened.
publicMethod.init = function () {
    // Create & Append jQuery Objects
    $window = $(window);
    $box = $div().attr({id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''});
    $overlay = $div("Overlay", isIE6 ? 'position:absolute' : '').hide();

    $wrap = $div("Wrapper");
    $content = $div("Content").append(
        $loaded = $div("LoadedContent", 'width:0; height:0; overflow:hidden'),
        $loadingOverlay = $div("LoadingOverlay").add($div("LoadingGraphic")),
        $title = $div("Title"),
        $current = $div("Current"),
        $next = $div("Next"),
        $prev = $div("Previous"),
        $slideshow = $div("Slideshow").bind(event_open, slideshow),
        $close = $div("Close")
    );
    $wrap.append( // The 3x3 Grid that makes up ColorBox
        $div().append(
            $div("TopLeft"),
            $topBorder = $div("TopCenter"),
            $div("TopRight")
        ),
        $div(false, 'clear:left').append(
            $leftBorder = $div("MiddleLeft"),
            $content,
            $rightBorder = $div("MiddleRight")
        ),
        $div(false, 'clear:left').append(
            $div("BottomLeft"),
            $bottomBorder = $div("BottomCenter"),
            $div("BottomRight")
        )
    ).children().children().css({'float': 'left'});

    $loadingBay = $div(false, 'position:absolute; width:9999px; visibility:hidden; display:none');

    $('body').prepend($overlay, $box.append($wrap, $loadingBay));

    $content.children()
    .hover(function () {
        $(this).addClass('hover');
    }, function () {
        $(this).removeClass('hover');
    }).addClass('hover');

非常感谢任何帮助:)

1 个答案:

答案 0 :(得分:1)

我认为你可以在使用onComplete colorbox callback加载内容后简单地附上你的横幅:

$("#your-element-that-calls-colorbox").colorbox({        
    onComplete:function(){ 
        $("#your-banner").prependTo("#cboxLoadedContent");
        }
});

onComplete函数将在加载和上一步/下一步操作时触发:)