asked on

Easy Fancybox intergration with Quicksand: Need help with fancybox callback!

Hi Everyone,

I've been trying to solve this for months and i'm getting really close so I'm coming to EE to finish it. I am using quicksand filter and easy fancybox plugins on my portfolio site. My issue is that fancybox does not work after using the filters.

I've found what seems to be a good explanation of the solution based on quicksand documentation and some explaining by someone in a forum. Here it is:

What quicksand does (in order to animate elements when reorganizing visible structure) is cloning the elements and injects copy of those into the DOM. Any events attached to those elements are gone after shuffling is done. This is why fancybox didn't work for those elements.

The way to fix this is described in quicksand plugin documentation (section "Integration with other plugins"). It involves passing a callback function to quicksand as a second element. That callback will be executed once the shuffling is done, in our case it will be responsible for finding and re-applying fancybox to elements that were shuffled.

My problem is that I cannot figure out how to execute the callback because I don't understand it completely.

Any help would be extremely appreciated. I need to get this working so I can finish up some details on my site and start showing it to get work.

Thanks!!!

merchantweb

ASKER

My website link is joeymerchant.com/folio

Here is some info that may be helpful for troubleshooting.

Quick link to integration according to quicksand: http://razorjack.net/quicksand/docs-and-demos.html#integration

Attached are my jquery.quicksand.js and quicksand_functions.php files.

Here is the front end code:

<li class="item" data-id="id-<?php echo $item->ID ?>" data-type="<?php foreach ($categories as $c) { echo $c . ' ';}?>" >
                       
                       <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $item->ID ), 'full' ); ?>
						<?php  if (get_option('featured') == 'yes') { ?>
                        

                           <a class="fancybox" rel="portfolio" href="<?php echo $image[0]; ?>">

                        <?php  echo get_the_post_thumbnail($item->ID,array(250,250));  ?></a>
                        

                        <?php } ?>

Open in new window

jquery.quicksand.js
quicksand-functions.php

merchantweb

ASKER

It looks like the js file to look at and modify is main.js

I tried the folowing but it did not work:

// call quicksand and assign transition parameters

		jQueryholder.quicksand(jQueryfilteredData, {

			duration: 800,

			easing: 'easeInOutQuad'
		},function () {
			//reload other plugins
			jquery("a.fancybox").fancybox();

		});

		return false;

	});

Open in new window

ASKER CERTIFIED SOLUTION

merchantweb

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial