Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2014-02-18
5
Medium Priority
?
1,037 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

618 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