属性更改不起作用

时间:2017-04-01 11:16:58

标签: jquery image gallery prettyphoto

我正在研究prettyphoto图片库。我需要创建一个包含“所有图像”类别(包含所有图像类别)和单独类别的图像(仅包含特定类别的图像)的图库。为了实现这一点,我试图使用jquery来改变链接的data-rel属性。代码不起作用,我无法找出我做错了什么。 请帮助,提前谢谢。

的javascript:

var data_filter = 'category';// value inserted from php
//$('.test').html(data_filter);     
(function($){
$(document).ready(function(){
   $('.cms-isotope-grid-post').each(function(){
      $this = $(this);
      $filter = $this.parent().find('.cms-grid-filter');
      $this.imagesLoaded(function(){
        $this.isotope({
           itemSelector:'.cms-grid-item',
           layoutMode: 'fitRows',
           filter: data_filter
       });
      });
      $filter.find('a').click(function(e){
          e.preventDefault();
          $filter.find("a").removeClass('active');
          $(this).addClass('active');
          var data_filter = $(this).data('filter');
          // my code
          $('.prettyphoto').data('rel', 'all'); 
          // end of my code
          $this.isotope({
              filter: data_filter
          });
      });
   });  
}); 
})(jQuery);

PHP:

                                        echo '
                                        <div class="cms-grid-item col-xs-12 col-sm-12 col-md-4 col-lg-4 portfolio-'.$image['category'].'">
                                            <div class="portfolio-wrapper muliples">
                                                <div class="entry-content">
                                                    <div class="entry-media cms-blog-media cms-media overlay-wrap">
                                                        <img width="770" height="520" src="photo/'.$image['file'].'" alt="" />
                                                        <div class="overlay">
                                                            <div class="overlay-content">
                                                                <a class="icon circle prettyphoto" data-rel="prettyPhoto['.$image['category'].']" href="photo/'.$image['file'].'">
                                                                    <i class="fa fa-search"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="entry-header">
                                                    <h4 class="entry-title"><a href="portfolio-detail.php">'.$image['name'].'</a></h4>
                                                    <div class="entry-meta cms-meta">
                                                        <ul class="list-unstyled list-inline">
                                                            <li class="detail-terms">
                                                                <a href="#">'.$image['name'].'</a>, <a href="#">'.$image['subtitle'].'</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        ';

http://visand.pl/monaco/demo1/portfolio.php

1 个答案:

答案 0 :(得分:0)

尝试使用:

$('.prettyphoto').data('rel', 'newvalue')