Thay thế hình ảnh trong tập tin đính kèm

Question

Giả sử tôi có hai hình ảnh giống nhau tôi muốn hiển thị liên tiếp (trước tiên là ảnh và ảnh thứ hai cùng một ảnh với một số vùng được đánh dấu). Tôi muốn tránh hoạt ảnh chuyển tiếp và chỉ có hình ảnh thứ hai thay thế hình ảnh đầu tiên. Điều này có thể thực hiện với reveal.js không?

Đặt data-transition="none" không hoạt động tốt vì trang trình bày trước vẫn giữ nguyên hoạt ảnh.

Answer 1

Giả sử bạn đang sử dụng data-background để hiển thị ảnh của mình, sau đó bạn cần sử dụng data-background-transition="none" để có hiệu ứng mong muốn.

Answer 2

Reveal.js không có bất kỳ phương pháp trực tiếp nào để tự mình thực hiện những gì đang được hỏi. Tuy nhiên, nó có thể được thực hiện bằng cách sử dụng vùng chứa div và tính năng fragment của reveal.js. Vùng chứa bao gồm các hình ảnh, được đặt hoàn toàn bên trong nó và do đó nó phải có kích thước cố định.

Đoạn html sau hiển thị hình ảnh đầu tiên và trên trang trình bày tiếp theo hình ảnh thứ hai trên hình đầu tiên.

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

Trong khi điều này mảnh html hiển thị hình ảnh đầu tiên và trên slide tiếp theo hình ảnh đầu tiên mất dần ra ngoài và hình ảnh thứ hai mất dần trong để thay thế.

<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

Một giải pháp khác có thể là sử dụng Javascript.

Giả sử bạn có tiêu đề và bạn có ba hình ảnh sẽ được hiển thị sau một hình ảnh khác bên trong cùng một phần. Chúng tôi có thể mở rộng chức năng của đoạn .

Các html có thể trông giống như:

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

Bây giờ chúng ta thêm một chức năng fadeImage() và gọi nó là mỗi lần fragmentshown hoặc fragmenthidden được kích hoạt.

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

Kể từ khi chúng ta vừa mở rộng đoạn chức năng, chúng tôi vẫn có thể sử dụng thuộc tính data-fragment-index. Ví dụ: bạn có thể hiển thị mô tả cho mọi hình ảnh.

Giải pháp có thể dễ dàng được tối ưu hóa/tùy chỉnh.

Answer 4

Bạn có thể chỉ định hai quá trình chuyển đổi, để nhập và rời khỏi, do đó các công việc sau nhưng có một trục trặc (hình ảnh nhấp nháy khi xuất hiện):

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

Nếu không điều này cũng có thể là một giải pháp, đây là một chút khác với những gì bạn muốn nhưng không phải là xấu:

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