Easy fancybox open wordpress gallery

[Eric Wistrand]

Purchased 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.

[RavanH]

Hi 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!)

[Eric Wistrand]

Great! 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 ).

[RavanH]

If 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.

[Eric Wistrand]

Here is a link to the page. It’s on a staging site right now.

http://155.f37.mwp.accessdomain.com/detroit-weddings/photography/

[Eric Wistrand]

http://155.f37.mwp.accessdomain.com/detroit-weddings/photography/

[RavanH]

OK, 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 with div.service-gallery-column and it should start working.

[Eric Wistrand]

That 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

[RavanH]

I 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 your shortcode.

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.

[RavanH]

OK, 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 🙂

[Eric Wistrand]

This worked perfect! Thanks so much for all you help!

[Author]

Posts