我想,当用户单击打开的弹出窗口中的图像时,内容将随着iframe中的url改变(不是关闭/打开,而是淡入淡出)

我有一个hs.transitions = ['expand','crossfade']的画廊。

下一步的工作将关闭旧的弹出窗口并打开一个新的窗口(并中断幻灯片放映),但是我想要相同的效果(淡入淡出),就像用户单击下一个图像一样。

hs.allowMultipleInstances = false;
hs.Expander.prototype.onImageClick = function()
{
    return hs.htmlExpand(null, { objectType: 'iframe', src: 'url' });
};

怎么做?

样本-http://jsfiddle.net/xCnfE/4/

===============>>#1 票数:1 已采纳

如果HTML弹出窗口不包含在图库中,则不能从图像淡入淡出到HTML弹出窗口。 相反,您可以创建一个普通的iframe,用jQuery覆盖图像,并且仅在单击图像( onImageClick )时显示此iframe。 请参阅http://jsfiddle.net/roadrash/B7sDG/

hs.Expander.prototype.onImageClick = function (sender) {
    $('<iframe src="'+this.custom.url+'" frameborder="0"></iframe>').css({
        position: 'absolute',
        top: '0',
        height: '100%',
        width: '100%',
        background: '#fff',
        zIndex: 20
    }).appendTo(sender.wrapper);
    return false;
};


url会在onclick使用hs.custom传递到iframe src

<a href="large-image.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions, {url: 'http://highslide.com/'})">
    <img src="thumbnail.jpg" alt="Caption Text" />
</a>

  ask by Jack translate from so

未解决问题?本站智能推荐: