Forums

magnific popup as gallery

Permalink
Hello,
I have Magnific popup working as a gallery fine. The images are pulled in using API (xml) and I have set it so that it skips the first image (as this is used as the feature image on the page).

My problem.

At the moment, I have thumbnails. I want to keep these, but I'd also like a button that opens the gallery - just as the gallery would open when a user clicks on the first thumbnail.

Here's my test pagehttp://gotimetrekkers.com/holidays/destinations/europe/uk/richard-i...

Thanks in advance

php
<a class="button expand popup-gallery" style="margin-bottom:0px !Important;" href="#">Gallery<br>
<?php 
$counter = 0;
foreach (array_combine($imageurls, $imagedescs) as $imageurl => $imagedesc) { 
   if($counter++ < 1) continue;
      ?> <a href="<?php echo $imageurl;?>" title="<?php echo $imagedesc;?>"><img style="padding:5px;" src="<?php echo $imageurl;?>" height="auto" width="30%"></a><?php;}?>   
</a>
</a>
<div style="width:100% !Important; height:auto; margin-top:0px !Important; margin-bottom:1.5rem;">
<a class="popup-gallery" href=""/></a>
</div>


javascript I use from magnific website
<script type="text/javascript">
     $(document).ready(function() {
   $('.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) {
Viewing 15 lines of 21 lines. View entire code block.
 
mnakalay replied on at Permalink Reply
mnakalay
Hello,
Do do what you want you need a div with a class name wrapping all the thumbnails.
Then you need to call Magnific popup on that div and specify that it's a gallery ike so:
$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  gallery:{enabled:true}
  // other options
});


There is hoxwever something that seems very wrong to me in your code. You have one <a> tag wrapping the entire gallery. That can't be right. Links inside a link, you're bound to have problems.
PJSAndo replied on at Permalink Reply
Thanks, I changed the links issue. I'm no coder :)

I'll try the 'Gallery' link later.

I have another related issue though you may be able to help with. Although the 1st thumbnail does not show (as required) in the sidebar (where the block is placed) the pop-up gallery still counts 10 (bottom right corner of pop-up, below image) but it should be counting n-1 (i.e. 9).

test pagehttp://gotimetrekkers.com/holidays/destinations/europe/uk/richard-i...

Any ideas?
Thanks

<div style="text-align:center; background-color:#f7f7f7;"><h3 style="margin-bottom:0px !Important; padding:0.75em;">Gallery</h3></div>
<div class="popup-gallery" style="text-align:center; background-color:#f7f7f7;">
<?php 
$counter = 0;
foreach (array_combine($imageurls, $imagedescs) as $imageurl => $imagedesc) { 
   if($counter++ == 0) continue; 
      ?> <a href="<?php echo $imageurl;?>" title="<?php echo $imagedesc;?>"><img style="padding:5px;" src="<?php echo $imageurl;?>" height="auto" width="100px"></a><?php;?><?php } ?>
<div style="width:100% !Important; height:auto; margin-top:0px !Important; margin-bottom:1.5rem;">
<a class="popup-gallery" href=""/></a>
</div>
</div>
<script type="text/javascript">
     $(document).ready(function() {
   $('.popup-gallery').magnificPopup({
      delegate: 'a',
Viewing 15 lines of 32 lines. View entire code block.
jro replied on at Permalink Reply
can you check my website not working pop up image
http://techntip.com/windows-10-enterprise-free-90-day-evaluation-fo...
when i click on the image The image #1 could not be loaded. error message
MrKDilkington replied on at Permalink Reply
MrKDilkington
Do not visit the link jro pasted, it isn't a concrete5 site and looks to be spam.
mnakalay replied on at Permalink Reply
mnakalay
You know your site is in maintenance mode so I can't really see anything except the page announcing it'll be live soon.
PJSAndo replied on at Permalink Reply
Re the last email.
Apologies for that.
I've temporarily deactivated maintenance mode.
If you look here
http://gotimetrekkers.com/holidays/destinations/europe/uk/stoneheng...
you'll see that the popup gallery shows 1 of 10 etc (rather than 1 of 9 etc) and tried to load the 10th image, which I don't want....

PS - the page may take a while to load as all cache settings are off and data are coming from 3rd party website
mnakalay replied on at Permalink Best Answer Reply
mnakalay
these 3 lines
<div style="width:100% !Important; height:auto; margin-top:0px !Important; margin-bottom:1.5rem;">
<a class="popup-gallery" href=""/></a>
</div>

are throwing off your counter. I don't know why you have it there as it's just an invisible link that doesn't do anything so if you can just delete it altogether, it's better.

If you need it for some reason, just change the link's class name so it's not popup-gallery as that class name is used for your gallery
PJSAndo replied on at Permalink Reply
Tremendous, that worked.
Many thanks for that!
mnakalay replied on at Permalink Reply
mnakalay
You're very welcome