[jquery] 배너형 슬라이드 갤러리(롤링)형 최신글 입니다. 설정으로 쉽게 가로,세로 크기 변경가능.
[jquery] 배너형 슬라이드 갤러리(롤링)형 최신글 입니다. 설정으로 쉽게 가로,세로 변경가능합니다.
Jquery 로 구현이 되있고, 테스트는 utf-8로 되어있습니다.
슬라이드 갤러리형 최신글 입니다.
적용소스
===================================================
<?$option = array("600","300"); //array("이미지가로크기","이미지세로크기")?>
<?=latest("main_gal", "banner", 10, 40,$option); //latest("최신글폴더명","테이블명","제목길이","옵션")?>
===================================================
이미지 가로, 세로를 위와 같은 방식으로 지정하시면 최신글 갤러리크기가 변경됩니다.
이미지가 지정된 크기보다 크더라도 썸네일이 적용돼어있어서 비율이 맞게 나올겁니다.
너무 흔한 거지만, 크기 변경되는 최신글 슬라이드갤러리가 없어서 이렇게 올려봅니다.^^
Jquery 로 구현이 되있고, 테스트는 utf-8로 되어있습니다.
슬라이드 갤러리형 최신글 입니다.
적용소스
===================================================
<?$option = array("600","300"); //array("이미지가로크기","이미지세로크기")?>
<?=latest("main_gal", "banner", 10, 40,$option); //latest("최신글폴더명","테이블명","제목길이","옵션")?>
===================================================
이미지 가로, 세로를 위와 같은 방식으로 지정하시면 최신글 갤러리크기가 변경됩니다.
이미지가 지정된 크기보다 크더라도 썸네일이 적용돼어있어서 비율이 맞게 나올겁니다.
너무 흔한 거지만, 크기 변경되는 최신글 슬라이드갤러리가 없어서 이렇게 올려봅니다.^^
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
그누4 스킨
5,847건스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다. 스킨 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y 그누보드와 관련이 있지만 스킨과 빌더가 아니면 플러그인 게시판에 올려주세요.
댓글 92개
동작을 잘되는데요.
근데 질문좀 드릴게요.
이미지 위 검정색 바 height를 좀 줄이고 싶은데 latest.skin 에서 height 소스가 너무 많은지라 어떤걸 수정해야될지 모르겠네요.. 30분쨰 찾고있는데 잘 안되네요 ㅠㅠ
그리고 이미지 클릭시 해당 이미지 링크로 연결되게 하려면 어디부분을 수정해야하는지요?ㅠㅠ
검정색 바 색상을 어디서 바꿀 수 있을까요? 텍스트 색상 변경은 할 수 있겠는데 바는 어디있는지 모르겠어요 ㅠㅠ
left : 0;
bottom : <?=($img_height-46)?>px;
width : <?=$img_width?>px;
height : 46px;
display : none;
position : absolute;
background : url(<?=$latest_skin_path?>/images/slide-bg.png) 0 0;
}
위 소스를 만지시면 될겁니다.
상단에 검정색바를 빼고 싶다면
background : url(<?=$latest_skin_path?>/images/slide-bg.png) 0 0; <-- 얘를 제거 해버리세요^^;
<a href="<?=set_http($list[$i][wr_link1])?>" style='color:#fff;border:0px;' target='_blank'><img id="slide-img-<?=($i+1)?>" src="<?=$thumfile?>" alt="<?=$list[$i][wr_subject]?>" /></a>
위 소스를 변경하시면돼요.
원본이미지 링크로 변경하실려면
<a href="<?=$list[$i][file][0][path]?>/<?=$list[$i][file][0][file]?>" style='color:#fff;border:0px;' target='_blank'><img id="slide-img-<?=($i+1)?>" src="<?=$thumfile?>" alt="<?=$list[$i][wr_subject]?>" /></a>
와 같이 하시면될겁니다.
링크 주소를 아래와 같이 변경하시면 되는데요. 새창 안띄울려면; target='_blank' <- 이거 지우시면되세요 ^^
<a href="<?=$list[$i][href]?>" style='color:#fff;border:0px;' target='_blank'><img id="slide-img-<?=($i+1)?>" src="<?=$thumfile?>" alt="<?=$list[$i][wr_subject]?>" /></a>
저희 홈페이지 메인에 적용하고 싶은데 아무리 찾아도 방법을 모르겠습니다..ㅜㅜ
참고할만한 사이트나 간단한 설명이라도 부탁드리면 안될까요?부탁드립니다..
;
============================================
var slider={
num:-1,
cur:0,
cr:[],
al:null,
at:10*1000,
ar:true,
init:function(){
if(!slider.data || !slider.data.length)
return false;
=================================
위코드에서
at:10*1000 <-- 요기에서 1000 이라는 숫자를 작게 하시면 빨리 움직이고, 더 크게 하면 시간이 늦춰질겁니다.
^^;
도대체 이런건 얼마나 공부를 해야 합니까 ?
게시판1, 게시판2,3,4 다 쓰려는데 2,3,4는 슬라이드가 안되요 ㅠㅠ
썸네일은 로드된거 같은데 함수값이 겹치는지 슬라이드가 안되네요
<div id="index_latest1">
<?$option = array("136","136"); ?>
<?=latest("main_gal", "board1", 3, 40,$option); ?>
</div>
<div id="index_latest2">
<?$option = array("136","136"); ?>
<?=latest("main_gal", "board2", 3, 40,$option); ?>
</div>
<div id="index_latest3">
<?$option = array("136","136"); ?>
<?=latest("main_gal", "board3", 3, 40,$option); ?>
</div>
<div id="index_latest4">
<?$option = array("136","136");
<?=latest("main_gal", "board4", 3, 40,$option); ?>
</div>
이런식으론 못쓰나요?
<?=latest("main_gal", "is", 3, 40,$option); ?> 요로게만 집어 넣으면 되는건가요??
흰 바탕에 암것도 아니나오네요... 저 테이블명이라는건 게시판 명을 말씀하시는거죠?
<?=latest("main_gal", "is", 3, 40,$option); ?>
main_gal 이 라테스트 폴더고,
is가 게시판명이 되야 하지요.
슬라이딩되는 이미지 우측상단에 1..2..3 이 숫자만 없애고 싶은데 소스어디를 손봐야하는지 알려주시면 감사요.. 지금 소스뒤지고 있는데 안없어지네요 ㅡ.ㅡ
148번째 줄에 있는 아래소스를
{"id":"slide-img-<?=($i+1)?>","client":"<?=$list[$i][subject]?>","desc":""}<?if(($i+1) != count($list)){?>,<? } ?>
아래와 같이 변경하시면됩니다.↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
{"id":"slide-img-<?=($i+1)?>","client":"","desc":""}<?if(($i+1) != count($list)){?>,<? } ?>
이미지 스크롤되는 중간에 하얀색이 나오는건 왜 그럴까요?
거기에
라인수 88번째 줄 "$('#'+d[i].id).css({left:((i-pos)*1000)});" <- 요소스에서 1000 이라는게 1000px을 뜻하는거며, 설정하신 가로 사이즈(width)에 맞게 변경하시면 됩니다.
라인수 115번째 줄 "$('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');"<- 이소스에서도 마찬가지로 여기에서도 1000이라는걸 바꾸면 되는데 왼쪽편 1000을 변경하시면됩니다.
ex) 가로를 600으로 설정하셨다면...
"$('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');" -> "$('#'+d[i].id).stop().animate({left:((i-pos)*600)},1000,'swing');"
이렇게요.
뭘 수정해줘야 할까요?
{"id":"slide-img-<?=($i+1)?>","client":"<?=$list[$i][subject]?>","desc":""}<?if(($i+1) != count($list)){?>,<? } ?>
아래와 같이 변경하시면됩니다.↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
{"id":"slide-img-<?=($i+1)?>","client":"","desc":""}<?if(($i+1) != count($list)){?>,<? } ?>
이렇게 작업해두 숫자가 안없어지는데 아시는분~~
다른 것 해봐도... 잘 안되네요 포기..
<div id="slide-controls">
<p id="slide-client" class="text"><strong></strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
위 <p id="slide-nav"></p>부분을 주적처리
그런데 제가 두가지를 바꿔서 사용하고 싶은데요.
1. 이미지에 숫자 뜨는 것 삭제 2.이미지 슬라이드 멈추기(첫번째 이미지로 고정시키고 버튼을 클릭시 사진이 넘어가게 하기)
이미지에 숫자 없애는 방법은 붉은바람님과 통갈매기 님이 알려주신 방법 모두 사용해봤는데 삭제가 안됩니다. ㅜㅜ
--------
latest.skin.php 을 열어서
148번째 줄에 있는 아래소스를
{"id":"slide-img-<?=($i+1)?>","client":"<?=$list[$i][subject]?>","desc":""}<?if(($i+1) != count($list)){?>,<? } ?>
아래와 같이 변경하시면됩니다.↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
{"id":"slide-img-<?=($i+1)?>","client":"","desc":""}<?if(($i+1) != count($list)){?>,<? } ?>
--------
latest.skin.php 138번째줄에 있는
<div id="slide-controls">
<p id="slide-client" class="text"><strong></strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
위 <p id="slide-nav"></p>부분을 주적처리
--------
어떻게 해야 위의 두가지를 해결할 수 있는지 이 초보자에게 도움주신다면 정말 감사하겠습니다ㅜ
$('#slide-nav').append('<a class="ab" id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
이걸
$('#slide-nav').append('<a class="ab" id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();"></a>');
이렇게 변경하세요
이미지 멈추는건 안해봤는데 위에 시간 조절하는 스크립트를 삭제하시면 될듯합니다.
사진이 너무 커서 그런가요??
latest.skin.php 에 134번째줄에
------------------------------------------------------------------
<a href="<?=set_http($list[$i][wr_link1])?>" style='color:#fff;border:0px;' target='_blank'><img id="slide-img-<?=($i+1)?>" src="<?=$thumfile?>" alt="<?=$list[$i][wr_subject]?>" /></a>
------------------------------------------------------------------
를
------------------------------------------------------------------
<a href="<?=set_http($list[$i][wr_link1])?>" style='color:#fff;border:0px;' target='_blank'><img id="slide-img-<?=($i+1)?>" src="<?=$imagepath?>" alt="<?=$list[$i][wr_subject]?>" /></a>
------------------------------------------------------------------
위에거를 밑에거로 변경하세요
문제가 되신다면 썸네일만드는 함수를 빼버리세요...
latest.skin.php 130번째줄에
$noimage = $latest_skin_path."/img/noimage.gif";
$thumfile = thumnail2($imagepath, $img_width, $img_height, 100, 1, 1,1, $noimage);
//$image = "<img src='$thumfile' width='$img_width' height='$img_height' class=image > ";
↑↑↑↑
위에소스를 없애버리시고,
latest.skin.php 에 134번째줄에
------------------------------------------------------------------
<a href="<?=set_http($list[$i][wr_link1])?>" style='color:#fff;border:0px;' target='_blank'><img id="slide-img-<?=($i+1)?>" src="<?=$thumfile?>" alt="<?=$list[$i][wr_subject]?>" /></a>
------------------------------------------------------------------
를
------------------------------------------------------------------
<a href="<?=set_http($list[$i][wr_link1])?>" style='color:#fff;border:0px;' target='_blank'><img id="slide-img-<?=($i+1)?>" src="<?=$imagepath?>" alt="<?=$list[$i][wr_subject]?>" /></a>
------------------------------------------------------------------
위에거를 밑에거로 변경하세요
include_once("$g4[path]/lib/latest.lib.php");
이거 없으면 롤링안됨...ㅋㅋㅋㅋㅋㅋ원초적실수!!!ㅋㅋㅋㅋㅋㅋㅋ
이미지 슬라이드가.. 이미지 한장이 다 지나가는동안 바닥이 하얀채로 있고
다음 이미지가 그 공백을 채우면서 등장하는 방식인데..
이미지가 연결되어서 바닥 백지가 보이지 않게 슬라이딩 되게 할수는 없을까요? ^^
즉 첫번째 이미지가 슬라이드 되기 시작할때 다음 이미지가 붙어 나오는 형태로요..
너무 좋은 스킨 잘 쓰고 있습니다만 욕심이 나서 염치 불구하고 문의 드립니다. (__)
거기서 88번째줄
$('#'+d[i].id).css({left:((i-pos)*1000)});
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
위소스보시면 1000 이라는것 이 있는데.. 이게 슬라이드 가로크기를 뜻하는데요.
1000사이즈를 설정하신 슬라이드 가로 크기로 변경만 해주시면 슬라이드 되는동안 흰 여백 없을겁니다.
1000 으로 검색해서
115번째 줄에 있는 $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
부분을 사이즈 조정해 주니 완벽하게 됐네요!!
답변도 오랫동안 잊지 않고 주시고 스킨도 너무 좋고 정말 감사드립니다!!
질문이 있습니다^^ 롤링되는 효과가 다르게 바뀔수있나요~?
그리고 제어버튼의 위치를 바꾸고싶은데 어느것을 건드려야할지 모르겠네요ㅠ
잘 적용해서 이쁘게 나오구 있는? 중인데요 ^^;;;
일단 작업중인 페이지는 여기구요..
http://bestorn.com/html/index.php
메인페이지에서 이미지를 클릭하면 해당 게시물로 연결이 안되네요..
무엇이 문제인지 도저히 찾질 못하겠네요ㅠ
이미지 클릭하면 계속 새로고침만 되네요...
도와주십쇼ㅠ
다른 건 다 했는데 툴팁을 좀 제거 하고 싶은데요.
어떻게 해야 하나요~?
감사합니다. ~
스킨자체가 나오지 않습니다..
좋은 소스이긴 한데 적용을 못하고 몇시간 동안 헤메고 이는 초보입니다.
감사합니다
슬라이드도 멋지고, 주석을 꼼꼼하게 달아두신 것이 가장 마음에 듭니다.
네비게이션 버튼을 하단으로 이동할 수 있으면 좋겠는데, 소스를 봐도 잘 모르겠네요.
한 가지 더 욕심을 낸다면, 마지막에서 다시 왼쪽으로 이동하는 것이 좀 거슬리는데, 무한반복처럼 마지막에서도 오론쪽으로 이동될 수 있으면 더 좋겠습니다.
감사합니다.
700*300으로 옵션을 주었는데 그림은 그대로 700*300으로 나타나고
아래 공백이 200이 더 늘어나 붕 떠있는 상태입니다.
아래에 빈여백이 200정도가 더 생겼는데 딱 700*300으로 수정 안될까요
높이는 어디서 수정하면 되나요
그리고 사진의 중앙쪽은 보여주고 싶은데 어디를 수정하면 될까요?