我正在尝试使用fancybox创建不同的画廊,但即使我输入了rel =""它仍然会遍历两个画廊的图像。我想划分画廊,我已经读过添加rel =""这样做,但它不起作用。
这是html - >
<div class = "servis1">
<img class = "fancybox pajisje" src = "services\thg420.PNG" width="200px" data-big = "large\thg420.PNG" rel="gallery"> <p id = "p1" style = "line-height:200px;vertical-align:middle; text-align: center; margin-top: -50px; font-family: Palatino Linotype, Book Antiqua, Palatino, serif;">Thomson THG420</p></div>
<div class = "servis2">
<img class = "fancybox pajisje" src = "services\thg520.png" width="200px" data-big="large\thg520.jpg" rel="gallery"><p id = "p2" style = "line-height:200px;vertical-align:middle; text-align: center; margin-top: -68px; font-family: Palatino Linotype, Book Antiqua, Palatino, serif;">Thomson THG520</p></div>
<div class = "servis3">
<img class = "fancybox pajisje3" src = "services\twg850.png" width="200px" data-big="large\twg850.jpg" rel="gallery2"><p id = "p3" style = "line-height:200px;vertical-align:middle; text-align: center; margin-top: -76px; font-family: Palatino Linotype, Book Antiqua, Palatino, serif;">Thomson TWG850</p></div>
<div class = "servis4"><img class = "fancybox pajisje4" src = "services\n8770c.PNG" width="200px" data-big="large\n8770c.jpg" rel="gallery2"><p id = "p4" style = "line-height:200px;vertical-align:middle; text-align: center; margin-top: -68px; font-family: Palatino Linotype, Book Antiqua, Palatino, serif;">Reciever n8770c</p></div>
</div>
这是脚本 - &gt;
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
任何帮助表示赞赏。
谢谢。