Reveal.js: feature request: Replacing images

[mnowotka]

Hi,

First of all let me say that this feature request was originally described in this SO question: http://stackoverflow.com/questions/23608762/replace-image-in-reveal-js. The question is still unanswered, even though I founded a bounty. This is my evidence that this feature is not yet implemented and this issue is not a duplicate. To keep all the things in one place I paste below orginial question:

Suppose I have two very similar images I want to display in succession (say first is a photo and the second one the same photo with some area highlighted). I'd like to avoid a transition animation and just have the second image replace the first image. Is this possible with reveal.js?

Setting data-transition="none" doesn't work very well because the previous slide still retains its animation.

It would be great to have this feature implemented as part of reveal.js.

[MHellmund]

What is your problem with the answer given at SO by mib0163? It works perfect for me:
position the images on top of each other and make them fragments.

[flying-sheep]

cumbersome, not DRY, can’t derive image dimension, can’t use class=stretch

[bnjmnt4n]

You can make two slides with no animations for the first one exiting, and no animations for the second one entering, so it would look like just the image is being replaced:

<section data-transition="fade-in none-out"></section>
<section data-transition="none-in fade-out"></section>

[samudurand]

I recommend using class="fragment current-visible" , this will show the element only once, meaning you can show each and replace by the next fragment

[flying-sheep]

@demoneaux then it’s not fragments though.

[samudurand]

@flying-sheep you can check my github where I am doing exactly what you mean I think, but with pieces of code https://github.com/firens/presentations/blob/gh-pages/docker-image-size/docker.html#L263

[sagacitysite]

I found another solution based on Javascript, I posted it in the StackOverflow topic mentioned above:

https://stackoverflow.com/questions/23608762/replace-image-in-reveal-js/45392686#45392686

[RobbyBer]

@sagacitysite I have try your Solution at

https://stackoverflow.com/questions/23608762/replace-image-in-reveal-js/45392686#45392686

I think i make a stupid mistake, but I hope you can help.
I believe the problem is, i don't know where i a the code. I have add your Javascript under the last script-tag (with the reveal initialize) in a new script-Tag.
Now i get this message: "ReferenceError: $ is not defined" in the console.

[sagacitysite]

@RobbyBer, for my solution the jQuery library is necessary. If you add jQuery somewhere before your script, I think it should work.

[hakimel]

There's a new r-stack helper class in reveal.js 4.0 which makes it easier to replace images in-place. More info in https://github.com/hakimel/reveal.js/issues/2303#issuecomment-635550364