fancybox 갤러리에 첨부파일 아이콘 나오지 않도록 수정하기
디자인/ 티스토리 꾸미기 2013. 8. 24. 20:59fancybox 갤러리에 첨부파일 아이콘 나오지 않도록 수정하기
갤러리를 적용했는데 의도치않게 첨부된 파일의 아이콘까지 나와버려서 아이콘이 나오지 않도록 수정했습니다.
filter 하는 부분은 prototype 의 endsWith 소스입니다.
추가된 부분
var filters = ["/zip.gif", "/html.gif", "/unknown.gif"];
$(".imageblock").each( function(){
var img = $(this).find('img');
// 첨부된 파일의 아이콘은 갤러리에서 제외하기
for( var i=0 ; i < filters.length; i++){
var d = img.attr("src").length - filters[i].length;
if( d >=0 && img.attr("src").lastIndexOf( filters[i]) == d){
return;
}
}
필터를 추가해서 src 이름과 비교하도록 했습니다.
전체 소스
<script>
$(document).ready(function(){
var imgs = [], index = 1;
var filters = ["/zip.gif", "/html.gif", "/unknown.gif"];
$(".imageblock").each( function(){
var img = $(this).find('img');
// 첨부된 파일의 아이콘은 갤러리에서 제외하기
for( var i=0 ; i < filters.length; i++){
var d = img.attr("src").length - filters[i].length;
if( d >=0 && img.attr("src").lastIndexOf( filters[i]) == d){
return;
}
}
var newImg = $("<img src='" + img.attr('src') + "' title='" + img.attr('alt') + "'>");
imgs.push( newImg);
// 이미지를 클릭했을 때 fancybox 갤러리 띄우기
img.wrap("<a class='fancybox' href='#'/>").closest("a")
.on("click", function( event){
event.stopPropagation();
event.preventDefault();
var thisImg = $(this).find('img');
var thisSrc = thisImg.attr('src');
// 클릭된 이미지를 기준으로 이미지 갤러리 순서 재정렬하기
var adjustImgs = [];
var restImgs = [];
var pushImg = false;
for( var i = 0 ; i < imgs.length ; i++){
if( $(imgs[i]).attr('src') == thisSrc || pushImg){
adjustImgs.push( imgs[i]);
pushImg = true;
}else{
restImgs.push(imgs[i]);
}
}
for( var i = 0; i < restImgs.length; i++){
adjustImgs.push( restImgs[i]);
}
// fancybox 갤러리 띄우기
$.fancybox.open( adjustImgs,
{
helpers : {
thumbs : {
width : 75,
height : 75
}
}
});
});
});
});
</script>
'디자인 > 티스토리 꾸미기' 카테고리의 다른 글
티스토리 Fancybox 갤러리에 썸네일 이미지 사용하기 (0) | 2013.08.23 |
---|---|
티스토리에 fancybox 갤러리 적용하기 (0) | 2013.08.22 |
fancybox 에 제목 달기 (1) | 2013.08.21 |
티스토리에 이미지 플러그인 LIghtbox, fancybox 적용하기 (7) | 2013.08.21 |