메인 최신 공지사항 롤링기능

<div id="kboard-default-latest" style="height:50px; overflow:hidden; background-color:#fff;">
 <table>
  <!--<thead>
   <tr>
    <th class="kboard-latest-title"><?php echo __('Title', 'kboard')?></th>
    <th class="kboard-latest-date"><?php echo __('Date', 'kboard')?></th>
   </tr>
  </thead>-->
  <tbody>
   <?php while($content = $list->hasNext()):?>
   <tr>
    <td class="kboard-latest-title">
     <!--<a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>">-->
     <div class="notice">
       <ul class="rolling" style="list-style:none; ">
       <li>
        <a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>">
       </li>
       <li>
        <a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>">
       </li>
       <li>
        <a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>">
       </li>
       <li>
        <a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>">
       </li>
       <li>
        <a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>">
       </li>
      </ul>
     </div>  

      <div class="kboard-default-cut-strings">
       <?php if($content->isNew()):?><span class="kboard-default-new-notify">N</span><?php endif?>
       <?php if($content->secret):?><img src="<?php echo $skin_path?>/images/icon-lock.png" alt="<?php echo __('Secret', 'kboard')?>"><?php endif?>
       <?php echo $content->title?>
       <span class="kboard-comments-count"><?php echo $content->getCommentsCount()?></span>
      </div>
     </a>
    </td>
    <td class="kboard-latest-date"><?php echo $content->getDate()?></td>
   </tr>
   <?php endwhile?>
  </tbody>
 </table>

 
</div>

 

jQuery(document).ready(function(){
   var height =  jQuery(".notice").height(); //공지사항의 높이값을 구해주고~~
   var num = jQuery(".rolling li").length; // 공지사항의 개수를 알아볼수 있어요! length라는 것으로!
   var max = height * num; //그렇다면 총 높이를 알 수 있겠죠 ?
   var move = 0; //초기값을 설정해줍니다.
   function noticeRolling(){
      move += height; //여기에서 += 이라는 것은 move = move + height 값이라는 뜻을 줄인 거에요.
      jQuery(".rolling").animate({"top":-move},600,function(){ // animate를 통해서 부드럽게 top값을 올려줄거에요.
         if( move >= max ){ //if문을 통해 최대값보다 top값을 많이 올렸다면 다시 !
            jQuery(this).css("top",0); //0으로 돌려주고~
            move = 0; //초기값도 다시 0으로!
         };
      });
   };
   noticeRollingOff = setInterval(noticeRolling,1000); //자동롤링답게 setInterval를 사용해서 1000 = 1초마다 함수 실행!!
   jQuery(".rolling").append(jQuery(".rolling li").first().clone()); //올리다보면 마지막이 안보여서 clone을 통해 첫번째li 복사!

   jQuery(".rolling_stop").click(function(){
      clearInterval(noticeRollingOff); //stop을 누르면 clearInterval을 통해 자동롤링을 해제합니다.
   });
   jQuery(".rolling_start").click(function(){
      noticeRollingOff = setInterval(noticeRolling,1000); //다시 start를 누르면 자동롤링이 실행하도록 !!
   });
});     

 

케이보드 플러그인으로 메인에 최신글 롤링되게 구현하고 싶은데요 , 워드프레스로 제작중입니다.

<a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>">

이 부분이 내용 영역인데.. 여기 어느부분을 수정해야 할까요ㅠ

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 안녕하세요~^^

    같은 질문이라면 하나의 글만 등록해주시고

    이어지는 질문이라면 댓글로 남겨주세요.

    그리고 본문에 프로그램 코드를 올려야 할 경우 에디터의 "코드 스니펫 삽입" 기능을 사용해주세요.

     

    올려주신 코드는 latest.php 파일 전체 코드를 올려주신 건지요?

    아래의 코드로 교체하신 후에 다시 확인해보시겠어요?

    <style>
    .notice{width:100%; height:50px; overflow:hidden; background-color:#fff;}
    .rolling{position:relative; width:100%; height:auto;}
    .rolling li{width:100%; height:50px; line-height:50px;}
    </style>
    
    <div class="notice">
    	<ul class="rolling" style="list-style:none; ">
    	<?php while($content = $list->hasNext()):?>
    		<li><a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>"><?php echo $content->title?></a></li>
    	<?php endwhile;?>
    	</ul>
    </div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    
    jQuery(document).ready(function(){
    	var height =  jQuery(".notice").height(); 
    	var num = jQuery(".rolling li").length; 
    	var max = height * num;
    	var move = 0; 
    	function noticeRolling(){
    		move += height; 
    		jQuery(".rolling").animate({"top":-move},600,function(){ 
    			if( move >= max ){
    				jQuery(this).css("top",0); 
    				move = 0;
    			};
    		});
    	};
    	noticeRollingOff = setInterval(noticeRolling,1000); 
    	jQuery(".rolling").append(jQuery(".rolling li").first().clone()); 
    	
    	jQuery(".rolling_stop").click(function(){
    		clearInterval(noticeRollingOff); 
    	});
    	jQuery(".rolling_start").click(function(){
    		noticeRollingOff = setInterval(noticeRolling,1000); 
    	});
    });      
    </script>

     

    KBoard 플러그인에서 <?php echo $content->title?> 코드를 사용하시려면

    <?php while($content = $list->hasNext()):?>...<?php endwhile?> 코드 사이에서 사용해주셔야 합니다.

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기