Ask your JavaScript questions! Pay money and get answers fast! (more info)

Jquery Quicksand Filter and Jquery PrettyPhoto JavaScript

  • REFUNDED

I'm testing quicksand script ([[LINK href="http://razorjack.net/quicksand/"]]http://razorjack.net/quicksand/[[/LINK]]) to filter some image.

I need to use this quicksand script toghetwith a jquery lightbox clone script to zoom images ( PrettyPhoto [[LINK href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/"]]http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/[[/LINK]]

I had implemented the script with some image ([[LINK href="http://www.hostingcubo.com/quicktest.php"]]http://www.hostingcubo.com/quicktest.php[[/LINK]])
As you can see there are circle, pentagon and triagle with different color.

The filters are working fine tnx to this inline script found on the quicksand website:

<script type="text/javascript" charset="utf-8">
(function($) {
$.fn.sorted = function(customOptions) {
var options = {
reversed: false,
by: function(a) {
return a.text();
}
};
$.extend(options, customOptions);

$data = $(this);
arr = $data.get();
arr.sort(function(a, b) {

var valA = options.by($(a));
var valB = options.by($(b));
if (options.reversed) {
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
} else {
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
}
});
return $(arr);
};

})(jQuery);

$(function() {

var read_button = function(class_names) {
var r = {
selected: false,
type: 0
};
for (var i=0; i < class_names.length; i++) {
if (class_names[i].indexOf('selected-') == 0) {
r.selected = true;
}
if (class_names[i].indexOf('segment-') == 0) {
r.segment = class_names[i].split('-')[1];
}
};
return r;
};

var determine_sort = function($buttons) {
var $selected = $buttons.parent().filter('[class*="selected-"]');
return $selected.find('a').attr('data-value');
};

var determine_kind = function($buttons) {
var $selected = $buttons.parent().filter('[class*="selected-"]');
return $selected.find('a').attr('data-value');
};

var $preferences = {
duration: 800,
easing: 'easeInOutQuad',
adjustHeight: false
};

var $list = $('#list');
var $data = $list.clone();

var $controls = $('ul.splitter ul');

$controls.each(function(i) {

var $control = $(this);
var $buttons = $control.find('a');

$buttons.bind('click', function(e) {

var $button = $(this);
var $button_container = $button.parent();
var button_properties = read_button($button_container.attr('class').split(' '));
var selected = button_properties.selected;
var button_segment = button_properties.segment;

if (!selected) {

$buttons.parent().removeClass('selected-0').removeClass('selected-1').removeClass('selected-2').removeClass('selected-3').removeClass('selected-4').removeClass('selected-5').removeClass('selected-6');
$button_container.addClass('selected-' + button_segment);

var sorting_type = determine_sort($controls.eq(1).find('a'));
var sorting_kind = determine_kind($controls.eq(0).find('a'));

if (sorting_kind == 'all') {
var $filtered_data = $data.find('li');
} else {
var $filtered_data = $data.find('li.' + sorting_kind);
}

if (sorting_type == 'size') {
var $sorted_data = $filtered_data.sorted({
by: function(v) {
return parseFloat($(v).find('span.colore').text());
}
});
} else {
var $sorted_data = $filtered_data.sorted({
by: function(v) {
return $(v).find('strong').text().toLowerCase();
}
});
}

$list.quicksand($sorted_data, $preferences);

}

e.preventDefault();
});

});

var high_performance = true;
var $performance_container = $('#performance-toggle');
var $original_html = $performance_container.html();

$performance_container.find('a').live('click', function(e) {
if (high_performance) {
$preferences.useScaling = false;
$performance_container.html('CSS3 scaling turned off. Try the demo again. <a href="#toggle">Reverse</a>.');
high_performance = false;
} else {
$preferences.useScaling = true;
$performance_container.html($original_html);
high_performance = true;
}
e.preventDefault();
});
});
</script>



I had also included prettyphoto script for the lightbox effect.

The problem is that the prettyphoto script stop working after I use the filter.
I understad that this is caused by ajax reload content.
I need to "reload" prettyphoto as explained also on the prettyphoto official forum [[LINK href="http://forums.no-margin-for-errors.com/discussion/757/force-prettyphoto-to-refresh-when-content-changes-dynamically/p1
"]]http://forums.no-margin-for-errors.com/discussion/757/force-prettyphoto-to-refresh-when-content-changes-dynamically/p1
[[/LINK]]

I tried with

function reloadPrettyPhoto() {
$(".pp_pic_holder").remove();
$(".pp_overlay").remove();
$(".ppt").remove();
$("a[rel^='prettyPhoto']").prettyPhoto();

}


and I call the function around the line 112, after

$list.quicksand($sorted_data, $preferences);

}
// Try to reload prettyphoto
reloadPrettyPhoto();
e.preventDefault();

});

...naturally without results :(

I tryed also with:


jQuery.ajaxStop(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});


But nothing.

I cannot understand how to use on my script

jQuery.ajaxStop(function(){
// Code to be run.
});


as also a [[LINK href="http://forums.no-margin-for-errors.com/discussion/comment/1706/#Comment_1706"]]forum user recommend here[[/LINK]]

Tnx in advance for your help!

Answers (0)

No answers yet.