1

ここに画像の説明を入力してください

選択したときに、ページの前面または上部に1つの画像を表示します。

検索したところ、これをサポートするプラグインはたくさんあるようですが、必要のない他の機能やオーバーヘッドもたくさんあります（ギャラリー、ビデオのサポート、サムネイルなど）。

特にFireFoxで、基本的なJavaScript、CSS、HTML、jQueryを使用して単一の画像を上に表示することは可能ですか？

ありがとうございました。

（注意*：これは自社製品であるため、これらの要件と制約があります。）

4

4 に答える 4

2

基本的な JavaScript、CSS、HTML、および jQuery を使用して、特に FireFox で単一の画像をトップに表示することは可能ですか?

はい、可能ですが、ほとんどの場合、プラグインの方が簡単に実装できます。あなたが達成しようとしているのはlight box効果に似たものですが、あなたがやろうとしていることを達成するために必要な4つのステップに基づいて簡単な解決策を提供しようとします:

  1. オーバーレイ div を作成します。この 1 つの div によって、ページ全体がぼやけたり、暗くなったりします。以下の例では、画面が暗くなります (単純なため)。
  2. オーバーレイ div に追加され、表示する画像を含む div を作成します。以下のデモでは、この div はlighterオーバーレイ 1 ではなく、実際には画面の半分の幅と半分の高さになります。
  3. image-div に大きな画像を追加します。

  4. テキストに基づいて画像にサブタイトルを追加しaltます。

    $(document).ready(function()
{

    var docWidth = $(document).width();
    var docHeight = $(document).height();

    //First Step" Creating the overlay-div and adding opacity to it
    var overlayDiv = "<div id="overlay-div"></div>"
    $("body").append(overlayDiv);
    $("#overlay-div").css("position","absolute", "top","0","left","0","background-color","#000","opacity","0.5", "width", docWidth + "px", "height",docHeight + "px");

    //Second step: Creating the image-div and centering it on the screen

    $("#overlay-div").append("<div id=\"image-div\"></div>");
    $("#image-div").css("position","absolute", "top",docHeight/4 + "px","left",docWidth/4 + "px","background-color","#FFF", "width", docWidth/2, "height",docHeight);

    //Third step: Creating an image to display inside the image-div and centering it

    $("#image-div").append("<img src=\"path/to/your/image\"id=\"zoomed-img\" alt=\"This is a zoomed image\"/>");
    var imgWidth = $("#image-div").width();
    var imgHeight = $("#image-height").height();

    $("#image-div").css("position","absolute", "top","10px","left","10px");

    //Fourth step: Creating a subtitle from the alt text
    var subtitle = "<p id=\"text-subtitle\">" + $("#image-div").attr("alt") + "</p>";

    $("#image-div").append(subtitle);
    $("#text-subtitle").css("position","absolute", "top",imgHeight + 20 + "px","left","10px");


});

この関数は、ドキュメントの準備ができたときにトリガーされ、任意の画像を取得します。ただし、上記のコードを少し調整することで、クリックによってトリガーされる別の画像 (別のサブタイトル付き) を表示することができます。

数行の jQuery/javascript コードを使用して必要なものを作成できる簡単なデモをお見せするつもりでした。もちろん、そこにあるプラグインの効果の 90% ほどきれいではありませんが、それは出発点かもしれません.

お役に立てば幸いです。乾杯

于 2012-10-29T20:08:22.137 に答える
1

ブートストラップのモーダルを試してください。

JavaScript-Twitterブートストラップ

GitHubソースコード

GitHubbootstrap-modal.js

于 2012-10-29T19:55:38.240 に答える
1

ばかげた単純なライトボックスについては、最近http://buckwilson.me/lightboxme/を利用しています。

于 2012-10-29T19:51:57.633 に答える
1

これは、私が作成した非常に基本的な例です。うまくいけば、次のことから学ぶことができます。

http://jsfiddle.net/v9LTP/2/

$('img').click(function(){  //bind a click event handler to images
    var img = $(this).clone().addClass('modal').appendTo($('#blackout')); //clone the clicked image element and add to the blackout div which gives the dark background.
    $('#blackout > #close').click(function(){ //attach click handler to close button
        $('#blackout').fadeOut(function(){ //fade the blackout div
            img.remove(); //remove the image element we cloned, so we can do it again.
        }); 
    });
    $('#blackout').fadeIn(); //show the blackout div
});

</p>

于 2012-10-29T20:09:22.793 に答える