Use RoyalSlider for full screen only

tom's Avatar

tom

20 Aug, 2012 01:47 PM

Hi Dmitry,

Wonder if you could point me in the right direction, I've your new RoyalSlider code which I'm playing with and I want to use it for a Full Screen only gallery - i.e. on a blog article with images going down the page but provide a link to 'view the gallery' which would then launch your plugin to show all the images together in the full screen.

Essentially I'd like to know if it's possible within your options provided to not have a Slider present on screen until a Fullscreen button is clicked?

Sorry to be lazy and ask but figure you can point me quicker than me hacking around in your code for hours.

Cheers

Tom

  1. Support Staff 1 Posted by Dmitry Semenov on 20 Aug, 2012 02:01 PM

    Dmitry Semenov's Avatar

    Hi Tom,

    The easiest way is to use third-party lightbox and load slider via ajax in it. http://dimsemenov.com/plugins/royal-slider/slider-in-lightbox/

    Or hacky way: create slider with blank small images and real big images and hide it via CSS, when required display it an call enterFullscreen public method.

    Dmitry

  2. 2 Posted by tom on 20 Aug, 2012 02:23 PM

    tom's Avatar

    Thanks for the swift reply!

    Good ideas, AJAX probs the better of the two, but I'm chasing a way to just call your plugin on click rather than on doc ready, then also destroy it when exiting full screen.

    Don't mind having the images shown on the page before hand, just not in a slider, and also I don't really want to have duplicate HTML on the page.

    Cheers

    Tom

  3. Support Staff 3 Posted by Dmitry Semenov on 20 Aug, 2012 02:26 PM

    Dmitry Semenov's Avatar

    Than load it via ajax. Or even open it in new popup window, SEO-guy will like it :)

    Dmitry

  4. 4 Posted by tom on 20 Aug, 2012 02:51 PM

    tom's Avatar

    Don't seem to be able to call 'destroy' easily - am I right that it's inherited from the jQuery UI?

    Only seem to get a TypeError of destroy not being a function? Either using it as an instance or a jQuery style $("#gallery-1").destroy();

    Any ideas?

    Thanks again

    Tom

  5. Support Staff 5 Posted by Dmitry Semenov on 20 Aug, 2012 03:01 PM

    Dmitry Semenov's Avatar

    No, it's not inherited from jQuery UI at all.

    To destroy slider:

    $('#gallery-1').royalSlider('destroy', true);
    

    or

    $('#gallery-1').data('royalSlider').destroy(true);
    

    If you set false instead of true slider will disable, but HTML node will be kept in DOM.

    Dmitry

  6. Dmitry Semenov closed this discussion on 21 Aug, 2012 12:20 PM.

  7. tom re-opened this discussion on 22 Aug, 2012 02:45 PM

  8. 6 Posted by tom on 22 Aug, 2012 02:45 PM

    tom's Avatar

    Hi Dmitry,

    Sorry if i'm being stupid but I still can't get the destroy() to work...

    Been trying it in both our script and also the console of the inspector within Chrome to no luck. It returns the html of the slider but doesn't remove/disable it.

    Any ideas? Should I post an example somewhere?

    Thanks again for your help with this.

    Cheers

    Tom

  9. Support Staff 7 Posted by Dmitry Semenov on 22 Aug, 2012 02:51 PM

    Dmitry Semenov's Avatar

    Hi,

    This doesn't work?

    jQuery('.royalSlider').royalSlider('destroy', true);
    

    Dmitry

  10. 8 Posted by tom on 22 Aug, 2012 03:03 PM

    tom's Avatar

    Weirdly no, it just gives me a copy of the HTML in the console, screenshot attached...

    The file is serving locally rather than on a server but there's no security issue with that so can't see it making much difference.

    Can make a proper test file and make a live URL for you to see if that helps?

    Cheers

    Tom

  11. Support Staff 9 Posted by Dmitry Semenov on 22 Aug, 2012 03:09 PM

    Dmitry Semenov's Avatar

    What version are you using? Destroy() method was added in 9.1.2 http://dimsemenov.com/plugins/royal-slider/changelog/

    Because I'm trying this code on sliders online and everything is removed properly... - http://dimsemenov.com/plugins/royal-slider/

    Dmitry

  12. 10 Posted by tom on 22 Aug, 2012 03:29 PM

    tom's Avatar

    So sorry, had version 9.0 which I downloaded last week (I thought) — you're too fast with your updates! ;-)

    Sorry to waste your time!

    Hang on though, destroy is working when set to true but if i use false (to keep the dom) it fails silently... I'm correct that it should removed the slider and keep the html in page?

    Cheers

    Tom

  13. Support Staff 11 Posted by Dmitry Semenov on 22 Aug, 2012 03:32 PM

    Dmitry Semenov's Avatar

    No worries, I should have asked this at start :)

    Check this comment about true/false http://help.dimsemenov.com/discussions/problems/18-use-royalslider-...

  14. 12 Posted by tom on 22 Aug, 2012 03:34 PM

    tom's Avatar

    If I use the false option on my file or any of the online demos the slider stays active... shouldn't it disable and the relevant css classes etc be removed from the DOM?

    Tom

  15. Support Staff 13 Posted by Dmitry Semenov on 22 Aug, 2012 05:06 PM

    Dmitry Semenov's Avatar

    In theory it should return to default. But because it's complex to "roll-back" to default state and it's unefficient to save slider starting HTML in memory, after you call destroy() slide only disables events and stops timers that cannot be stopped by simple node removal.

    I close this thread, if you have another question, please create new.

    Dmitry

  16. Dmitry Semenov closed this discussion on 22 Aug, 2012 05:06 PM.

Comments are currently closed for this discussion. You can start a new one.

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