Adding gradient over images in RoyalSlider

nenad.dvl's Avatar

nenad.dvl

02 Oct, 2012 06:20 PM

Hello there.

I've purchased RoyalSlider HTML version today and I am really satisfied.
However, before I found this slider I was trying to make something by my self and when I found RoyalSlider I gave up.

Now when I use royal slider, I was wondering how can I add the gradient light over images, that I've made for "my custom slider" before...
It's just this:

<div id="lightReflect"></div>

CSS:

#lightReflect {
    background: -webkit-linear-gradient(-69deg, rgba(255, 255, 255, .05) 10%, rgba(255, 255, 255, .1) 50%,rgba(255, 255, 255, 0) 50%);
    background: -moz-linear-gradient(-69deg, rgba(255, 255, 255, .05) 10%, rgba(255, 255, 255, .1) 50%,rgba(255, 255, 255, 0) 50%);
    background: -o-linear-gradient(-69deg, rgba(255, 255, 255, .05) 10%, rgba(255, 255, 255, .1) 50%,rgba(255, 255, 255, 0) 50%);
    background: -ms-linear-gradient(-69deg, rgba(255, 255, 255, .05) 10%, rgba(255, 255, 255, .1) 50%,rgba(255, 255, 255, 0) 50%);
    background: linear-gradient(-69deg, rgba(255, 255, 255, .05) 10%, rgba(255, 255, 255, .1) 50%,rgba(255, 255, 255, 0) 50%);
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
}

However if I add that into:

<div class="royalSlider rsDefault"></div>

It uses CSS gradient light like an image so it adds another "slide" instead adding that over all images.
I believe I need to edit something into javascript, but I don't know where and what.

This is not an issue, just thought that I might recieve help adding this because my artworks would look even better in slider with an gradient light over them.

Cheers.

  1. Support Staff 1 Posted by Dmitry Semenov on 03 Oct, 2012 09:15 AM

    Dmitry Semenov's Avatar

    Hello,

    You'll have to append this element to each slide, after initialization, via jQuery. Or single slide should look like:

    <div class="rsContent">
        <img src="image1.jpg" />
        <div class="reflect" />
    </div>
    

    Dmitry

  2. 2 Posted by nenad.dvl on 03 Oct, 2012 01:18 PM

    nenad.dvl's Avatar

    Hello Dmitry.

    Thanks for your reply...

    I don't know to append reflection element so I added it like in your example in all slides.

    However I had to use transitionType: "fade" because "move" kinda gives reflection after one second ... so it just kinda appear and looks bad...

    Thanks a lot ;)

    Fade is cool with me. Cheers!

  3. Support Staff 3 Posted by Dmitry Semenov on 03 Oct, 2012 07:53 PM

    Dmitry Semenov's Avatar

    Send me a link please and I'll take a look what causes that blink.

    Dmitry

  4. 4 Posted by nenad.dvl on 04 Oct, 2012 10:47 AM

    nenad.dvl's Avatar

    It's really fine Dmitry. No need :)

    I am working on localhost tho.

    However when I want to change transition type I will remove gradient light. It's really not a big deal ;)

    Fade looks even better... Cheers.

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