[jquery] 배너형 슬라이드 갤러리(롤링)형 최신글 입니다. 설정으로 쉽게 가로,세로 크기 변경가능. > 그누4 스킨

그누4 스킨

스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다.
스킨 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y
그누보드와 관련이 있지만 스킨과 빌더가 아니면 플러그인 게시판에 올려주세요.

[jquery] 배너형 슬라이드 갤러리(롤링)형 최신글 입니다. 설정으로 쉽게 가로,세로 크기 변경가능. 정보

최신글 [jquery] 배너형 슬라이드 갤러리(롤링)형 최신글 입니다. 설정으로 쉽게 가로,세로 크기 변경가능.

첨부파일

main_gal_utf8.zip (185.3K) 1981회 다운로드 2012-07-20 13:31:54
main_gal_euckr.zip (185.2K) 881회 다운로드 2012-07-20 13:31:54

본문

[jquery] 배너형 슬라이드 갤러리(롤링)형 최신글 입니다. 설정으로 쉽게 가로,세로 변경가능합니다.

Jquery 로 구현이 되있고, 테스트는 utf-8로 되어있습니다.
슬라이드 갤러리형 최신글 입니다.


적용소스
===================================================
<?$option = array("600","300"); //array("이미지가로크기","이미지세로크기")?>
<?=latest("main_gal", "banner", 10, 40,$option); //latest("최신글폴더명","테이블명","제목길이","옵션")?>

===================================================

이미지 가로, 세로를 위와 같은 방식으로 지정하시면 최신글 갤러리크기가 변경됩니다.

이미지가 지정된 크기보다 크더라도 썸네일이 적용돼어있어서 비율이 맞게 나올겁니다.

너무 흔한 거지만, 크기 변경되는 최신글 슬라이드갤러리가 없어서 이렇게 올려봅니다.^^
추천
19

댓글 전체

감사합니다.. 잘쓰겠습니다.
근데 질문좀 드릴게요.
이미지 위 검정색 바 height를 좀 줄이고 싶은데 latest.skin 에서 height 소스가 너무 많은지라 어떤걸 수정해야될지 모르겠네요.. 30분쨰 찾고있는데 잘 안되네요 ㅠㅠ

그리고 이미지 클릭시 해당 이미지 링크로 연결되게 하려면 어디부분을 수정해야하는지요?ㅠㅠ

검정색 바 색상을 어디서 바꿀 수 있을까요? 텍스트 색상 변경은 할 수 있겠는데 바는 어디있는지 모르겠어요 ㅠㅠ
div#m_header div#slide-holder div#slide-controls {
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; <-- 얘를 제거 해버리세요^^;
붉은바람님 감사합니다. 근데 이미지 클릭하면 해당 이미지 원본 링크로 이동할 수 있게는 어떻게 해야하나요? 초보라서요^^;;
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="<?=$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>
스킨에 js 폴더에 "scripts.js" 안에 대략 78번째줄
============================================
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>

이런식으론 못쓰나요?
<? $option = array("653","145"); ?>
<?=latest("main_gal", "is", 3, 40,$option); ?> 요로게만 집어 넣으면 되는건가요??

흰 바탕에 암것도 아니나오네요... 저 테이블명이라는건 게시판 명을 말씀하시는거죠?
제가 다운받은 스킨중 최고네요!! 잘 사용하겠습니다.
슬라이딩되는 이미지 우측상단에 1..2..3  이 숫자만 없애고 싶은데 소스어디를 손봐야하는지 알려주시면 감사요.. 지금 소스뒤지고 있는데 안없어지네요 ㅡ.ㅡ
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)){?>,<? } ?>
js 폴더에 "script.js"라는 파일이 있을겁니다.

거기에

라인수 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');"

이렇게요.
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>부분을 주적처리
우선 좋은 스킨 올려주심 붉은바람님 정말 감사드립니다 ^^
그런데 제가 두가지를 바꿔서 사용하고 싶은데요.
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>부분을 주적처리
--------

어떻게 해야 위의 두가지를 해결할 수 있는지 이 초보자에게 도움주신다면 정말 감사하겠습니다ㅜ
script.js 파일에 89번째줄
  $('#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>
------------------------------------------------------------------

위에거를 밑에거로 변경하세요
아.. 이거 넘좋아서 잘 쓰고 있는데.. 새로운사이트에 다시 쓰려고보니.. 안되네요.. 적용한테이블부터 하단으로 암꺼도 안나옴.ㅜㅜ
흠... 다시 부분적 업데이트를 하고나니 잘 돌아감..ㅡ_ㅡ;;ㅋㅋ 스킨최고!!! 항상 감사한마음 ㅜㅜㅜㅜ 저도 언젠가 실력키워서 보답하는날이~~~~~~~~
너무 질문이 늦지 않았나 싶은데요. ^^

이미지 슬라이드가.. 이미지 한장이 다 지나가는동안 바닥이 하얀채로 있고
다음 이미지가 그 공백을 채우면서 등장하는 방식인데..

이미지가 연결되어서 바닥 백지가 보이지 않게 슬라이딩 되게 할수는 없을까요? ^^
즉 첫번째 이미지가 슬라이드 되기 시작할때 다음 이미지가 붙어 나오는 형태로요..

너무 좋은 스킨 잘 쓰고 있습니다만 욕심이 나서 염치 불구하고 문의 드립니다.  (__)
폴더내에 /js/script.js  가 있습니다.

거기서 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

메인페이지에서 이미지를 클릭하면 해당 게시물로 연결이 안되네요..
무엇이 문제인지 도저히 찾질 못하겠네요ㅠ
이미지 클릭하면 계속 새로고침만 되네요...
도와주십쇼ㅠ
그누5에서는 적용이 안되나요...?
스킨자체가  나오지 않습니다..
좋은 소스이긴 한데 적용을 못하고 몇시간 동안 헤메고 이는 초보입니다.
감사합니다
멋집니다.
슬라이드도 멋지고, 주석을 꼼꼼하게 달아두신 것이 가장 마음에 듭니다.
네비게이션 버튼을 하단으로 이동할 수 있으면 좋겠는데, 소스를 봐도 잘 모르겠네요.
한 가지 더 욕심을 낸다면, 마지막에서 다시 왼쪽으로 이동하는 것이 좀 거슬리는데, 무한반복처럼 마지막에서도 오론쪽으로 이동될 수 있으면 더 좋겠습니다.
감사합니다.
화면은 잘 나타나는데
700*300으로 옵션을 주었는데 그림은 그대로 700*300으로 나타나고
아래 공백이 200이 더 늘어나 붕 떠있는 상태입니다.
아래에 빈여백이 200정도가 더 생겼는데 딱 700*300으로 수정 안될까요

높이는 어디서 수정하면 되나요
전체 5,853 |RSS
그누4 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT