Jquery流沙过滤器+ ajax 加载内容后 beautifulphoto 不工作

发布于 2024-10-20 21:03:12 字数 5516 浏览 11 评论 0原文

我正在测试流沙脚本来过滤一些图像。

我已经用一些图像DEMO HERE实现了该脚本。
正如你所看到的,有不同颜色的圆形、五边形和三角形。
由于这个内联脚本,过滤器工作正常:

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

我还包含了用于灯箱效果的漂亮照片脚本。

问题是,在我使用过滤器后,prettyphoto 脚本停止工作。 据我了解,这是由ajax重新加载内容引起的。
我需要“重新加载”prettyphoto 正如 Prettyphoto 官方论坛上的解释

我尝试过:

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

}

并且我在第 112 行周围调用该函数,之后:

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

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

    });

...自然没有结果 :(

我也尝试过:

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

但什么也没有。

我不明白如何在我的脚本上使用,

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

作为论坛用户

提前推荐 Tnx 以获得您的帮助!

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!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

暖心男生 2024-10-27 21:03:12

一旦执行了流沙,您确实需要重新初始化 PrettyPhoto。

我拿了你的示例页面并修改了该行:

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

变为:

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

这样,每次过滤内容时,prettyPhoto都会刷新。

您可以在这里看到它的工作原理: http://no-margin-for- error.com/demos/quicksand/quicktest.html

谢谢

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

你爱我像她 2024-10-27 21:03:12

您是否尝试过在 Quicksand 回调中调用 PrettyPhoto ?

以下是来自 Quicksand 网站的示例:

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

我在 Quicksand 方面获得了一些良好的经验,并在 www 上与它一起做其他事情.lovecreativity.co.uk - 看看这对你有帮助吗?

祝你好运

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

时光暖心i 2024-10-27 21:03:12

正如斯卡隆所说,您应该尝试

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

在代码中用

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

AND 替换,检查您的 rel 属性是否读取“prettyphoto”而不是“prettyPhoto”,并带有大写 P,也许只是这样?

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?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文