-1

クリックした画像とは異なる画像を全画面表示しようとしています。pngではなくgifをフルスクリーンにしたい。使用したコードは次のとおりです

$('img#pic01').click(function() {
    var png = $(this).attr("src");
    var gif = png.split("png");
    var element = gif[0]+"gif";
    $('img#pic01').attr("src", "element");
    if (screenfull.enabled) {
        // We can use `this` since we want the clicked element
        screenfull.toggle(this);
    }
});

<a href="#" class="thumbnail">
    <img src="<?php echo base_url().'assets/img/animation01.png' ?>"
        alt="Abertura normal das vias Respiratórias" id="pic01">
</a>

前もって感謝します

アップデート

これは魅力のように機能しました...私の悪い点はvarポイントがありませんでした..終了時に属性をpngに戻す必要があります。そうしないと、gifがpngではなくフルスクリーンで終了した後に表示されます。

このようなもの

$('img#pic01').click(function() {
    var png = $(this).attr("src");
    var gif = png.split("png");
    var element = gif[0]+"gif";
    $('img#pic01').attr("src", element);
    if (screenfull.enabled) {
        // We can use `this` since we want the clicked element
        screenfull.toggle(this);
    }
    if (screenfull.exit) {
        var gif_ = $(this).attr("src");
        var png_ = gif_.split("gif");
        var element_ = png_[0]+"png";
        $('img#pic01').attr("src", element_);
    }
});
4

1 に答える 1

2

サンプルを機能させるには、おそらく変更する必要があります

$('img#pic01').attr("src", "element");

に

$('img#pic01').attr("src", element);

現在、引用符は、画像ソースを変数の値ではなくテキスト「要素」に変更していることを意味します。

アップデート

screenfull.exitはフルスクリーンを終了する関数であるため、新しい質問に答えるには、screenfull.onchangeを使用する必要があります。以下に例を追加しました。また、不要な「img＃pic01」の繰り返し使用も整理しました。

$('img#pic01').click(function() {
    var png = $(this).attr("src");
    var gif = png.split("png");
    var element = gif[0]+"gif";
    var _obj = $(this);
    _obj.attr("src", element);

    if (screenfull.enabled) {
        // We can use `this` since we want the clicked element
        screenfull.toggle(this);
    }

    // Set the callback function that is called when screenfull changes state
    screenfull.onchange = function() {
        // Back to the normal page state
        if(!screenfull.isFullscreen) {
            _obj.attr("src", png);
        }
    };
});
于 2012-11-22T14:09:57.300 に答える