473,320 Members | 1,794 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Jquery Quicksand filter + prettyphoto not working after ajax loading content

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
0 2000

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

Similar topics

2
by: christopher.secord | last post by:
I would like have a little "loading..." tab not unlike the one that gmail uses and I would like to display that tab while an ajax call is made. The javascript to display the tab works. The...
5
by: Paul de Goede | last post by:
I set the Response.Filter in my aspnet application but I have noticed that if you do a Server.Transfer that the filter doesn't get called. And in actual fact the response is mostly empty. It seems...
7
by: tader | last post by:
so i got this kind of ajax script function browserio_tipas() { var tipas; if (window.ActiveXObject) { tipas = new ActiveXObject("Microsoft.XMLHTTP"); } else if...
1
by: sasiphyd | last post by:
I have used an ajax file furnaces.html with code as below.The file furnacedata.php is used to generate XML dynamically and this appears to working well. timerID is used to reload the XML data at...
3
by: thetechgeek | last post by:
hey all, I'm a bit new to AJAX, and I was wondering how I could dynamically load content onto a page to prevent the user from having to reload the entire page, they'd just have to load the main...
1
by: nicky77 | last post by:
Hi, apologies in advance is this may be a nonsensical ramble, but I'm hoping someone can give me some advice on how to solve the following problem: I'm developing a site where the main content is...
3
by: poe | last post by:
Hello, I've used the jQuery PNG fix on a website I'm working on, but the PNG images seem to be distorted "only sometimes" in IE6 and IE7. It seems to happen most often when the page is loaded for...
29
by: FreshRob | last post by:
I have been trying to fix this issue the whole of today and have gotten no where. I am developing a new website, and wanted it to display a webpage in lightbox and have an external page added to the...
1
by: krisviswa | last post by:
Hi I am new to web programming and I started working with Asp.net 3.5 vwd express edition with ajax tool kit.For about a week now I screened most of articles on use of javascript in asp.net and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.