혼살님의 블로그에 올려진
'티스토리에 Highslide 설치하고 사용하는 방법을 소개합니다.
http://honsal.tistory.com/category/IT/Tistory?page=1
위 주소로 방문하시면 됩니다.
Highslide 태그 자동 생성기: http://honsal.tistory.com/entry/Highslide-JS-Tag-Maker-2015-09-14
<head></head> 사이에 넣어야 하는 <script> 태그 부분
<!-- Highslide JS -->
<script type="text/javascript" src="./images/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="./images/highslide.css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="./images/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript">
hs.graphicsDir = './images/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105; // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
</script>
<!-- End Highslide JS -->