highslide를 일반페이지에 적용하기...
highslide를 일반페이지에 적용을 해보려구 하는데,
워낙에 지식이 짧아 도데체 어떻게 해야하는지 방법을 도통 모르겠네요...
우선 이미지4개짜리 highslide를 이용한 이미지보기를 만드려구 하는데요..
썸네일로 사용될 1.gif, 2.gif, 3.gif, 4.gif 를 만들고 (작은 이미지 루요)
이번엔 썸네일을 클릭했을때, highslide 기능이 적용되어 띄어질 원본사진
1.jpg, 2.jpg, 3.jpg, 4.jpg를 만들어 따로하나에 폴더안에 넣었습니다..
웹페이지 <head> 와 </head> 사이에
<script type="text/javascript" src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/';
</script>
이렇게 넣어주는 것 까지는 알겠는데,
썸네일 1.gif 에 어떻게 링크를 걸어주어야 highslide 기능으로 1.jpg 가 뜰까요?
휴~~ 어렵네요.... ㅠㅠ
쉬운설명을 부탁드립니다...
PS///----------------------------
<head> 와 </head> 사이에 들어갈 저 녹색 구문은 모두 넣어주어야 하는건가요?
폰트관련 다른 CSS도 사용하는데,
저렇게 넣으면 잘못되는거 아닌싶어서요...
다시한번 쉽고 자세한 설명 부탁드립니다...
꾸벅~
※ highslide 파일을 첨부화일에 첨부합니다...
댓글 2개
전체 소스 받아서 확인 해보니 샘플이 많이 있어서 참고 할 만한 파일 알려드립니다.
아래는 mini-gallery.html 의 링크 소스 입니다.
<a id="thumb1" href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
<!--href="원본 이미지" -->
<img src="../images/gallery1.thumb.jpg" alt="Highslide JS" title="Click to enlarge" />
<!--img src="썸네일 이미지"-->
</a>