썸네일 질문
본문
썸네일 슬라이더를 만들었느데
a 링크에 썸네일 첫번째 이미지 두번째 이미지를 가지고 올수있는
href에 링크연결을 시켜야되는ㄷ[
a href=" 이부분 "
이부분에 각각 썸네일 순번대로 가지고올수있는 링크를 어케 써야되나요???????
답변 5
무슨말인지 모르겠네요 ㅋㅋ a태그에는 하나만 넣어야되요
결론은 첫번째 썸네일 이미지의 경로를 불러오는
링크소스를 알고싶습니다
https://opentutorials.org/module/2675/16343
여기에 a링크에 해당 이미지파일경로가 되어있듯이
저는 첫번째썸네일을 가지고올수있는 경로를 넣고싶습니다
썸네일 루프문 안에 썸네일 이미지 주소랑 링크주소 같이 출력될텐데요....썸네일을 어떻게 불러오셔서 그러시는 것인지...
https://opentutorials.org/module/2675/16343
여기에 a링크에 해당 이미지파일경로가 되어있듯이
저는 첫번째썸네일을 가지고올수있는 경로를 넣고싶습니다
이렇게 질문을 하시면 답변자들이 정확한 답을 드리기가 힘이 들어 피하게 됩니다. 코드를 올려 부가 설명을 하시던가 질문 내용이 장황하더라도 꼼꼼하게 설명하셔야 답변들이 명확해집니다.
질문 제목은 썸네일이고 내용은 슬라이드를 만들었다 하며 결론은 a herf 태그에 대한 질문이라 아래와 같은 답변을 하기는 하는데 답을 해 놓고도 답을 한 자가 "내 답이 맞나?"싶어 자꾸 보게 되는 무한 루푸네요.ㅎㅎㅎㅎ
아래 답변에 대한 요지는
1. a herf 라면 for안에 변수로 저장되어 있음.
2. jQuery 슬라이드 좌.우 이동 문제라면 예제 참조.
----------------------------------------------------------------
janedoe님의 글과 같이 "썸네일 루프문 안에 썸네일 이미지 주소랑 링크주소 같이 출력됨"이 맞는데 코드상에서 보면 for~문 안에 위치하게 됩니다. 그 부분(a herf)이 원인이 아니라 js 상에 문제이고 a 요소는 for문 안에 변수값이 있으니 해당 부분을 for문 넣어 주면 끝.
js에 대해 설명하자면
그누보드는 jQuery 라이브러리를 임베디드하고 있으며 필요에 따라 별도의 jQuery 공개 모듈을 용도에 따라 삽입하여 쓰기도 합니다. 다음 링크는 몇 가지 예제 문서 중에서 가장 설명이 쉬운 문서다 싶어 올려드리니 해당 문서를 참조바랍니다.
참고:http://whybk.tistory.com/81
제 글은 채택하지 마시고 먼저 답변을 준 janedoe님의 글 채택 부탁드립니다. 좋은 답변이 달리기 힘든 질문이라 남의 예제 링크를 올렸을 뿐입니다.
https://opentutorials.org/module/2675/16343
여기에 a링크에 해당 이미지파일경로가 되어있듯이
저는 첫번째썸네일을 가지고올수있는 경로를 넣고싶습니다
그누보드의 기본 갤러리 게시판 스킨을 참고하면,
/skin/board/gallery/list.skin.php (갤러리 스킨 리스트 처리 파일)
for ($i=0; $i<count($list); $i++) {
...
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);
의 코드로 썸네일 정보를 가져온 후,
썸네일 경로 정보는 $thumb['src'] 으로 사용하고 있습니다.
$list 루프문 안이라면 a href= 에는,
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);
후 <a href='<?php echo $thumb['src'] ?>' 식으로 넣어주면 되지 않을까 싶습니다.
설명 보다는 코드를 드리는 것이 더 좋을 듯 싶어 이미지에 맞춰봤습니다.
* 이곳 채택은 웹제작을 업으로 삼는 사람들에게 제작의뢰를 가능하게 하는 역활을 하고 있으니 채택은 다른 사람으로 해주세요. 저는 은퇴자입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<title>슬라이더 예제 </title>
<style>
/* 슬라이더 예제 */
*{ padding:0; margin:0; background-color:salmon;}
ul,li{ list-style:none;}
#exslider{margin:0px auto; width:620px; background-color:salmon; overflow:hidden; }
#picshow{width:500px; height:280px; padding:5px; position:relative; border:solid 1px #ccc;}
#picshow,#mainImg{width:500px; height:280px; overflow:hidden; float:right;}
#mainImg li{width:500px; height:280px; overflow:hidden; float:right; display:none;}
#mainImg img{width:500px; height:280px;}
#thumbs{float:left;display:inline;}
#thumbs li{width:90px; height:90px; margin-bottom:10px; cursor:pointer;}
#thumbs li:hover{background-color:#fff;}
#thumbs li.current{border-color:tomato}
#thumbs li.current:hover{border-color:tomato}
#thumbs a{color:#000;}
#thumbs img{border:1px solid #ccc;padding:5px;}
#thumbs .select_date{ height:23px; line-height:23px; overflow:hidden; display:block;}
</style>
</head>
<body>
<!-- { -->
<div id="exslider">
<div id="picshow">
<div id="picshow_img">
<ul>
<li><a href="#" target="_self"><img src="http://sevensprings.dothome.co.kr/img/a_500x280.jpg"></a></li>
<li><a href="#" target="_self"><img src="http://sevensprings.dothome.co.kr/img/b_500x280.jpg"></a></li>
<li><a href="#" target="_self"><img src="http://sevensprings.dothome.co.kr/img/c_500x280.jpg"></a></li>
</ul>
</div>
</div>
<div id="thumbs">
<ul>
<li><a href="https://codepen.io/gamza/pen/bRxVaa?editors=1100" target="_self"><img src="http://sevensprings.dothome.co.kr/img/a_90x80.jpg"></a></li>
<li><a href="https://codepen.io/gamza/pen/bRxVaa?editors=1100" target="_self"><img src="http://sevensprings.dothome.co.kr/img/b_90x80.jpg"></a></li>
<li><a href="https://codepen.io/gamza/pen/bRxVaa?editors=1100" target="_self"><img src="http://sevensprings.dothome.co.kr/img/c_90x80.jpg"></a></li>
</ul>
</div>
</div>
<!-- } -->
<script>
// JavaScript Document
$(document).ready(function(){
$('#thumbs li:first').css('border','none');
if ($('#exslider').length) {
exslider();
$('#h_sns').find('img').hover(function(){
$(this).fadeTo(200,0.5);
}, function(){
$(this).fadeTo(100,1);
});
}
function exslider(ID, delay){
var ID=ID?ID:'#exslider';
var delay=delay?delay:5000;
var currentEQ=0, picnum=$('#picshow_img li').size(), autoScrollFUN;
$('#thumbs li').eq(currentEQ).addClass('current');
$('#picshow_img li').eq(currentEQ).show();
$('#thumbs li').hover(function(){
var picEQ=$('#thumbs li').index($(this));
if (picEQ==currentEQ) return false;
currentEQ = picEQ;
$('#thumbs li').removeClass('current');
$('#picshow_img li').hide();
$('#thumbs li').eq(currentEQ).addClass('current');
$('#picshow_img li').eq(currentEQ).show();
return false;
});
};
})
</script>
</body>
</html>
