[英]hs.htmlExpand to the open popup on image click
I would like, when the user click on image in the open popup, the content will changed with url in iframe (not close/open, but crossfade) 我想,当用户单击打开的弹出窗口中的图像时,内容将随着iframe中的url改变(不是关闭/打开,而是淡入淡出)
I have a gallery with hs.transitions = ['expand', 'crossfade']. 我有一个hs.transitions = ['expand','crossfade']的画廊。
Next construction will close old popup window and open new one (and break the slideshow), but i want the same effect (crossfade), like a user click next image. 下一步的工作将关闭旧的弹出窗口并打开一个新的窗口(并中断幻灯片放映),但是我想要相同的效果(淡入淡出),就像用户单击下一个图像一样。
hs.allowMultipleInstances = false;
hs.Expander.prototype.onImageClick = function()
{
return hs.htmlExpand(null, { objectType: 'iframe', src: 'url' });
};
How to make it? 怎么做?
Sample - http://jsfiddle.net/xCnfE/4/ 样本-http://jsfiddle.net/xCnfE/4/
You can't crossfade from an image to a HTML popup if the HTML popup isn't part of the gallery. 如果HTML弹出窗口不包含在图库中,则不能从图像淡入淡出到HTML弹出窗口。 Instead you can create a regular iframe that covers the image with jQuery and show this iframe only when clicking the image (
onImageClick
). 相反,您可以创建一个普通的iframe,用jQuery覆盖图像,并且仅在单击图像(
onImageClick
)时显示此iframe。 Please see http://jsfiddle.net/roadrash/B7sDG/ 请参阅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;
};
The url
is passed to the iframe src
using hs.custom in the onclick
: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.