URL to start slideshow

  • Resolved Stathi

    (@stathi)


    3 years, 1 month ago

    Hi. I love FancyBox.

    I use PHP and I know how to construct a slideshow using images, which you then can click and launch the slideshow.

    However, I need to do the same but use a url, which will contain the html to launch it. I will enclose it in a <div class=”gallery” style=”display:none”> so that it does not show the image. When the url is clicked, it will launch the constructed slideshow. Here is some code:

    
<a href="url-of-image" title="titletext" rel="sometext">slideshow</a>
<div class="gallery" style="display:none">
<a href="url-of-image" title="titletext" rel="sometext"><img src="url-of-image" /></a>
</div>

    I have spent hours trying, but no luck. Unless I substitute “slideshow” with an “<img src=…”, I cannot launch the slideshow.

    Please help me.

    • This topic was modified 3 years, 1 month ago by Stathi.
    • This topic was modified 3 years, 1 month ago by Stathi.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Stathi

    (@stathi)

    Mind you that there will be multiple images, but just one link to launch the slideshow.

    • This reply was modified 3 years, 1 month ago by Stathi.
    Thread Starter Stathi

    (@stathi)

    Found answer here: https://fancyapps.com/docs/ui/fancybox/react

    <Fancybox options={{ infinite: true }}>
<p><button data-fancybox="gallery" data-src="https://1.jpg" className="button button--secondary">Click for slideshow</button></p>
</Fancybox>
<div style="display:none">
<p><button data-fancybox="gallery" data-src="https://2.jpg" className="button button--secondary">text</button></p>
<p><button data-fancybox="gallery" data-src="https://3.jpg" className="button button--secondary">text</button></p>
<p><button data-fancybox="gallery" data-src="https://4.jpg" className="button button--secondary">text</button></p>
</div>
    Thread Starter Stathi

    (@stathi)

    It can be like this, too. However, I am still looking to see if I can launch with a URL instead of a button.

    <Fancybox options={{ infinite: true }}>
<p><button data-fancybox="gallery" data-src="https://1.jpg" className="button button--secondary">Click for slideshow</button></p>
</Fancybox>
<div style="display:none">
<a href="https://2.jpg"><img src="https://2.jpg"></a>
<a href="https://3.jpg"><img src="https://3.jpg"></a>
<a href="https://4.jpg"><img src="https://4.jpg"></a>
</div>
    Plugin Support beatrice12

    (@beatrice12)

    Hi @stathi,

    Thank you for reaching out to us!

    To open Fancybox from a link you would need to create a click event, initialize Fancybox , add the images URL ( the first two are images without caption , the last 2 are images with a caption ) .
    Alternatevely , you found this solution: 

    <Fancybox options={{ infinite: true }}>
<p><button data-fancybox="gallery" data-src="https://1.jpg" className="button button--secondary">Click for slideshow</button></p>
</Fancybox>
<div style="display:none">
<a href="https://2.jpg"><img src="https://2.jpg"></a>
<a href="https://3.jpg"><img src="https://3.jpg"></a>
<a href="https://4.jpg"><img src="https://4.jpg"></a>
</div>

    Instead of using a <p><button> </p> </button> tag , you can try using an <a> tag to begin wit. That would work.

    Warmly,
    Beatrice.

    • This reply was modified 3 years, 1 month ago by beatrice12.
    • This reply was modified 3 years, 1 month ago by beatrice12.
    Thread Starter Stathi

    (@stathi)

    Hi Beatrice. Thank you so much. However, I still cannot pass a caption. Is this correct?

    <Fancybox options={{ infinite: true }}>
<p><button data-fancybox="gallery" data-src="https://1.jpg" className="button button--secondary">Click for slideshow</button></p>
</Fancybox>
<div style="display:none">
<a href="https://2.jpg" title="text1"><img src="https://2.jpg"></a>
<a href="https://3.jpg" title="text2"><img src="https://3.jpg"></a>
<a href="https://4.jpg" title="text3"><img src="https://4.jpg"></a>
</div>
    Plugin Support beatrice12

    (@beatrice12)

    Hi @stathi,

    Can you please let us know if your fancybox works or only the captions don’t work? Can you also send us an URL so we can take a closer look?

    Thank you,
    Beatrice.

    Thread Starter Stathi

    (@stathi)

    Hi Beatrice. It works. Thank you for your help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘URL to start slideshow’ is closed to new replies.