1

画像をノックアウト ポップオーバーにバインドできるカスタム ノックアウト バインディングがあります。

ko.bindingHandlers.bootstrapPopover = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = valueAccessor();
        var defaultOptions = {trigger: 'hover'};
        options = $.extend(true, {}, defaultOptions, options);
        $(element).popover(options);
    }
};

私の目標は、ユーザーがサムネイル (最大サイズが定義されている) にカーソルを合わせて、おそらく画面が許す限りフルサイズの画像を表示できるようにすることです (ブートストラップのポップオーバーは既に応答性を考慮していると思います)。

ポップオーバーに表示されるフルサイズの画像を取得するにはどうすればよいですか?

フィドル:

http://jsfiddle.net/PTSkR/117/

html:

 <a class="image-content-saved" href="#" data-bind="bootstrapPopover: { content: sideOneTextContent(), html:true }">
                <img src="http://www.dailydesigninspiration.com/diverse/adv/publicis/Omax-Wide-Angle-Lenses.jpg" />
            </a>
4

1 に答える 1

2

あなたの問題はノックアウトやブートストラップとは関係ありませんが、サムネイルのスタイルは次のとおりです。

img {
    max-height: 160px;
    height: 100% !important;
    max-width: 100% !important;
    margin-bottom: -5px;
}

したがって、セレクターimgは一般的すぎて、ポップオーバーの画像にも適用されます。ポップオーバー内の画像に新しいルールを追加することで修正できます。

Bootstrap はクラスpopoverをポップオーバーのコンテナーに追加するので、次のように記述できます。

.popover img {   
   max-height: none;
   max-width: none !important;
}

JSFiddle のデモ。

于 2013-06-05T04:54:15.073 に答える