Question

我想，当用户点击打开的弹出框中的图片时，内容将在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/

Answer 1

如果HTML弹出窗口不是图库的一部分，则无法从图像交叉淡入淡出。相反，您可以使用jQuery创建覆盖图像的常规iframe，并仅在单击图像（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使用src中的hs.custom传递给iframe onclick：

<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>

hs.html展开图片点击打开弹出窗口

1 个答案: