› Forums › Easy FancyBox Pro › Easy fancybox open wordpress gallery
Tagged: wordpress native gallery pop up
- This topic has 10 replies, 2 voices, and was last updated 7 years, 5 months ago by
Eric Wistrand.
-
AuthorPosts
-
-
4 April 2016 at 19:59 #6318
Eric Wistrand
ParticipantPurchased the premium extension but cannot get galleries to load. I have gallery set auto rotate and wrapper class set in sections. I’m using acf to build gallery shortcodes and pulling the first image id to create the thumbnail. Here is my current code:
<div class="service-gallery-column"> <?php $image_ids = get_sub_field( 'gallery_images', false, false ); $shortcode = ''; $featured = wp_get_attachment_image( $image_ids[0], 'blog-thumb'); ?> <a class="fancybox"> <?php echo $featured; ?> <!-- <span><?php the_sub_field('gallery_title'); ?></span> --> </a> <div class="fancybox-hidden"> <?php echo do_shortcode( $shortcode ); ?> </div> </div>
It always returns back with: The requested content cannot be loaded. Please try again later.
it seems I may be missing a class or something to that nature.
Thank you in advance for your help.
-
4 April 2016 at 22:39 #6319
RavanH
KeymasterHi Eric, the message “The requested content cannot be loaded” indicates that either there is no media content found on the linked location or the media type is other than expected.
I suspect it is caused by that empty
<a class="fancybox">
anchor in your code. It must have a href attribute for FancyBox to work with.Also, to prevent the first image to be shown twice (it’s linked from the thumbnail and within the gallery) I would suggest to use array_shift to both retrieve and remove the first image id from the gallery.
Both changes would result in code like:
<div class="service-gallery-column"> <?php $image_ids = get_sub_field( 'gallery_images', false, false ); $featured = array_shift( $image_ids ); $shortcode = ''; ?> <a href="<?php echo wp_get_attachment_url( $featured ); ?>" title="<?php the_sub_field('gallery_title'); ?>"> <?php echo wp_get_attachment_image( $featured, 'blog-thumb'); ?> </a> <div class="fancybox-hidden"> <?php echo do_shortcode( $shortcode ); ?> </div> </div>
(caveat: code is untested and might have errors!)
-
4 April 2016 at 22:55 #6320
Eric Wistrand
ParticipantGreat! With a few tweaks I’m almost to what I need. With autogallery set to “All in One” the gallery works. The issue is when I add a second gallery to the page they are both in the light box. Is there a way to seperate them? I’ve tried auto gallery “by section” but that only leaves me with one single image in the gallery ( the one from the url ).
-
5 April 2016 at 09:46 #6321
RavanH
KeymasterIf each gallery is wrapped in a div with class “service-gallery-column” then setting
.service-gallery-column
in the Sections field should create different galleries.Can you share a link to your site? If you wish to keep the URL private you can use the contact form on https://premium.status301.net/contact/
I can take a look and tell you what is needed exactly.
-
5 April 2016 at 14:52 #6322
Eric Wistrand
ParticipantHere is a link to the page. It’s on a staging site right now.
http://155.f37.mwp.accessdomain.com/detroit-weddings/photography/
-
5 April 2016 at 14:52 #6323
-
5 April 2016 at 16:59 #6324
RavanH
KeymasterOK, I see what the problem is: the default
div.gallery
is still in the Sections field. This causes the script to see the image links that are generated by the shortcode as separate entities.Replace the whole
div.gallery, .service-gallery-column
withdiv.service-gallery-column
and it should start working. -
5 April 2016 at 19:24 #6325
Eric Wistrand
ParticipantThat fixed it but broke the basic gallery functions across all of our other basic WP galleries which we need also. If I use more than one class it seems to only use the last class provided. So I need to use .gallery and .service-gallery-column
-
5 April 2016 at 19:48 #6326
RavanH
KeymasterI see what you mean.
It is possible to use two classes (that is what it did before with
.gallery, .service-gallery-column
in the Sections field) but the problem is that the source code that is generated by your custom code snippet there, integrates both these classes. A div with class service-gallery-column to wrap a thumbnail and then a div with class gallery that wraps the gallery items rendered by yourshortcode.
JQuery then tries to make sence his mix of nested divs with critical classes and decides it needs to put the thumbnail and the gallery items into two different groups.
Let me think about another approach which does not use the gallery shortcode… I’ll post a sample here asap.
-
5 April 2016 at 19:57 #6327
RavanH
KeymasterOK, here is a quick sample conversion from my earlier snippet. It needs to be tested of course and then adapted to fit your case. The general idea is to remove the do_shortcode and replace it with a foreach that creates empty anchor tags (invisible links) to the gallery images. There is no need for the fancybox-hidden div anymore since these links are not visible for human eyes.
<div class="gallery"> <?php $images = get_sub_field( 'gallery_images', false, false ); $featured = array_shift( $image_ids ); ?> <a href="<?php echo wp_get_attachment_url( $featured ); ?>" title="<?php the_sub_field('gallery_title'); ?>"> <?php echo wp_get_attachment_image( $featured, 'blog-thumb'); ?> </a> <?php foreach ( $images as $image ) { ?> <a href="<?php echo wp_get_attachment_url( $image ); ?>" title="<?php the_sub_field('gallery_title'); ?>"></a> <?php } ?> </div>
You’ll need to put the
div.gallery
back in the Sections field in this case which will now work for both regular WordPress galleries and your custom generated light box galleries.Hope that helps 🙂
-
6 April 2016 at 14:28 #6328
Eric Wistrand
ParticipantThis worked perfect! Thanks so much for all you help!
-
-
AuthorPosts
- You must be logged in to reply to this topic.