hs.html展開圖像上的打開彈出窗口，然后單擊

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彈出窗口不包含在圖庫中，則不能從圖像淡入淡出到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>