Static overlay in front of the slider

peter's Avatar

peter

01 Jul, 2013 10:57 AM

I love this slider! Especially the Slider in laptop template.

But what I would love to see is to make the slider even more realistic (or feature rich), by having a static glare layer (or any sort of content) in front of the slider. The Slider in laptop template puts a responsive graphic behind the slider, but what would it take to create a seperate graphic that displays in front of the slider (without interfering with the controls).

  1. Support Staff 1 Posted by Dmitry Semenov on 01 Jul, 2013 08:38 PM

    Dmitry Semenov's Avatar

    Hi,

    It's pretty hard to implement such thing, as if you put anything on top of it - it'll block touch navigation.

    If you don't need touch navigation, you may simply overlay a PNG image with glare over the slider using position:absolute

    Dmitry

  2. 2 Posted by ken on 28 Jan, 2015 08:47 PM

    ken's Avatar

    I think I know what you're looking for, and you can do this by editing the main slide markup template. I did it with something like this:

    <div class="rsContent">
      {{image_tag}}
    <img src="/wp-content/uploads/2015/01/white-gradient-behindlogo.png" style="position:absolute; top:0;">
      {{animated_blocks}}
    </div>

    Using this method doesn't interfere with touch navigation.

  3. 3 Posted by jonathan on 07 Jun, 2016 03:33 PM

    jonathan's Avatar

    I'm not sure if this is the correct area to post this, but using thumbnails, is it possible to have a single image that's static before the thumbnails? this image would not rotate and does not link to a slide.

  4. Support Staff 4 Posted by Dmitry Semenov on 07 Jun, 2016 04:16 PM

    Dmitry Semenov's Avatar

    @Jonathan , no, static content before/above/after slider element can not be added from its admin area. You'll need to either wrap it with an element that you need manually or use JS to append it.

  5. 5 Posted by jonathan on 07 Jun, 2016 04:29 PM

    jonathan's Avatar

    Thanks @Dmitry and this would be for the non-WordPress version. Would I use the same code as if creating an additional slide w/thumbnail? This is an example of my slider w/JS.

    <!-- BEGIN SLIDE -->
    <div class="rsContent">
        <img class="rsImg" src="http://dummyimage.com/1400x440/000/fff.jpg" alt="image" data-rsTmb="http://dummyimage.com/150x100/000/fff.jpg"/>
        <div class="rsABlock infoblock-wrap wrap-left wraptheme-light" data-fade-effect="true" data-move-offset="25" data-move-effect="left" data-speed="200">
            <div class="infoBlockCopy">
                <h4>Headline Here</h4>
                <p class="slide-blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                <a href="#" title="" target=""><div class="wrap-cta cta-light"><div class="cta-copy-light">CALL TO ACTION</div></div></a>
            </div>
        </div>
    </div>
    <!-- END -->`
    
    `
    jQuery(document).ready(function($)
        {
        $('#full-width-slider').royalSlider(
            {
            arrowsNav: false,
            loop: false,
            keyboardNavEnabled: true,
            controlsInside: true,
            imageScaleMode: 'fill',
            arrowsNavAutoHide: false,
            autoScaleSlider: 140, 
            autoScaleSliderWidth: false,     
            autoScaleSliderHeight: false,
            controlNavigation: 'tabs',
            thumbsFitInViewport: false,
            navigateByClick: true,
            startSlideId: 0,
        autoPlay:
          {
          enabled: true,
          pauseOnHover: true
          },
            usePreloader: true,
            transitionType: 'fade',
            globalCaption: false,
            sliderTouch: true,
            sliderDrag: true,
            fadeinLoadedSlide: true,
            deeplinking:
                {
                enabled: true,
                change: false
                },
            });
        });
    
  6. Support Staff 6 Posted by Dmitry Semenov on 07 Jun, 2016 07:03 PM

    Dmitry Semenov's Avatar

    Can you please attach some screenshot or example of layout that you wish to achieve? Not sure if I entirely understand what you need.

    Dmitry

  7. 7 Posted by jonathan on 07 Jun, 2016 07:27 PM

    jonathan's Avatar

    Please see attached. the red text points to thumbnails that can be clicked and change the slider. the blue/teal color points to a thumbnail that does nothing w/a click and will be used to show a logo. As a dirty hack I was going to create thumbs 1 & 2 w/the same slider image but different thumbnails.

  8. Support Staff 8 Posted by Dmitry Semenov on 08 Jun, 2016 05:58 AM

    Dmitry Semenov's Avatar

    You may reduce width of .rsNav element via CSS and append the image before .rsNav (after slider is initialized). Appending it as the first .rsNavItem element will not work, as it'll break index calculation.

    You may also set thumbs.fitInViewport to false, to make sure that height of the slider does not depend on height of thumbnails, and you can move rsNav container freely.

    Dmitry

  9. 9 Posted by jonathan on 08 Jun, 2016 05:27 PM

    jonathan's Avatar

    Thanks @Dmitry. I was looking through other posts ... is there still not a way to skip a specific slide? I used 'startSlideId' however if looped, the slideshow will show the skipped slide when it begins at the start of the loop.

  10. Support Staff 10 Posted by Dmitry Semenov on 09 Jun, 2016 06:02 AM

    Dmitry Semenov's Avatar

    There is no option to skip slides, you may either remove slide dynamically, or change the markup of slider before it's initialized.

    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