多个画廊 - fancybox

Question

我正在尝试使用fancybox创建不同的画廊，但即使我输入了rel =＆＃34;＆＃34;它仍然会遍历两个画廊的图像。我想划分画廊，我已经读过添加rel =＆＃34;＆＃34;这样做，但它不起作用。

这是html - ＆gt;

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

任何帮助表示赞赏。

谢谢。