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.
<ul class="main-nav js--main-nav popup-gallery">
this. I mean replace it with current ul class