플러그인 slidesjs (예전명칭 : 루프 슬라이드) > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

jQuery : https://www.happyjung.com/lecture/1344


디비없이 사용하는 slidersjs

hp_slidersjs
  ├ data     :  움직일 이미지 폴더
  ├ img   : 화살표 등의 기본이미지
  ├ latest.skin.php    : 이미지 폭과 넓이를 설정 .  hp_slidersjs 폴더위치 설정
  └ sliders.min.jquery.js


노출을 원하는 곳에서 hp_slidersjs 위치를 include 하면 끝...
<?php include "../hp_slidersjs/latest.skin.php"; ?>

-------------------------------------------------------------------------------------------------
latest.skin.php  내용
-------------------------------------------------------------------------------------------------
<?php
$img_width = 967;
$img_height = 250;
$img_quality = 100;

$latest_skin_path = "/8629/hp_slidersjs";
$data_path = $latest_skin_path."/data";

$arrayData["arrayName"] = array("01.png","02.png","03.png");
$list = $arrayData["arrayName"];

$img_option = " style='border:0px #ccc solid' alt='' border='0' width='". $img_width ."' height='". $img_height ."'";
?>

<style>
#slidesjs_container { width:<?php echo $img_width; ?>px; padding:0px; margin:0 auto; position:relative; z-index:0; }
#example { width:<?php echo $img_width; ?>px; height:<?php echo $img_height + 2; ?>px; position:relative; }
#slides { position:absolute; top:0px; left:0px; z-index:100; }

.slides_container { width:<?php echo $img_width; ?>px; overflow:hidden; position:relative; display:none; }
.slides_container a { width:<?php echo $img_width; ?>px; height:<?php echo $img_height + 2; ?>px; display:block; }
.slides_container a img { display:block; }

/*    Next/prev buttons */
#slides .next,#slides .prev { position:absolute; top:107px; left:-25px; width:24px; height:43px; display:block; z-index:101; }
#slides .next { left:<?php echo $img_width; ?>px; }

/*    Pagination*/
.pagination { margin:1px auto 0; width:<?php echo $img_width; ?>px; }
.pagination li { float:left; margin:0 1px; list-style:none; }
.pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url(<?php echo $latest_skin_path; ?>/img/pagination.png); background-position:0 0; float:left; overflow:hidden; }
.pagination li.current a { background-position:0 -12px; }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="<?php echo $latest_skin_path; ?>/slides.min.jquery.js"></script>
<script>
  $(function(){
    $('#slides').slides({
      preload: true,
      preloadImage: '<?php echo $latest_skin_path; ?>/img/loading.gif',
      play: 5000,
      pause: 2500,
      hoverPause: true
    });
  });
</script>

<div id="slidesjs_container">
  <div id="example">
    <div id="slides">
      <div class="slides_container">
        <a href="goods.php"><img src='<?php echo $data_path; ?>/01.png'<?php echo $img_option; ?>></a>
        <a href="goods.php"><img src='<?php echo $data_path; ?>/02.png'<?php echo $img_option; ?>></a>
        <a href="goods.php"><img src='<?php echo $data_path; ?>/03.png'<?php echo $img_option; ?>></a>
        <a href="goods.php"><img src='<?php echo $data_path; ?>/04.png'<?php echo $img_option; ?>></a>
        <a href="goods.php"><img src='<?php echo $data_path; ?>/05.png'<?php echo $img_option; ?>></a>
              
        <?php /*
        <img src='$thumb' width='{$img_width}' height='{$img_height}' style='border:0px #ccc solid' alt='' />
        
        <?php
          for ($i=0; $i<count($list); $i++) {
            //썸네일 생성
            $thumfile = "";
            $thumb = $data_path.'/'.$list[$i];

            $thumfile = "<img src='$thumb' width='{$img_width}' height='{$img_height}' style='border:0px #ccc solid' alt='' />";
 
            if ($list[$i][wr_link1]) {
              if ($list[$i][wr_link2] == "none") {
                echo "{$thumfile}";
              } elseif ($list[$i][wr_link2] == "_blank") {
                echo "<a href='{$list[$i][wr_link1]}' target='_blank'>{$thumfile}</a>";
              } elseif ($list[$i][wr_link2] == "_self") {
                echo "<a href='{$list[$i][wr_link1]}'>{$thumfile}</a>";
              } else {
                if ($list[$i][wr_link1]) {
                  echo "<a href='{$list[$i][wr_link1]}' target='_blank'>{$thumfile}</a>";
                } else {
                  echo "<a href='{$list[$i][href]}'>{$thumfile}</a>";
                }
              }
            } else {
              echo "{$thumfile}";
            }
          }

          if (count($list) == 0) {
            echo "<center><font color=#6A6A6A>새소식이 없습니다.</font></center>";
          }
        ?>
        */ ?>
      </div>
      <a href="#" class="prev"><img src="<?php echo $latest_skin_path; ?>/img/arrow-prev.png" alt="Arrow Prev" border="0"></a>
      <a href="#" class="next"><img src="<?php echo $latest_skin_path; ?>/img/arrow-next.png" alt="Arrow Next" border="0"></a>
    </div>
  </div>
</div>