http://masonry.desandro.com/
이용중인 플러그인
테스트페이지
공식 오피셜 레이아웃
http://sitelab.dothome.co.kr/xe/test
xe 에디션 레이아웃
http://sitelab.dothome.co.kr/xe/text2
1)
창크기에 따라 썸네일이 이동되는데,
에디션이나 아예 빈 레이아웃 {$content}만 들어가있는 레이아웃엔
잘 적용이되는데 오피셜 등 공식레이아웃이나 그외에 제가 제작한 레이아웃엔
아예 작동을 안하더라구요
현재 갤러리 소스는
<style>
.item {
float:left;
width:{$module_info->thumbnail_width}px;
height:{$module_info->thumbnail_height}px;
}
</style>
<load target="masonry.pkgd.js"/>
<div id="container">
<div class="item" loop="$document_list=>$no,$document">
<img class="gall_img" src="{$document->getThumbnail($module_info->thumbnail_width, $module_info->thumbnail_height, $module_info->thumbnail_type)}"/>
</div>
</div>
<script>
var container = document.querySelector( '#container' );
var msnry = new Masonry( container, {
// options
columnWidth: {$module_info->thumbnail_width},
itemSelector: '.item',
} );
</script>
이렇게 되어있는데요, 스크립트가 div 가장 밑 아니면 또 모두 작동을 안하구요,
어떤식으로 스크립트를 넣어야 모두 작동할까요.. 안되는 이유를 모르겠어요ㅠㅠ
그리구
2)
썸네일이 width크기는 일정하고 height는 동일하게 아니고 자동으로 나왔으면 하는데
http://www.kristianhammerstad.com/
이런형태로요 height 값을 빼버리면 아예 썸네일이 안나오거나 픽셀이 깨지듯 나와서..ㅠㅠ
이부분은 어떤식으로 조정해야할까요
2. XE에서는 썸네일을 지정 사이즈에 맞게 생성해 버리므로, 최대 이미지 사이즈를 정해서 URL을 작성하신 후, img태그의 width 값만 CSS로 변경해 보세요.