Создание печати изображения при использовании JQuery FreezeFrame

Question

FreezeFrame плагин Крис Antonellis позволяет анимировать GIF При наведении курсора мыши с помощью команды:

< img src="image.gif" freezeframe /> 

Смотрите пример на своем сайте here, а также увидеть документацию here ,

К сожалению, при использовании этого плагина версия для печати веб-сайта не отображает изображение (когда анимированный gif встроен на сайт, обычно статическая версия появляется на печатных страницах). Есть ли способ, чтобы мы могли исправить это, чтобы он правильно печатал?

Answer 1

Вы можете установить конкретные стили для печатной версии веб-сайта с использованием типов носителей.

@media print { 
    /* CSS styles here will only affect the website when it is printed. */ 
} 

При печати анимированного gif отобразится только первый кадр анимации. Если вы хотите создать отдельный образ «моментального снимка» анимированного gif, чтобы обеспечить больший контроль над тем, что будет видно на печатной версии, вы можете вставить другое изображение на странице.

Для ваших конкретных нужд было бы лучше всего обернуть каждое из изображений в div специальным CSS, применяемым на основе типа носителя. Следующий код позволит вам отображать анимированный gif-дисплей для обычных посетителей на вашем веб-сайте и разрешить вам указывать отдельное изображение для отображения для печатной версии.

<style> 
.print-image { 
    display:none; 
} 

@media print { 
    .screen-image { 
     display:none; 
    } 
     .print-image { 
     display:block; 
     } 
} 
</style> 

<!-- Content within the .screen-image element will be displayed to normal visitors --> 
<div class="screen-image"> 
    <img src="http://placehold.it/450x250" /> 
    <p>Image for normal viewing.</p> 
</div> 

<!-- Content within the .print-image element will be displayed when website is printed --> 
<div class="print-image"> 
    <img src="http://placehold.it/450x250" /> 
    <p>Image for print view.</p> 
</div> 

Вот JSFiddle! http://jsfiddle.net/gU57Y/ - проверьте его, нажав CTRL + P и проверив вид печати.

Если вам интересно узнать больше о применении стилей на основе типов носителей - вы можете узнать больше об этом на media types page по адресу W3.org.