How to use fancybox inline content

  • Resolved alederodesign

    (@alederodesign)


    9 years, 2 months ago

    Hello,
    i need to create a button that i click and open a fancybox gallery.
    I put this code:
    <div style=”display:none” id=”galleria-cucina”>[gallery ids="283,282,281,280,279"]</div>
    <p style=”text-align: center;”>GUARDA FOTO GALLERY</p>

    But of course with display:none i can’t open the images when i click the button. So ho to open the gallery trough a button without showing the gallery images?

    Thanks a lot
    Alessandra

Viewing 1 replies (of 1 total)
  • Rolf Allard van Hagen

    (@ravanh)

    9 years, 2 months ago

    Hi @alederodesign let’s say all the images that you want to show are there in your current gallery shortcode [gallery ids="283,282,281,280,279"]

    First, go to your Media > Gallery page and find the image that you wish to open on first click. Open that image and copy the full image URL (on the right side) and take note of the image ID number (you can see it in the browser address bar).

    Then go to Settings > Media and make sure the Autogallery option is set to “All in one gallery”.

    Now, go back to the page where your remove the ID that corresponds with your chosen image from the gallery shortcode.

    Next, move the paragraph with GUARDA FOTO GALLERY to above the gallery shortcode div. Then select the text GUARDA FOTO GALLERY with your cursor and hit the Link button in the editor bar. Paste the URL of your chosen image and hit Enter.

    Finally, save your page and go view it from the front end. The GUARDA FOTO GALLERY should now have become a link that opens the first image in the light box. The arrow right should take you to all the other images in the gallery.

    Hope that helps 🙂

Viewing 1 replies (of 1 total)

The topic ‘How to use fancybox inline content’ is closed to new replies.

Tags