0
저는 제 개인 웹 사이트에서 작업하며 플러그인 Juicyslider에 문제가 있습니다. 나는 그것을 3 일 동안 일하지만 해결책을 찾을 수 없다. 나는 초보자이다./Juicyslider의 첫 번째 이미지가 너비 페이지에 맞지 않습니다.
그래서 나는 아래의 문제에 대한 이미지를 넣었다. Juicyslider를 사용하여 내 작품의 갤러리 이미지를 만듭니다. 모든 것은 괜찮지 만 한 가지를 제외하고는. 첫 번째 이미지로드가 페이지에 맞지 않습니다. 그러나 네비게이션 (이전 또는 이후)을 사용한 후 첫 번째 이미지로 돌아갈 때이 페이지는 페이지에 맞게 맞춰졌습니다 ... 우선 나는 이것이 position:absolute, display:none 및 width:100%의 문제라고 생각하고 나서 생각했습니다. JS의 기능 순서에 문제가있었습니다. 하지만 시도 다, HTML
<div class="description-project">
<div id="myslider_project" class="juicyslider">
<ul>
<li><img src="img.jpg"></li>
<li><img src="img1.jpg"></li>
<li><img src="im2.jpg"></li>
</ul>
<div class="nav prev"></div>
<div class="nav next"></div>
</div>
</div>
CSS
.juicyslider {
position: relative;
padding:0;
margin: 0;
border: 0;
}
.juicyslider ul {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
list-style: none outside none;
padding:0;
margin:0;
}
.juicyslider li {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: none; /* all hidden initially */
}
.juicyslider li:first-child {
position: absolute;
width: 100%;
height: 100%;
right: 0;
left: 0;
display: block;
}
.juicyslider .nav {
position: absolute;
top: 45%;
padding: 20px;
cursor: pointer;
z-index: 500;
background-image: url(../img/nav-40.png);
.juicyslider img.maxw {
width: 100%;
height: auto;
position: absolute;
filter: inherit; /* for ie8 to inherit parent opacity */
}
.juicyslider img.maxh {
width: auto;
height: 100%;
position: absolute;
filter: inherit; /* for ie8 to inherit parent opacity */
}
그리고 JS 파일 (함수 ($) {
$.fn.juicyslider = function(options) {
var
settings = $.extend({
// these are the defaults.
mode: "cover", // "cover" or "contain"
width: 'null', // set null to make the slider as wide/tall as the window,
height: 'null', // otherwise set any other values in px or % unit
mask: "none", // "raster", "square", "strip" or "none"
bgcolor: "#000",
autoplay: 0, // 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: 300}, // effect params refer to jQuery UI
hide: {effect: 'fade', duration: 300}, // try 'puff' or 'drop' for the effect arg
}, options),
slides = this.find('li'),
amount = slides.length,
current = 0,
theWindow = $(window),
viewport = this;
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', overflow: 'hidden'});
resizeImg();
$(slides[current]).css({display: 'none'});
$(slides[current]).show(settings.show);
},
// set bg color
this.css('background-color', settings.bgcolor);
// 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
*/
function resizeImg() {
// set width and height of the slider
viewport.width(settings.width == null ? theWindow.width() : settings.width);
viewport.height(settings.height == null ? theWindow.height() : settings.height);
vieww = viewport.width();
viewh = viewport.height();
viewRatio = vieww/viewh;
bgimg = $(slides[current]).find("img"); // the current visible image
var doResize = function() {
imgRatio = bgimg.width()/bgimg.height();
if ((viewRatio < imgRatio && settings.mode == 'contain') || (viewRatio >= imgRatio && settings.mode == 'cover')) {
bgimg.removeClass('maxh').addClass('maxw').css({
/* get new height after adjust above */
top: (viewh - vieww/imgRatio)/2,
left: 0
});
} else {
bgimg.removeClass('maxw').addClass('maxh').css({
/* get new width after adjust above */
top: 0,
left: (vieww - imgRatio * viewh)/2
});
}
};
bgimg.get(0).complete ? doResize() : bgimg.load(doResize);
}
theWindow.resize(resizeImg).trigger('resize');
그리고 완료를
작동하지 않습니다 여기에 이미지 : 탐색을 사용하기 전에 (슬라이더가 페이지 b에 완벽하게 맞습니다. 자른 때문에 탐색을 사용한 후) 슬라이더에 http://i.stack.imgur.com/jbbpb.jpg
에 맞지 않는 첫 번째 이미지로 돌아가되는 이미지의 일부를 유타 (모든 작업 ...) http://i.stack.imgur.com/ScXTE.jpg
그래서 내가 뭔가를 생각한다 슬라이더를로드하는 동안 발생하지 않는 탐색 이벤트 중에 발생합니다 (예 : 크기 조정 함수)
감사!