Solved

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

Posted on 2014-02-18
5
882 Views
Last Modified: 2014-06-01
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
Comment
Question by:merchantweb
  • 3
5 Comments
 
LVL 1

Author Comment

by:merchantweb
ID: 39867800
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
 
LVL 1

Author Comment

by:merchantweb
ID: 39869875
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
 
LVL 1

Accepted Solution

by:
merchantweb earned 0 total points
ID: 39870965
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

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now