0

I'm testing quicksand script to filter some image.

I had implemented the script with some image DEMO HERE.
As you can see there are circle, pentagon and triangle with different color.
The filter are working fine thanks to this inline script:

<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 a lightbox effect.

The problem is that the prettyphoto script stop working after I use the filter. I understand that this is caused by ajax reload content.
I need to "reload" prettyphoto as explained also on the prettyphoto official forum

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 tried 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 forum user recommend

Tnx in advance for your help!

7

You indeed need to re-initialize prettyPhoto once quicksand had been executed.

I took you example page and modified that line:

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

To become:

$list.quicksand($sorted_data, $preferences, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });

This way, every time content is filtered, prettyPhoto will be refreshed.

You can see it working here: http://no-margin-for-errors.com/demos/quicksand/quicktest.html

Thanks

1
  • Wow Scaron! This is awesome! Tnx for your support!
    – pmalerba
    Apr 28, 2011 at 18:57
1

Have you tried calling the prettyPhoto on the Quicksand callback?

Here is the example from the Quicksand website:

$('#source').quicksand( $('#destination li'), {
    name: value
}, function() {
    // callback code
});

I've had some good experience with Quicksand and doing other things along side it on www.lovecreativity.co.uk - see if that helps you out at all?

Good luck

2
  • Hello Tish! Tnx for your answer. I'm still stuck on this from 10 days shit :( I asked also on getacoder to pay a js expert to help me to solve the problem. Any results. I think that I shoud modify this part of the script around line 112 code } $list.quicksand($sorted_data, $preferences); } code
    – pmalerba
    Mar 18, 2011 at 9:02
  • But I don't know how to introduce a callback on this function. :/
    – pmalerba
    Mar 18, 2011 at 9:08
0

As scaron said, you should try replacing

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

with

$list.quicksand($sorted_data, $preferences, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });

AND in your code check that your rel attribute reads "prettyphoto" instead of "prettyPhoto", with a capital P, maybe it's just that?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.