[SOLVED] Embed a slideshow in an asciidoc document rendered with HTML converter

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

[SOLVED] Embed a slideshow in an asciidoc document rendered with HTML converter

ferandec
This post was updated on .
Hello Asciidoctor Community,

Could someone tell me if it is possible to embed a slideshow like this one in an asciidoc document ? If so, could you give me some leads?

My need is generally to illustrate the navigation in a software through its menus

Animated gif could be a solution but I'm not very keen of this because of the lack of controls.

Currently, I'm using ffmpeg in order to make a movie from a serie of screenshots then I embed it in asciidoc with the video block macro. However, navigating through the screenshots with the pause, forward or reward buttons is not very handy.

Any help would be appreciated.

-Ferandec
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Embed a slideshow in an asciidoc document rendered with HTML converter

Ted
This post was updated on .
If you will output to HTML, then yes. (see next post)

Here's an example of an AsciiDoc file that will render a image gallery. https://github.com/tedbergeron/AsciidoctorImageGallery

It uses Asciidoctor's docinfo.html file to inject CSS. You would have to add the JavaScript to the docinfo.html file also. Then markup the images with the "mySlides" class, etc.
- Ted @TedAtCIS
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Embed a slideshow in an asciidoc document rendered with HTML converter

Ted
Here's the easiest way I found to do it. Place the CSS and JavaScript into a docinfo.html file. Save the images in the same directory. Then use Asciidoctor to render HTML. Here's what the AsciiDoc file looks like.


= Embedded Slideshow
:docinfo1:

== Slideshow Indicators

An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.

++++
<div class="w3-content w3-display-container" style="max-width:800px">
  
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)">
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)">
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)">
  </div>
</div>
++++
- Ted @TedAtCIS
Reply | Threaded
Open this post in threaded view
|

Re: Embed a slideshow in an asciidoc document rendered with HTML converter

ferandec
Many thanks for your help Ted !

The result is perfectly in accordance with what i wanted. I begin to realize the flexibility offered by docinfo files in Asciidoctor.

Your first example about how to make an image gallery with Asciidoctor was also very instructive for me. I've learned a lot about the usage of Asciidoctor attributes, in particular, those applied to elements. For example, I didn't know that an id attribute could be used "to reference a style or script used by the output processor" as mentionned here in the user manual.

I still have a lot to learn about this awesome Asciidoctor ;-)

- Ferandec
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Embed a slideshow in an asciidoc document rendered with HTML converter

Ted
I'm glad you could accomplish what you wanted.
- Ted @TedAtCIS