使用colorbox和jquery插件对图像进行分组

时间:2011-02-10 21:48:30

标签: jquery jquery-plugins colorbox

我在colorbox modalpopup的顶部创建了一个插件。

jquery插件

$(document).ready(function(){

(function($) {

  $.fn.pop= function(options) {

    var options = $.extend({}, $.fn.pop.defaults, options);

    return this.each(function() {
      var o = options;
      var obj = $(this);
       obj.click(function() {
     obj.colorbox({height:o.h, width:o.w , iframe:true});       
   });       
    });
  };     
  $.fn.pop.defaults = {
    h: '60%',
 w: '60%'
  };
})(jQuery);
});

在用户级别我只是打电话给他们 $( “类名”),POP()。 //如果他们需要优化长度宽度,他们只需要给出nos

现在我的问题是,如果我需要分组图像,我必须做这样的事情。

$("a[rel='example1']").colorbox();

我需要调用我的函数

$("a[rel='example1']").pop();

但它没有自我组合。 anyhelp将不胜感激

1 个答案:

答案 0 :(得分:0)

colorbox有一个“rel”标签属性:我不确定是否完全脱离了我的头脑,但应该是这样的:

$(document).ready(function(){

(function($) {

  $.fn.pop= function(options) {

    var options = $.extend({}, $.fn.pop.defaults, options);

    return this.each(function() {
      var o = options;
      var obj = $(this);
       obj.click(function() {
       // the following addition where o.r is options.rel = this.attr('rel');
       // or something like that
        obj.colorbox({height:o.h, width:o.w , iframe:true, rel:o.r});  
       });       
    });
  };     
  $.fn.pop.defaults = {
    h: '60%',
    w: '60%',
    r: 'group1'
  };
})(jQuery);
});

还要记住,如果你在一个链接中ajax你的插件不会自己拿起它,因为它正在利用colorbox并扩展它,但你没有改变它使用'live'而不是'delegate'的事实。你可能想做一点研究......

和colorbox在关系和分组方面有很棒的文档: jacklmoore.com/colorbox /

请向下滚动到设置...阅读文档永远不会浪费时间,因为无法在论坛上找到所有解决方案。