• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1169
  • Last Modified:

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!!!
0
merchantweb
Asked:
merchantweb
  • 3
1 Solution
 
merchantwebAuthor Commented:
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
0
 
merchantwebAuthor Commented:
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

0
 
merchantwebAuthor Commented:
I figured it out... used a lowercase q in jQuery rather than uppercase

this:
//reload other plugins
			jquery("a.fancybox").fancybox();

Open in new window


should be this:
//reload other plugins
			jQuery("a.fancybox").fancybox();

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now