Grow your CSS skills. Land your dream job.

Quicksand prettyPhoto conflict

  • # June 26, 2013 at 5:38 pm

    Hi, everyone

    I have to combine http://razorjack.net/quicksand/ and http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto, but there is some problem after quicksand rearrange the page lightbox(prettyPhoto) don’t works.

    Here is thread on http://stackoverflow.com/questions/5197776/jquery-quicksand-filter-prettyphoto-not-working-after-ajax-loading-content

    but it doesn’t help me here is my js

    $(document).ready(function(){

    // get and assign the holder element to the
    // $holder varible for use later
    var $holder = $(‘ul#portfolio’);

    // clone all items within the pre-assigned $holder element
    var $data = $holder.clone();

    // attempt to call Quicksand when a filter option
    // item is clicked
    $(‘#filters li a’).click(function(e) {
    // assign the class of the clicked filter option
    // element to our $filterType variable
    var $filterType = $(this).attr(‘class’);
    if ($filterType == ‘all’) {
    // assign all li items to the $filteredData var when
    // the ‘All’ filter option is clicked

    var $filteredData = $data.children(‘li’);
    }
    else {
    // find all li elements that have our required $filterType
    // values for the data-type element
    var $filteredData = $data.find(‘li[data-type=' + $filterType + ']‘);
    }

    // call quicksand and assign transition parameters
    $holder.quicksand($filteredData, {
    duration: 800,
    easing: ‘swing’
    });
    });

    picHoverInit();
    prettyPhotoInit();
    });
    function picHoverInit() {
    $(‘figure’).live({
    mouseenter:
    function() {
    $(this).find(‘ul’).animate({left:’0px’},200);
    },
    mouseleave:
    function() {
    $(this).find(‘ul’).animate({left:’-161px’},200);
    }
    });
    }

    function prettyPhotoInit() {
    $(“a[rel^='prettyPhoto']“).prettyPhoto();
    };

    Could somebody fix the problem, very interesting where is a bug. Thanks

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".