Popup to fullscreen Gallery from element outside the gallery?

Jeremy's Avatar

Jeremy

13 Apr, 2021 10:07 PM

Suppose I had the markup below. Is it possible to open the gallery in fullscreen mode when an element that's OUTSIDE the gallery is clicked?

I want to create a masonry gallery that shows larger images, and when somebody clicks one of the "masonry" images, I want to open the gallery with that image (image1/image2 etc).

Maybe deeplinking could be used to accomplish this?

<div id="myRoyal" class="royalSlider">
   <img src="url.com/img1.jpg">
   <img src="url.com/img2.jpg">
   <img src="url.com/img3.jpg">
</div>

<!-- A masonry gallery. Clicking the images will open the gallery in full-screen mode -->
<div id="myMasonryGallery"> 
 <a href="#">    <img src="url.com/img1.jpg"> </a>
 <a href="#">    <img src="url.com/img2.jpg"> </a>
 <a href="#">    <img src="url.com/img3.jpg"> </a>

</div>
  1. Support Staff 1 Posted by Dmitry Semenov on 14 Apr, 2021 04:07 AM

    Dmitry Semenov's Avatar

    Hello,

    You may use enterFullscreen method for this, for example:

    somebutton.onclick = function() {
      $('.royalSlider').royalSlider('enterFullscreen');
    };
    
  2. 2 Posted by Jeremy on 15 Apr, 2021 12:59 AM

    Jeremy's Avatar

    But from what I can tell, that will simply enter fullscreen on the "first" slide, correct? Could you use a href="img-3" or whatever is set as the RoyalSlider deeplinking prefix?

  3. Support Staff 3 Posted by Dmitry Semenov on 15 Apr, 2021 06:42 AM

    Dmitry Semenov's Avatar

    It'll open fullscreen on the current slide, you may adjust the first slide via startSlideId option or methods like goTo, next, prev.

  4. 4 Posted by Jeremy Rangel on 15 Apr, 2021 01:46 PM

    Jeremy Rangel's Avatar

    As I understand it, startSlideId will change the first slide, but can't do it dynamically.

    What I am after is if a user clicks on a href="#slide-1 .outside-the-slider" then the Gallery will open on #slide-1. If they click on "#slide-2 .outside-the-slider" then the Gallery opens on #slide-2, and so forth.
    <!-- this is the actual slider -->





    <!-- these are some images outside the slider that will open the gallery -->
  5. Support Staff 5 Posted by Dmitry Semenov on 16 Apr, 2021 04:23 AM

    Dmitry Semenov's Avatar

    You'll need to use goTo method then, if you need it without animation this may help - http://help.dimsemenov.com/discussions/problems/1373-gotosilent-ver...

  6. 6 Posted by Jeremy Rangel on 16 Apr, 2021 05:51 PM

    Jeremy Rangel's Avatar

    So then the button would call goTo and enterFullscreen? And it would then open the gallery at the goTo(x) slide?

  7. Support Staff 7 Posted by Dmitry Semenov on 17 Apr, 2021 02:53 AM

    Dmitry Semenov's Avatar

    Yes, you may also need to listen for events like rsAfterSlideChange to trigger fullscreen at the right time.

  8. 8 Posted by Jeremy Rangel on 18 Apr, 2021 03:01 PM

    Jeremy Rangel's Avatar

    So, then let's say I want the slider hidden unless it's fullscreen. Should I just use #myslider:not(.Fullscreen) {display:none}?

  9. Support Staff 9 Posted by Dmitry Semenov on 18 Apr, 2021 04:55 PM

    Dmitry Semenov's Avatar

    A more efficient way would be to disable the fullscreen feature completely and initialize and stretch the slider to 100% width/height of window manually. So you create a slider only after a user clicks on the button.

  10. 10 Posted by Jeremy on 28 Apr, 2021 08:56 PM

    Jeremy's Avatar

    Doing it that way, what would the code look like to create the slider?

    As I have it now, I have the script added at the bottom of my (wordpress) template file, so the slider gets initialized as soon as the document is ready.

    How would I close the slider after it's been opened and it's covering the whole window? Just add a button to display:none the slider?

  11. Support Staff 11 Posted by Dmitry Semenov on 29 Apr, 2021 09:28 AM

    Dmitry Semenov's Avatar

    Can't assist you with the exact code, but this might be helpful http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-str...

    How would I close the slider after it's been opened and it's covering the whole window? Just add a button to display:none the slider?

    Yes, you'll need to create a custom button.

  12. 12 Posted by Jer on 29 Apr, 2021 02:23 PM

    Jer's Avatar

    The CSS to size the slider seems pretty straightforward.

    I guess what I am unclear about is the "A more efficient way would be to disable the fullscreen feature completely and initialize and stretch the slider to 100% width/height of window manually. So you create a slider only after a user clicks on the button."

    part.

    What would actually initialize the slider? Is that just as simple as instead of using jQuery(document)ready just create a button to run all of those parameters?

  13. Support Staff 13 Posted by Dmitry Semenov on 29 Apr, 2021 05:58 PM

    Dmitry Semenov's Avatar

    The plugin is initialized via:

    $('.gallery').royalSlider({
      // options
    });
    

    (where .gallery is the CSS selector of the slider).

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