hs.htmlExpand对图像的打开弹出点击

我想，当打开弹出式上图像的用户点击，内容将URL中的iframe变化（没有关闭/打开，但交叉渐变）hs.htmlExpand对图像的打开弹出点击

我有一个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/

来源

2013-04-17 Jack

你不能从图像到HTML弹出交叉衰减如果HTML弹出是不是画廊的一部分。相反，您可以使用jQuery创建一个覆盖图像的常规iframe，并仅在单击图像时显示此iframe（onImageClick）。请参阅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>

来源

2013-04-27 13:12:03 RoadRash

hs.htmlExpand对图像的打开弹出点击

回答

相关问题