开发者

Quicksand with prettyPhoto callback

I'm using the jQuery plugin quicksand (http://razorjack.net/quicksand/docs-and-demos.html) and I want to integrate prettyPhoto (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) to be able use with it. At first everything works fine. However when I click on a link to filter the portfolio, prettyphoto script doesn't work 开发者_如何学编程anymore. I added callback for prettyphoto however it somehow breaks the quicksand script. But I managed to add fancybox callback with the same method and it worked fine. Hope someone can help me.

You can see my custom script here: http://elemisdesign.com/custom.js


The issue here is that when Quicksand applies a filter, the ajax call basically fluses your pretty photo script. The solution here is to recall pretty photo in the quicksand callback.

I'm guessing you've since discovered this, since the callback is in the script you link to, but for anyone researching this issue, here's what you should look for. About halfway down the Quicksand script, look for $list.quicksand($sorted_data,etc.... what you need to do is insert the callback inside the third parameter.

$list.quicksand($sorted_data,{$preferences},function(){
 $("a[rel^='prettyPhoto']").prettyPhoto({
         //These are just arbitrary pretty photo preferences, use your own call here
    opacity: 0.20,
    social_tools: false
            });
//rest of callback code
});


I know this post is very old now. But i came across it when searching for some solutions to a problem on a new Wordpress theme i am developing. I found that there was issues between how i was implementing quicksand.js and prettyphoto.js.

In short there was a conflict and my prettyphoto call was causing my quicksand options to be ignored. I used this answer to correct my issue and it works brilliantly. For a little overview, this code is for a gallery. Quicksand is used to add a filter animation to the category links.

I thought i'd post this incase someone on the same mission comes across this question. I hope this helps. Thanks to @brianvanderbush for putting me on the right track. Upvoted.

$container.quicksand($filteredItems, 
{
    // The Duration for animation
    duration: 450,
    // the easing effect when animation
    easing: 'easeInOutCirc',
    // height adjustment becomes dynamic
    adjustHeight: 'dynamic',
    // this function contains my call + options to prettyphoto,
    // i named it lightbox. This was the magic fix.
    }, function() { 
        lightbox(); 
        $(this).thumbanimate();
    }
);
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜