최신 글 메인 이미지로 사용, 장면마다 다른 효과를 주고 싶습니다.

<?phpif (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가?><!--메인CSS와 충돌--link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"--><link rel="stylesheet" href="<?php echo $latest_skin_url ?>/css/juicyslider.css" type="text/css" /><style type="text/css"> /* Sticky footer styles -------------------------------------------------- */ html, body {  height: 100%;  /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap {  min-height: 100%;  height: auto !important;  height: 100%;  /* Negative indent footer by it's height */  margin: 0 auto -60px; } /* Set the fixed height of the footer here */ #push, #footer {  height: 60px; } /* #footer {  background-color: #F5F5F5; }*/ /* Lastly, apply responsive CSS fixes as necessary */ @media (max-width: 767px) {  #footer {   margin-left: -20px;   margin-right: -20px;   padding-left: 20px;   padding-right: 20px;  } } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ #wrap > .container {padding-bottom: 60px;} .container .credit {margin: 20px 0;} code {font-size: 80%;} /* Some adjustments for Bootstrap */ .lead {font-size: 18px; } .btn { margin: 5px 2px; } .container{width:1100px}  /* content size */ #myslider{margin:0 auto;}</style><!-- Part 1: Wrap all page content here -->        <div id="wrap">   <!-- Begin page content -->            <div class="container">                <div class="row-fluid">                    <div class="pagination-centered">                        <div id="myslider" class="juicyslider">                            <ul><?       for ($i=0; $i<count($list); $i++) {         $noimage = "$latest_skin_url/images/1.jpg";         $list[$i][file] =get_file($bo_table, $list[$i][wr_id]);         $imagepath = $list[$i][file][0][path]."/".$list[$i][file][0][file];?>         <li><img src="<?echo $imagepath ?>" alt="HANSON"></li><?       }?>                            </ul>                            <div class="nav next"></div>                            <div class="nav prev"></div>                            <div class="mask"></div>                        </div>                    </div>                </div>             </div>        </div><!-- Le javascript================================================== --><!-- Placed at the end of the document so the pages load faster --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script><script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script><script type="text/javascript" src="<?php echo $latest_skin_url ?>/js/juicyslider.js"></script><!-- initialize Juicy Slider with a jQuery doc ready --><? for ($i=0; $i<count($list); $i++) {  ?><? if ($==0) ?><script type="text/javascript"> // start to run when document ready  $(function() {  $('#myslider').juicyslider({   width: '1100', /* 사이즈조절 : 시간조절은 : ~/js/juicyslider.js : 22번줄 */   height: '500', /* 사이즈조절*/   mask: 'raste', //★변경해도 효과변함없음   show: {effect: 'puff', duration: 800}, //전환되는 효과,시간조절1 (1000 이 기본값) 효과 'puff' (작아졌다-fade-커지면서-fade), 'drop' (두장바꿔끼듯이), 'fade' (fade in out), 'none' (왼쪽상단에서나타났다작아짐) : 두 개의 효과를 show, hide에 각각 변경 가능   hide: {effect: 'fade', duration: 500},   //전환되는 효과,시간조절2 (1000 이 기본값)  }); });</script><? } else if ($i==1) { ?><script type="text/javascript"> // start to run when document ready  $(function() {  $('#myslider').juicyslider({   width: '1100', /* 사이즈조절 : 시간조절은 : ~/js/juicyslider.js : 22번줄 */   height: '500', /* 사이즈조절*/   mask: 'raste', //★변경해도 효과변함없음   show: {effect: 'drop', duration: 800}, //전환되는 효과,시간조절1 (1000 이 기본값) 효과 'puff' (작아졌다-fade-커지면서-fade), 'drop' (두장바꿔끼듯이), 'fade' (fade in out), 'none' (왼쪽상단에서나타났다작아짐) : 두 개의 효과를 show, hide에 각각 변경 가능   hide: {effect: 'fade', duration: 500},   //전환되는 효과,시간조절2 (1000 이 기본값)  }); });</script><? } else { ?><script type="text/javascript"> // start to run when document ready  $(function() {  $('#myslider').juicyslider({   width: '1100', /* 사이즈조절 : 시간조절은 : ~/js/juicyslider.js : 22번줄 */   height: '500', /* 사이즈조절*/   mask: 'raste', //★변경해도 효과변함없음   show: {effect: 'fade', duration: 800}, //전환되는 효과,시간조절1 (1000 이 기본값) 효과 'puff' (작아졌다-fade-커지면서-fade), 'drop' (두장바꿔끼듯이), 'fade' (fade in out), 'none' (왼쪽상단에서나타났다작아짐) : 두 개의 효과를 show, hide에 각각 변경 가능   hide: {effect: 'fade', duration: 500},   //전환되는 효과,시간조절2 (1000 이 기본값)  }); });</script><? } }?><!-- end of Juicy Slider --><!-- } <?php echo $bo_subject; ?> 최신글 끝 -->

(function($) {    $.fn.juicyslider = function(options) {        var         settings = $.extend({            // these are the defaults.            mode: "cover", // "cover" or "contain"            width: '100%', // set null to make the slider as wide/tall as the window,            height: '100%', // otherwise set any other values in px or % unit            mask: "raster", // "raster", "square", "strip" or "none"            //bgcolor: "#000",            autoplay: 4500, // 0 for no autoplay, any other postive number for play interval in (ms) //★ 멈춤시간조절            shuffle: false, // set true to shuffle the picture order            show: {effect: 'fade', duration: 1500}, // effect params refer to jQuery UI            hide: {effect: 'fade', duration: 1500}, // try 'puff' or 'drop' for the effect arg        }, options),                       slides = this.find('li'),        amount = slides.length,        current = 0,        turnSlide = function(event) {            var step = 1;            if (event) {                event.preventDefault();                step = event.data.step;            }            if (settings.shuffle)                 step = Math.floor(Math.random()*(amount - 1) + 1);                        $(slides[current]).hide(settings.hide);            current = (((current + step) % amount) + amount) % amount;            // must make displayable before detecting the dimension            $(slides[current]).css({display: 'block'});            resizeImg();            $(slides[current]).css({display: 'none'});            $(slides[current]).show(settings.show);        },        theWindow = $(window),        viewport = this;        // set bg color        this.css('background-color', settings.bgcolor);        // set mask        this.find('.mask').css('background-image', settings.mask == 'none' ? 'none' : 'url(./img/' + settings.mask + '.png)');        // set the next button        this.find('.nav.next').click({step:1}, turnSlide);        this.find('.nav.prev').click({step:-1}, turnSlide);        // set autoplay interval         if (settings.autoplay > 0)            setInterval(turnSlide, settings.autoplay);        /*         * handling bg images resize         */