Sostituisci immagine in reveal.js

Question

Supponiamo di avere due immagini molto simili che voglio visualizzare in successione (diciamo prima una foto e la seconda la stessa foto con qualche area evidenziata). Mi piacerebbe evitare un'animazione di transizione e solo la seconda immagine sostituire la prima immagine. Questo è possibile con reveal.js?

L'impostazione data-transition="none" non funziona molto bene perché la diapositiva precedente conserva ancora l'animazione.

Answer 1

Supponiamo che si stia utilizzando data-background per la visualizzazione delle foto, quindi è necessario utilizzare data-background-transition="none" per l'effetto desiderato.

Answer 2

Reveal.js non ha alcun metodo diretto da solo per fare ciò che viene chiesto. Tuttavia, può essere fatto utilizzando un contenitore div e la funzione fragment di reveal.js. Il contenitore include le immagini, che sono assolutamente posizionate al suo interno, e per questo deve avere dimensioni fisse.

Il seguente pezzo di html visualizza la prima immagine e nella diapositiva successiva la seconda immagine in cima alla prima.

<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> 

Mentre questo pezzo di html visualizza la prima immagine e diapositiva successiva alla prima immagine svanisce e la seconda immagine si dissolve in invece.

<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> 

Answer 3

Un'altra possibile soluzione sarebbe utilizzare Javascript.

Supponiamo di avere un titolo e di avere tre immagini che devono essere mostrate una dopo l'altra all'interno della stessa sezione. Possiamo estendere la funzionalità del frammento .

il codice HTML potrebbe essere simile:

<section> 
    <h3>Your title</h3> 
    <img src="" /> 
    <div> 
     <span class="fragment imgsrc" data-src="img/pic1.svg" data-fragment-index="0"></span> 
     <span class="fragment imgsrc" data-src="img/pic2.svg" data-fragment-index="1"></span> 
     <span class="fragment imgsrc" data-src="img/pic3.svg" data-fragment-index="2"></span> 
    </div> 
</section> 

Ora si aggiunge una funzione fadeImage() e chiamano ogni volta fragmentshown o fragmenthidden viene attivato.

function fadeImage($el) { 
    // Get image DOM element 
    $img = $el.parent().siblings('img'); 

    // Fade the image out, change source and fade in again 
    $img.fadeOut(100, function() { 
     $img.attr('src', $el.data('src')); 
     $img.fadeIn(500); 
    }); 
} 

Reveal.addEventListener('fragmentshown', function(event) { 
    // Get DOM element of current fragment 
    var $el = $(event.fragment); 

    // Check if current fragment is of 'type' imgsrc 
    // If yes: fade image with source of current element 
    if($el.hasClass('imgsrc')) 
     fadeImage($el); 
}); 

Reveal.addEventListener('fragmenthidden', function(event) { 
    // Get DOM element of current fragment 
    var $el = $(event.fragment); 

    // Check if current fragment is of 'type' imgsrc 
    // If yes: fade image with source of previous element 
    if($el.hasClass('imgsrc')) { 
     fadeImage($el.prev()); 
    } 
}); 

Poiché abbiamo appena prolungato il frammento funzionalità, possiamo ancora utilizzare l'attributo data-fragment-index. Ad esempio potresti mostrare una descrizione per ogni immagine.

La soluzione può essere facilmente ottimizzata/personalizzata.

Answer 4

È possibile specificare due transizioni, per entrare e per uscire, quindi le seguenti opere, ma ha un problema tecnico (lo sfarfallio delle immagini quando compaiono):

<section data-transition="slide none"> 
    <img src="timeline2.a.svg"> 
</section> 
<section data-transition="none"> 
    <img src="timeline2.b.svg"> 
</section> 
<section data-transition="none side"> 
    <img src="timeline2.c.svg"> 
</section> 

caso contrario, questo può anche essere una soluzione, questo è un po ' diverso da quello che vuoi ma non è male:

<section data-transition="slide fade-out"> 
    <img src="timeline2.a.svg"> 
</section> 
<section data-transition="fade-in fade-out"> 
    <img src="timeline2.b.svg"> 
</section> 
<section data-transition="fade-in side"> 
    <img src="timeline2.c.svg"> 
</section>