Is there a way to add pdf icon to thumbnail that link to pdf?

Michele's Avatar

Michele

07 Feb, 2022 03:34 PM

Hello,
I've got a RoyalSlider with images and videos.
For the video I followed these instructions and works well:
http://help.dimsemenov.com/discussions/problems/68879-is-there-a-wa...

Now I need to put in the gallery pdf files, so I was wondering if there was a possibility to make something similar also pdf documents: (1) pdf icon on the thumbnail and (2) open the pdf instead of the enlarged image.

The pdf icon on thumbs is not crucial, instead, it's important for me to create the behaviour to open the pdf if a user clicks on the thumbs or the large image.
Is it possible?
Thanks.

This discussion was closed! See this FAQ for more information:

  1. [WP] How to open full slide link in new window?

    Click on "Edit Slide Markup" in slider options. Find part where slider adds full-slide link:

    <a class="rsLink" href="{{link_url}}">{{title}}</a>
    
    and add target="_blank" attribute to it, e.g.:
    <a class="rsLink" target="_blank" href="{{link_url}}">{{title}}</a>
    

    Edit_Sliders_‹_WordPress_3.5_test_—_WordPress.jpg

    Read more about a tag - http://www.w3schools.com/tags/tag_a.asp

    See more..
  1. Michele closed this discussion on 07 Feb, 2022 03:35 PM.

  2. Michele re-opened this discussion on 07 Feb, 2022 03:35 PM

  3. 1 Posted by Michele on 07 Feb, 2022 04:28 PM

    Michele's Avatar

    Or if it's too complicated the previous request, it would be enough to have the possibility to open the pdf in a new window without the gallery entering in fullscreen (only for the pdf).

  4. Support Staff 2 Posted by Dmytro Semenov on 07 Feb, 2022 04:57 PM

    Dmytro Semenov's Avatar

    Hello,

    Each slide and each thumbnail can contain any HTML, so you may add a link to both, for example:

    <div class="rsContent">
      <a href="link/to/file.pdf">Slide content</a>
      <div class="rsTmb">
        <a href="link/to/file.pdf">Thumbnail content</a>
      </div>
    </div>
    

    (this is a markup for a single slide)

  5. 3 Posted by Michele on 07 Feb, 2022 05:59 PM

    Michele's Avatar

    I tried using your code but didn't open the pdf.
    I see white space for thumb and content area, with only the texts "Slide content" and "Thumbnail content".

    <div class="rsContent">
              <a href="/doc.pdf">Slide content</a>
              <div class="rsTmb">
                <a href="/doc.pdf">Thumbnail content</a>
              </div>
            </div>
    

    Do I need to add anything else?

  6. 4 Posted by Michele on 07 Feb, 2022 06:08 PM

    Michele's Avatar

    I tried with this code but open the pdf only when I click on the big area, instead, I'd like to open the pdf directly when a user clicks on the thumb.
    Also, I'd like it not to go into fullscreen when I click on the thumbnail.

    <div class="rsContent"> 
       <a class="rsImg" 
        data-rsbigimg="image.jpg" 
        href="image.jpg" 
        data-rsw="1000" data-rsh="668"> AAA 
        <img class="rsTmb" src="image.jpg" alt="AAA"> 
        </a> 
        <a class="rsLink" href="doc.pdf" target="_blank">&ensp;</a>
    </div>
    
  7. Support Staff 5 Posted by Dmytro Semenov on 07 Feb, 2022 07:58 PM

    Dmytro Semenov's Avatar

    I see white space for thumb and content area, with only the texts "Slide content" and "Thumbnail content".

    You need to replace text with the actual content, like the image or whatever you have in slide, something like:

    <div class="rsContent">
       <a class="rsImg" 
        data-rsbigimg="image.jpg" 
        href="image.jpg" 
        data-rsw="1000" data-rsh="668"> </a> 
      <a href="link/to/file.pdf" class="rsLink"></a>
      <div class="rsTmb">
        <a href="link/to/file.pdf"><img src="image.jpg" alt="AAA"> </a>
      </div>
    </div>
    
  8. 6 Posted by Michele on 07 Feb, 2022 09:43 PM

    Michele's Avatar

    Thanks.
    Lastly, is there a way to avoid that if a user clicks on the big image ("rsLink"), the gallery doesn't open on fullscreen?
    Now (1) the user clicks on the big image, (2) open the pdf on a new window, but (3) when he closes the window, the gallery is on fullscreen, and I prefer not.

  9. Support Staff 7 Posted by Dmytro Semenov on 08 Feb, 2022 05:16 AM

    Dmytro Semenov's Avatar

    Are you using some custom code to open fullscreen on slide click? If so, adjust it and check for mouse event target. Or bind a click event before the slider is initialized and stopPropagation() it.

  10. 8 Posted by Michele on 08 Feb, 2022 07:43 AM

    Michele's Avatar

    Thanks!

  11. Michele closed this discussion on 08 Feb, 2022 07:43 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac