최신 글 메인 이미지로 사용, 장면마다 다른 효과를 주고 싶습니다.
본문
메인에 첨부이미지가 하나씩 롤링되고 있습니다.
원하는 것은 장면마다 각기 다른 효과를 주고 싶은데 가능한 지 궁금하네요.
게시판에 총 3개의 첨부파일을 각각 올리고
이미지를 롤링이 잘 되고 있는데
효과 부분을 for 문을 써서 $i가 1일때는 puff 효과, 2일때는 drop 3일때는 fade 효과를 주고 싶은데
아무리 해도 안되네요.
원래부터 안되는 것인지 아니면 구분자가 틀린건지 아님 잘못 알고 있는 건지 궁금합니다.
아래부분 소스 참조
latest.skin.php 소스입니다.
<?php
if (!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; ?> 최신글 끝 -->
그리고 관련 js 파일 일부도 같이 올립니다.
(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
*/
답변 2
$(slides[current]).show(settings.show);
=>
var effect = ['puff', 'drop', 'fade'];
$(slides[current]).show(settings.show.effect = effect[current % 3]);
정말 감사합니다. 하루종일 끙끙댔는데 한 방에 끝내주는 군요. ^^;;
즐거운 연휴 되세요.
그런데 duration 시간 적용은 안되내요. 즉, 나타나고 사라지는 시간조절도 가능하다면 정말 좋겠습니다. latest.skin.php 맨아래 show: {effect: 'puff', duration: 800} 에서 조절했거든요...
해당 소스 봐서는 안되는거 같습니다.
답변을 작성하시기 전에 로그인 해주세요.
