Solved

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

Posted on 2014-02-18
5
871 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
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 count occurrences of each item in an array.

910 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

21 Experts available now in Live!

Get 1:1 Help Now