Replace image in reveal.js

reveal.js

Solution

Reveal.js does not have any direct method by itself for doing of what is being asked. However, it can be done using a `div` container and the fragment feature of reveal.js. The container includes the images, which are absolutely positioned within it, and because of that it has to have fix dimensions.

The following piece of html displays the first image and on the next slide the second image on top of the first one.

<section>
<h1>Slide 1</h1>
<div style="position:relative; width:640px; height:480px; margin:0 auto;">
  <img class="fragment" width="640" height="480" src="img1.jpg" style="position:absolute;top:0;left:0;" />
  <img class="fragment" width="640" height="480" src="img2.jpg" style="position:absolute;top:0;left:0;" />
</div>
</section>

While this piece of html displays the first image and on the next slide the first image fades out and the second image fades in instead.

<section>
<h1>Slide 2</h1>
<div style="position:relative; width:640px; height:480px; margin:0 auto;">
  <img class="fragment fade-out" data-fragment-index="0" width="640" height="480" src="img1.jpg" style="position:absolute;top:0;left:0;" />
  <img class="fragment fade-in" data-fragment-index="0" width="640" height="480" src="img2.jpg" style="position:absolute;top:0;left:0;" />
</div>
</section>

Problem

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.

Original source