How to replace controls/graphics to pure text elements?

info's Avatar

info

26 Sep, 2012 04:30 PM

Hi,

is there any simple way to change the graphics used within the slider to pure html elements.
How would i go about doing this?

What i want to do is to have prev/next as text(not arrows), open/close fullscreen and numbered bullets.
Basically i am trying to change all graphics/background images to pure html text.

Edit:
I am thinking that this way the slider need not be dependent on set colour/pixels graphics, but can rather use for example @font-face icons etc. This would make the slider more suitable for scaling etc.

Thanks

O

  1. Support Staff 1 Posted by Dmitry Semenov on 26 Sep, 2012 06:37 PM

    Dmitry Semenov's Avatar

    Hi,

    You may simply append all content that you need directly after slider initialization.

    Dmitry

  2. 2 Posted by info on 27 Sep, 2012 10:59 AM

    info's Avatar

    Hi Dmitry,

    and thank you for the reply.

    I am not very good with javascript, do you think you could post an example please?

    Thanks :)

  3. 3 Posted by info on 27 Sep, 2012 06:46 PM

    info's Avatar

    Hi again,

    so i found some ways of doing these things here:
    http://help.dimsemenov.com/discussions/problems/112-the-html-markup...

    But, can you explain how to get a function like this, "open full screen" and then make the "close full screen" after the full screen is active:

    slider.find('.rsFullscreenIcn').append('Full screen / Close');
    

    Another question is, how would i go about placing the full screen button, and the prev/next links into any div or link outside of the slider?
    I am trying to keep the functions in separate divs.

    Hop you can help :)

  4. Support Staff 4 Posted by Dmitry Semenov on 27 Sep, 2012 07:54 PM

    Dmitry Semenov's Avatar

    You may disable default arrows and use slider API to use your own arrows which you can place anywhere you wish, same with fullscreen button. Same with fullscreen button.

    I'm sorry, if you don't have JS knowledge, I can't assist you much here. You may find example of custom arrows here - http://dimsemenov.com/plugins/royal-slider/slider-in-laptop/

    Dmitry

  5. 5 Posted by info on 27 Sep, 2012 08:12 PM

    info's Avatar

    Thank you for your tips, i think i understand and i will try this out.
    I also have to say this slider is really nice!

    Best

    O

  6. 6 Posted by info on 30 Sep, 2012 04:55 PM

    info's Avatar

    Hi again,

    i just wanted to ask one more thing related to this.

    I have managed to place the desired controls (prev, next, counter, fullscreen button etc) in to a separate div using your tips.

    But, the problem with having separate divs with controls and captions is that they do not show in full screen mode.

    I really like the feature with .rsFullScreen class to the elements, but is there a way to get around this when having the elements in separate div(s) without losing the features like the "left/right reaches end of slide" and so on?

    Simply explained: A separate div with for example captions that also open in full screen mode.

    Thanks

  7. Support Staff 7 Posted by Dmitry Semenov on 30 Sep, 2012 06:27 PM

    Dmitry Semenov's Avatar

    Hi,

    You may use slider API to change CSS or DOM position of your container with controls. E.g.:

    slider.ev.on('rsEnterFullscreen', function() {
        
    });
    slider.ev.on('rsExitFullscreen', function() {
        
    });
    

    Dmitry

  8. 8 Posted by sputnik on 09 Oct, 2013 12:49 PM

    sputnik's Avatar

    Hi @info. Please could you explain how you added custom controls. I'm trying to have pure text-only controls and I'm struggling with javascript.

    Your help would be much appreciated!

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