Есть галерея , самая первая страница при любом значении rel="" там отображаются все картинки. Помогите сделать так , чтобы первая страница была rel="gla"
$(document).ready(function() {
$('.menu li a').click(function() {
$('.menu li').removeClass('selected');
$(this).parent('li').addClass('selected');
imgWidth = '250px';
thisItem = $(this).attr('rel');
if(thisItem != "all") {
$('.item li[rel='+thisItem+']').stop()
.animate({'width' : imgWidth,
'opacity' : 1,
'marginRight' : '.5em',
'marginLeft' : '.5em'
});
$('.item li[rel!='+thisItem+']').stop()
.animate({'width' : 0,
'opacity' : 0,
'marginRight' : 0,
'marginLeft' : 0
});
} else {
$('.item li').stop()
.animate({'opacity' : 1,
'width' : imgWidth,
'marginRight' : '.5em',
'marginLeft' : '.5em'
});
}
})
$('.item li img').animate({'opacity' : 1}).hover(function() {
$(this).animate({'opacity' : 1});
}, function() {
$(this).animate({'opacity' : 1});
});
});
<ul class="menu">
<li class="selected"><a href="#123" rel="gla">Все</a></li>
<li><a href="#123" rel="gla">Глянцевые</a></li>
<li><a href="#123" rel="mat">Матовые</a></li>
</ul>
<ul class="item" >
<li rel="gla"><a href="images/gl/gla/1.jpg" class="fancybox g1"><img src="images/gl/gla/1.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/2.jpg" class="fancybox g2"><img src="images/gl/gla/2.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/3.jpg" class="fancybox g3"><img src="images/gl/gla/3.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/4.jpg" class="fancybox g4"><img src="images/gl/gla/4.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/5.jpg" class="fancybox g5"><img src="images/gl/gla/5.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/6.jpg" class="fancybox g6"><img src="images/gl/gla/6.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/7.jpg" class="fancybox g7"><img src="images/gl/gla/7.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/8.jpg" class="fancybox g8"><img src="images/gl/gla/8.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/9.jpg" class="fancybox g9"><img src="images/gl/gla/9.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/10.jpg" class="fancybox g10"><img src="images/gl/gla/10.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/11.jpg" class="fancybox g11"><img src="images/gl/gla/11.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/13.jpg" class="fancybox g13"><img src="images/gl/gla/13.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/14.jpg" class="fancybox g14"><img src="images/gl/gla/14.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/15.jpg" class="fancybox g15"><img src="images/gl/gla/15.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/16.jpg" class="fancybox g16"><img src="images/gl/gla/16.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/12.jpg" class="fancybox g12"><img src="images/gl/gla/12.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/17.jpg" class="fancybox g17"><img src="images/gl/gla/17.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/18.jpg" class="fancybox g18"><img src="images/gl/gla/18.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/19.jpg" class="fancybox g19"><img src="images/gl/gla/19.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/20.jpg" class="fancybox g20"><img src="images/gl/gla/20.jpg" /></a></li>
<li rel="gla"><a href="images/gl/gla/21.jpg" class="fancybox g21"><img src="images/gl/gla/21.jpg" /></a></li>
<li rel="mat"><a href="images/gl/mat/1.jpg" class="fancybox g1"><img src="images/gl/mat/1.jpg" /></a></li>
<li rel="mat"><a href="images/gl/mat/2.jpg" class="fancybox g2"><img src="images/gl/mat/2.jpg" /></a></li>
<li rel="mat"><a href="images/gl/mat/4.jpg" class="fancybox g4"><img src="images/gl/mat/4.jpg" /></a></li>
<li rel="mat"><a href="images/gl/mat/5.jpg" class="fancybox g5"><img src="images/gl/mat/5.jpg" /></a></li>
<li rel="mat"><a href="images/gl/mat/6.jpg" class="fancybox g6"><img src="images/gl/mat/6.jpg" /></a></li>
<li rel="mat"><a href="images/gl/mat/3.jpg" class="fancybox g3"><img src="images/gl/mat/3.jpg" /></a></li>
</ul>
<div class="cleaner"></div>
