Video Gallery with Images and PictureFill 3.0.2

chris's Avatar

chris

15 May, 2019 08:47 PM

Hello,

I've been trying to use PictureFill with the Video Gallery where I've switched the video links
for image files.

Here's my markup right now:

<div id="video-gallery" class="royalSlider videoGallery rsDefault">
    <div class="rsContent">
        <picture>
            <!--[if IE 9]><video style="display: none;"><![endif]-->
            <source srcset="imgs/slides/slide01.png" media="(min-width: 1680px)">
            <source srcset="imgs/slides/slide01_med.png" media="(min-width: 1500px)">
            <!--[if IE 9]></video><![endif]-->
            <img class="rsImg" src="imgs/slides/slide01.png" srcset="imgs/slides/slide01_med.png" alt="Slide Image 1" />
        </picture>
            
        <a class="rsImg" href="imgs/slides/slide01.png">
            <div class="rsTmb">
                <h5>Slide Topic 1</h5>
                <span>by CMT</span>
            </div>
        </a>
        <a class="rsLink" href=""></a>
    </div>
</div>

I've seen other posts on this, but all of them are from 3 or 4 years ago, so
I'm not sure if they're still valid. Seems like my markup is probably wrong
or perhaps this can't even be done with the Video Gallery.

Any direction you can give me?

Thank you.

  1. Support Staff 1 Posted by Dmitry Semenov on 15 May, 2019 09:34 PM

    Dmitry Semenov's Avatar

    Hello,

    If you want a single slide with a <picture> element as an image, you just need:

    <div id="video-gallery" class="royalSlider videoGallery rsDefault"> 
        <div class="rsContent"> 
            <picture> 
                <source srcset="imgs/slides/slide01.png" media="(min-width: 1680px)"> 
                <source srcset="imgs/slides/slide01_med.png" media="(min-width: 1500px)"> 
                <img src="imgs/slides/slide01.png" alt="Slide Image 1" /> 
            </picture> 
            <div class="rsTmb"> 
                 <h5>Slide Topic 1</h5> 
                 <span>by CMT</span> 
            </div> 
        </div> 
    </div>
    

    You might need to style the image so it's centered properly, here is an example https://codepen.io/dimsemenov/pen/jhsJL

  2. 2 Posted by chris on 17 May, 2019 01:03 PM

    chris's Avatar

    Thank you Dmitry!

  3. 3 Posted by chris on 15 Jul, 2019 05:37 PM

    chris's Avatar

    Hello Dmitry,

    I'm using the Video Gallery of the Royal Slider, but not for videos. I
    just like
    those label buttons on the right side a lot.

    Anyway, I have the left and right arrow buttons activated, and on one
    slide, I've
    found the need to have a vertical scrollbar, however, the right arrow link
    area extends
    the full height of the slide, making it so that you can't use the scrollbar
    with the mouse
    pointer. The scrollbar can only be used if you have a wheel mouse.

    I'm guessing you have that arrow link as display block, and I've found in
    the source
    code where I think it's setting that, but I can't change it.

    Is there a way to limit the click area of the arrow buttons to just the
    area of those
    buttons?

    Thank you.

    Chris Delez

  4. Support Staff 4 Posted by Dmitry Semenov on 15 Jul, 2019 06:19 PM

    Dmitry Semenov's Avatar

    Hello,

    The arrow is made of .rsArrow (container) and .rsArrowIcn elements. The first one expands to 100% height of the slider viewport. You may adjust its styling via CSS, from skin .css file.

  5. 5 Posted by chris on 15 Jul, 2019 08:01 PM

    chris's Avatar

    Thank you for your reply.

    I've changed the height value in .rsDefault .rsArrow to 44px to
    match the width of the arrows and
    that confines the link area to just the area of the arrow, but well,
    now the arrows are at the top of the slider viewport, and nothing
    I've tried so far will center them vertically.

    Any suggestions?

    Thank you.

  6. Support Staff 6 Posted by Dmitry Semenov on 15 Jul, 2019 08:50 PM

    Dmitry Semenov's Avatar

    I do not fully understand what you mean, but this might help - https://css-tricks.com/centering-css-complete-guide/

  7. 7 Posted by chris on 16 Jul, 2019 12:57 PM

    chris's Avatar

    Please see the attached the picture.

    I'm using
    .rsDefault .rsArrow { height: 44px }

    instead of the default, height: 100%;

    which allows me to use the vertical slider, but
    it puts the arrows at the top of the slider viewport
    instead of vertically centered.

    Is there a way to vertically center them without
    using height: 100%?

  8. Support Staff 8 Posted by Dmitry Semenov on 16 Jul, 2019 01:28 PM

    Dmitry Semenov's Avatar

    Sure, refer to the guide that I send in the previous message. Vertically -> block level -> unknown height.

  9. 9 Posted by chris on 16 Jul, 2019 01:57 PM

    chris's Avatar

    I had tried that Making

    .rsDefault .rsArrow { position: absolute }....as the parent

    and then setting

    .rsDefault .rsArrowIcn { position: absolute; top: 50%; transform:
    translateY(-50%); } as the child

    puts both arrows on top of each other in the lower left corner of the
    slider viewport with only
    50% of the arrows showing.

  10. Support Staff 10 Posted by Dmitry Semenov on 16 Jul, 2019 03:16 PM

    Dmitry Semenov's Avatar

    I'd need a link to the page that you're working on to recommend the exact code.

    But you should center .rsArrow element, not .rsArrowIcn, so:

    .rsDefault .rsArrow { position: absolute; top: 50%; transform: 
    translateY(-50%); }
    
  11. 11 Posted by chris on 16 Jul, 2019 03:43 PM

    chris's Avatar

    Yeah, that's not working either, so I'm still not doing something right.

    Here's a link to the page:

    https://www.adrcbroward.org/private/adrc2020/index.php

    Thank you for taking a look.

  12. Support Staff 12 Posted by Dmitry Semenov on 16 Jul, 2019 05:10 PM

    Dmitry Semenov's Avatar

    https://www.adrcbroward.org/private/adrc2020/css/skins/default/rs-d...

    Your top:50% style is overridden by:

    .rsDefault.rsHor .rsArrowLeft { left: 0; top: 0; }
    

    & ...Right.

  13. 13 Posted by chris on 16 Jul, 2019 05:37 PM

    chris's Avatar

    Okay, it appears okay now, using this:

    /*.rsDefault.rsHor .rsArrowLeft { left: 0; top: 0; }*/
    .rsDefault.rsHor .rsArrowRight { right: 0; top:50%; }

    Commented out .rsDefault .rsArrowLeft and changed top: 0 to top 50%
    in .rsDefault.rsHor .rsArrowRight plus with the insertion of

    .rsDefault .rsArrow { position: absolute; top: 50%; transform:
    translateY(-50%); }

    as you stated in a previous message. Thank you Dmitry!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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