0

ユーザーが開いているポップアップで画像をクリックすると、コンテンツが 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/

4

1 に答える 1

1

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


は、でhs.customを使用urlして iframe に渡されます。srconclick

<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-27T13:12:03.973 に答える