3

Not sure what is relevant or how deep to explain. I found a nice working gallery from "magnific-popups".

I can get everything to work, but the user must click on a graphic within the gallery div to open the gallery.

I'm wanting the link from a different div to open the gallery but I can't include the gallery div body in the div that includes the link.

I thought of using onclick to refer to a js function that resides on my script.js but I can't get that to work and I'm not sure it's it the correct line to take.

I also thought of setting the href on my link to an id of one of the gallery photo's so clicking the link might open a gallery picture and cause the gallery to open.

Couldn't get that work.

I'd paste some code but I don't know if my question is intelligible (or hopefully simple to answer!)

edit (added code)

Not sure how to format. This is my index.html. I want menu to pop up the gallery but the best I can get is an icon to pop a gallery up from the first div below:

   <nav>
            <div class="row">
                <img src="Resources/img/Pizza_Pi_Logo_Trans.gif" alt="Pizza Pi logo" class="logo">
                <img src="Resources/img/Pizza_Pi_Logo_Trans.gif" alt="Pizza Pi logo" class="logo-black">

                <div class="popup-gallery">
                        <a href="Resources/img/Pizza_Pi_Menu.png" title="The Cleaner"><img src="Resources/img/Pizza_Pi_Menu.png" width="75" height="75"></a>
                        <a href="Resources/img/Pizza_Pi_Menu2.png" title="The Cleaner"></a>
                    </div>

                <ul class="main-nav js--main-nav">

                    <li><a href="#features">HOME</a></li>
                    <li><a href="#cities">PIZZAS</a></li>
                    <li><a href="#plans">SPECIALS</a></li>
                    <li><a href="#form">CONTACT</a></li> 
                    <li><a href="#">MENU</a></li>
                </ul>
             <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>

            </div>     
            </nav>

The script.js file has this:

$('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-img-mobile',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
        },
        image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            titleSrc: function(item) {
                return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
            }
        }
    });

Edit 3: I would like the menu link to pop up the gallery, but if i put the div class="popup-gallery" around the menu link it runs the list/navi display.

11
  • 1
    I can help you if you add the code Commented Feb 15, 2016 at 8:50
  • Added what I think is relevant, thanks for the help!
    – JTicker12
    Commented Feb 15, 2016 at 9:10
  • On, what exactly needs to be clicked, to pop the gallery? for you Commented Feb 15, 2016 at 9:12
  • I would like the menu link to pop up the gallery, but if i put the <div class="popup-gallery"> around the menu link it runs the list/navi display.
    – JTicker12
    Commented Feb 15, 2016 at 9:13
  • try using <ul class="main-nav js--main-nav popup-gallery"> this. I mean replace it with current ul class Commented Feb 15, 2016 at 9:15

1 Answer 1

0

                    <li><a href="#features">HOME</a></li>
                    <li><a href="#cities">PIZZAS</a></li>
                    <li><a href="#plans">SPECIALS</a></li>
                    <li><a href="#Resources/img/Pizza_Pi_Menu.png">CONTACT</a></li>
                    <li class="popup-gallery"><a href="Resources/img/Pizza_Pi_Menu.png" Title="Menu">MENU</a></li></ul>
             <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>

            </div>     


        </nav>

        <div class="popup-gallery">
                <a href="Resources/img/Pizza_Pi_Menu2.png" title="Menu 2"></a>
        </div>
2
  • A little explanation would be helpful. What is your solution and how does it solve the problem?
    – showdev
    Commented Feb 15, 2016 at 17:32
  • When I click menu menu.png opens and the class "popup-gallery" causes the js code for a gallery to fire. The gallery loads menu.png and then whats in the div with the "popup-gallery" thus creating a 2 picture menu.
    – JTicker12
    Commented Feb 15, 2016 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.