Question

I’m trying to fullscreen a different image from the one clicked.
I want to fullscreen a gif, instead of the png.
Here’s the code used

$('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>

Thanks in advance

Update

This worked like a charm…
My bad was missing the var point..
Now i need to, on exit, put attribute back to png, otherwise the gif will appear after quit fullscreen, instead of png.

Something like this

$('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_);
    }
});

Answer 1

To make your example work you should probably change

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

to

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

The quotation marks currently mean you are changing the image source to the text “element” rather than to the value of the variable.

Update

In answer to your new question, you should make use of screenfull.onchange as screenfull.exit is a function which exits fullscreen. I’ve added an example below. I’ve also tidied up the repeated use of “img#pic01” which is unnecessary.

$('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);
        }
    };
});