Easy fancybox open wordpress gallery

Home Forums Easy FancyBox Pro Easy fancybox open wordpress gallery

This topic contains 10 replies, has 2 voices, and was last updated by  Eric Wistrand 1 year ago.

  • Author
    Posts
  • #6318

    Eric Wistrand
    Participant

    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 = '[gallery link="file" ids="' . implode(',', $image_ids) . '"]';
    		$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.

  • #6319

    RavanH
    Keymaster

    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 = '[gallery link="file" ids="' . implode(',', $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>
    	<div class="fancybox-hidden">
    		<?php echo do_shortcode( $shortcode ); ?>
    	</div>
    </div>
    

    (caveat: code is untested and might have errors!)

  • #6320

    Eric Wistrand
    Participant

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

  • #6321

    RavanH
    Keymaster

    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.

  • #6322

    Eric Wistrand
    Participant

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

    Wedding Photography Michigan

  • #6323

    Eric Wistrand
    Participant
  • #6324

    RavanH
    Keymaster

    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 [gallery] shortcode as separate entities.

    Replace the whole div.gallery, .service-gallery-column with div.service-gallery-column and it should start working.

  • #6325

    Eric Wistrand
    Participant

    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

  • #6326

    RavanH
    Keymaster

    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 [gallery ...] 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.

  • #6327

    RavanH
    Keymaster

    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 🙂

  • #6328

    Eric Wistrand
    Participant

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

You must be logged in to reply to this topic.