highslide를 일반페이지에 적용하기... 정보
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 파일을 첨부화일에 첨부합니다...
댓글 전체
전체 소스 받아서 확인 해보니 샘플이 많이 있어서 참고 할 만한 파일 알려드립니다.
아래는 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>
