thumbnail nav only / fullscreen

peter.realis's Avatar

peter.realis

27 Mar, 2013 11:19 AM

Hi,
i wanna show thumbnails only, click on a thumbnail must open the image in fullscreen mode.
Would you provide an example how to do that, plz?
Thx

  1. Support Staff 1 Posted by Dmitry Semenov on 27 Mar, 2013 09:56 PM

    Dmitry Semenov's Avatar

    Hi,

    To implement such layout, I recommend to create thumbnails manually and initialize and create slider dynamically only after you click on one of them.

    http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-str...

    http://dimsemenov.com/plugins/royal-slider/documentation/#api

  2. 2 Posted by izaphy2 on 28 Mar, 2013 09:01 AM

    izaphy2's Avatar

    Hi, i'm looking for something like this to. It would be great to have a strip of sliding thumbnails of projects and clicking on one of them would open the enlarged images of the project, in a slider. In your answer the thumbnails would't be sliding or am i wrong?

  3. Support Staff 3 Posted by Dmitry Semenov on 28 Mar, 2013 08:29 PM

    Dmitry Semenov's Avatar

    Yep, in my solution thumbnails aren't sliding.

    If you wish to hide main slide area and leave just thumbnail, the only options is to apply CSS hacks (e.g. display:none to slides). But main slides will be loaded and silently animated anyway, so I'm not sure if this is appropriate solution.

    Best,

    Dmitry

  4. 4 Posted by thetoolsmith on 11 Apr, 2013 09:36 PM

    thetoolsmith's Avatar

    I'm also looking for a similar solution. I've made some progress but still have a few questions.

    1. How do I bind my own click event when a thumb is clicked?
    2. How do I remove the green highlight for selected thumbnails?

    Thanks,
    -Paul

  5. Support Staff 5 Posted by Dmitry Semenov on 12 Apr, 2013 09:16 PM

    Dmitry Semenov's Avatar

    @thetoolsmith

    1. You can just bind jQuery click event after slider initialization.
    2. Any styling can be changed via CSS.

    Dmitry

  6. 6 Posted by efs on 19 Jul, 2015 06:17 PM

    efs's Avatar

    I'm displaying my thumbnails manually above a hidden slider element already initialized.

    How to open the slider full screen for the image selected? Then user can browse all images in full screen.

    What is the API call for a particular image that will open the slider full-screen on that image?

    Thanks,

    -E

  7. Support Staff 7 Posted by Dmitry Semenov on 19 Jul, 2015 06:53 PM

    Dmitry Semenov's Avatar

    @efs, enter fullscreen manually via javascript, init and stretch slider to 100% width and height of window and set position fixed on it. http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-str...

  8. 8 Posted by efs on 20 Jul, 2015 04:57 AM

    efs's Avatar

    Thanks, Dmitry, but how do I open a specific slide when entering full screen manually? I have 10 small images displayed -- when I click on one, I will unhide the slider already initialized, BUT how to open the slider with the right image (not from the beginning)?

    Thanks.

  9. Support Staff 9 Posted by Dmitry Semenov on 20 Jul, 2015 12:37 PM

    Dmitry Semenov's Avatar

    @efs, initialize slider only after you need to display it and use startSlideId option, or use this method http://help.dimsemenov.com/discussions/problems/1373-gotosilent-ver...

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