我正在研究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>
';
答案 0 :(得分:0)
尝试使用:
$('.prettyphoto').data('rel', 'newvalue')