By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,534 Members | 1,830 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,534 IT Pros & Developers. It's quick & easy.

Jquery Quicksand filter + prettyphoto not working after ajax loading content

P: 1
Hello! I'm testing quicksand script (http://razorjack.net/quicksand/) to filter some image.
I had implemented the script with some image (http://www.hostingcubo.com/quicktest.php) 
As you can see there are circle, pentagon and triagle with different color. 
The filter are working fine tnx to this inline script:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" charset="utf-8">
  2.     (function($) {
  3.         $.fn.sorted = function(customOptions) {
  4.             var options = {
  5.                 reversed: false,
  6.                 by: function(a) {
  7.                     return a.text();
  8.                 }
  9.             };
  10.             $.extend(options, customOptions);
  11.  
  12.             $data = $(this);
  13.             arr = $data.get();
  14.             arr.sort(function(a, b) {
  15.  
  16.                 var valA = options.by($(a));
  17.                 var valB = options.by($(b));
  18.                 if (options.reversed) {
  19.                     return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;              
  20.                 } else {        
  21.                     return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;  
  22.                 }
  23.             });
  24.             return $(arr);
  25.         };
  26.  
  27.     })(jQuery);
  28.  
  29.     $(function() {
  30.  
  31.       var read_button = function(class_names) {
  32.         var r = {
  33.           selected: false,
  34.           type: 0
  35.         };
  36.         for (var i=0; i < class_names.length; i++) {
  37.           if (class_names[i].indexOf('selected-') == 0) {
  38.             r.selected = true;
  39.           }
  40.           if (class_names[i].indexOf('segment-') == 0) {
  41.             r.segment = class_names[i].split('-')[1];
  42.           }
  43.         };
  44.         return r;
  45.       };
  46.  
  47.       var determine_sort = function($buttons) {
  48.         var $selected = $buttons.parent().filter('[class*="selected-"]');
  49.         return $selected.find('a').attr('data-value');
  50.       };
  51.  
  52.       var determine_kind = function($buttons) {
  53.         var $selected = $buttons.parent().filter('[class*="selected-"]');
  54.         return $selected.find('a').attr('data-value');
  55.       };
  56.  
  57.       var $preferences = {
  58.         duration: 800,
  59.         easing: 'easeInOutQuad',
  60.         adjustHeight: false
  61.       };
  62.  
  63.       var $list = $('#list');
  64.       var $data = $list.clone();
  65.  
  66.       var $controls = $('ul.splitter ul');
  67.  
  68.       $controls.each(function(i) {
  69.  
  70.         var $control = $(this);
  71.         var $buttons = $control.find('a');
  72.  
  73.         $buttons.bind('click', function(e) {
  74.  
  75.           var $button = $(this);
  76.           var $button_container = $button.parent();
  77.           var button_properties = read_button($button_container.attr('class').split(' '));      
  78.           var selected = button_properties.selected;
  79.           var button_segment = button_properties.segment;
  80.  
  81.           if (!selected) {
  82.  
  83.             $buttons.parent().removeClass('selected-0').removeClass('selected-1').removeClass('selected-2').removeClass('selected-3').removeClass('selected-4').removeClass('selected-5').removeClass('selected-6');
  84.             $button_container.addClass('selected-' + button_segment);
  85.  
  86.             var sorting_type = determine_sort($controls.eq(1).find('a'));
  87.             var sorting_kind = determine_kind($controls.eq(0).find('a'));
  88.  
  89.             if (sorting_kind == 'all') {
  90.               var $filtered_data = $data.find('li');
  91.             } else {
  92.               var $filtered_data = $data.find('li.' + sorting_kind);
  93.             }
  94.  
  95.             if (sorting_type == 'size') {
  96.               var $sorted_data = $filtered_data.sorted({
  97.                 by: function(v) {
  98.                   return parseFloat($(v).find('span.colore').text());
  99.                 }
  100.               });
  101.             } else {
  102.               var $sorted_data = $filtered_data.sorted({
  103.                 by: function(v) {
  104.                   return $(v).find('strong').text().toLowerCase();
  105.                 }
  106.               });
  107.             }
  108.  
  109.             $list.quicksand($sorted_data, $preferences);
  110.  
  111.           }
  112.  
  113.           e.preventDefault();
  114.         });
  115.  
  116.       }); 
  117.  
  118.       var high_performance = true;  
  119.       var $performance_container = $('#performance-toggle');
  120.       var $original_html = $performance_container.html();
  121.  
  122.       $performance_container.find('a').live('click', function(e) {
  123.         if (high_performance) {
  124.           $preferences.useScaling = false;
  125.           $performance_container.html('CSS3 scaling turned off. Try the demo again. <a href="#toggle">Reverse</a>.');
  126.           high_performance = false;
  127.         } else {
  128.           $preferences.useScaling = true;
  129.           $performance_container.html($original_html);
  130.           high_performance = true;
  131.         }
  132.         e.preventDefault();
  133.       });
  134.     });
  135. </script>
I had also included prettyphoto script for a 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 http://forums.no-margin-for-errors.com/discussion/757/force-prettyphoto-to-refresh-when-content-changes-dynamically/p1

I tried with
Expand|Select|Wrap|Line Numbers
  1. function reloadPrettyPhoto() {
  2. $(".pp_pic_holder").remove(); * 
  3. $(".pp_overlay").remove();
  4. $(".ppt").remove();
  5. * * $("a[rel^='prettyPhoto']").prettyPhoto();
  6.  
  7. }
and I call the function around the line 112, after
Expand|Select|Wrap|Line Numbers
  1. * * $list.quicksand($sorted_data, $preferences);
  2.  
  3. * * * }
  4. // Try to reload prettyphoto
  5. reloadPrettyPhoto();
  6. e.preventDefault();
  7.  
  8. * * });
...naturally without results :(
I tried also with:

Expand|Select|Wrap|Line Numbers
  1. jQuery.ajaxStop(function(){
  2. * * $("a[rel^='prettyPhoto']").prettyPhoto();
  3. * * });
But nothing.
I cannot understand how to use on my script
Expand|Select|Wrap|Line Numbers
  1. jQuery.ajaxStop(function(){
  2. // Code to be run.
  3. });
as also a forum user recommend
Tnx in advance for your help!
Mar 7 '11 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.