Modify fancybox

Website Templates
1

Hello I’m trying to modify fancybox data-type “gallery” to “iframe” in Videograph - Videographer Portfolio Template.

Here is the existing code block that works as expected:

<div class="col-lg-4 col-md-6 col-sm-6 mix digital-marketing">
                        <div class="portfolio__item">
                            <div class="portfolio__item__video set-bg" data-setbg="img/portfolio/portfolio-2.jpg">
                                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="play-btn" data-fancybox="gallery"><i
                                    class="fa-solid fa-play"></i></a>
                                </div>
                                <div class="portfolio__item__text">
                                    <h4>VIP Auto Tires & Service</h4>
                                    <span>Photography</span>
                                </div>
                            </div>
                        </div>

I’d like the fancy box to open a Google Maps embed like this:

<div class="row portfolio__gallery">
                <div class="col-lg-4 col-md-6 col-sm-6 mix branding">
                    <div class="portfolio__item">
                        <div class="portfolio__item__video set-bg" data-setbg="img/portfolio/portfolio-1.jpg">
                            <a href="https://www.google.com/maps/embed?pb=!4v1779129567096!6m8!1m7!1sCAoSF0NJSE0wb2dLRUlDQWdJREVtOHpqdWdF!2m2!1d41.75470256055112!2d-72.68139004098053!3f303.6651661884895!4f-2.7451479564735877!5f0.7820865974627469" class="play-btn" data-fancybox data-type="iframe" data-width="80%" data-height="80%"><i
                                class="fa-solid fa-play"></i></a>
                            </div>
                            <div class="portfolio__item__text">
                                <h4>Test Map Link</h4>
                                <ul>
                                    <li>eCommerce</li>
                                    <li>Magento</li>
                                </ul>
                            </div>
                        </div>
                    </div>

Not sure why it is not working. Please advise.

Thanks!

1 Like