fancybox 갤러리에 첨부파일 아이콘 나오지 않도록 수정하기

디자인/ 티스토리 꾸미기 2013. 8. 24. 20:59

fancybox 갤러리에 첨부파일 아이콘 나오지 않도록 수정하기


갤러리를 적용했는데 의도치않게 첨부된 파일의 아이콘까지 나와버려서 아이콘이 나오지 않도록 수정했습니다.

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>


: