非常に大きな画像とprev/nextコマンドを使用したスライドショーを用意しました。スライドショーは常にブラウザウィンドウに収まり(サイズ変更可能)、画像のサイズが変更されると、アスペクト比が維持されます。
スライドショーでは、jQueryCyclePluginを使用しました。スライドショーはうまく機能していますが、常にスライドショーの下にある必要があり、代わりにスライドショーコンテナの下に隠れているコンテンツに問題があります(サイクルプラグインを使用する前にスライドショーが機能していましたが、単純なJSを使用して次の画像をコンテナにロードしますが、フェード効果はなく、スワップは本当に醜いものでした)。
問題は、スライドショーに高さが宣言されていないことだと思います。ただし、スライドショーのサイズを変更したい場合は、高さを宣言できません。
スライドショーは機能しているが、コンテンツコンテナの位置が間違っている実例:こちら。
コンテナの位置が適切で、スライドショーがない実例:こちら
私はかなり迷っています、そしてどんな助けも素晴らしいでしょう。
私が使用したコード:
$(function() {
// retrieve list of slides from server
$.getJSON('slidelist.php', startSlideshow);
function startSlideshow(slides) {
/* server returns an array of slides which looks like this:
[
'foto/02.jpg',
'foto/03.jpg',
'foto/04.jpg',
'foto/05.jpg',
'foto/06.jpg',
'foto/07.jpg',
]
*/
var totalSlideCount = 1 + slides.length;
var $slideshow = $('#slideshow');
// markup contains only a single slide; before starting the slideshow we
// append one slide and prepend one slide (to account for prev/next behavior)
$slideshow.prepend('<img class="imgFotoPasica" src="'+slides.pop()+'" />');
$slideshow.append('<img class="imgFotoPasica" src="'+slides.shift()+'" />');
// start slideshow
$('#slideshow').cycle({
fx: 'fade',
startingSlide: 1, // start on the slide that was in the markup
timeout: 0,
speed: 800,
prev: '#prev',
next: '#next',
before: onBefore,
containerResize: 0, // resize container to fit largest slide - dodal zato, da se slika veča/manjša proporcionalno
slideResize: 0, // force slide width/height to fixed size before every transition - dodal zato, da se slika veča/manjša proporcionalno
fit: 0, // force slides to fit container - 0 izklopljeno 1 vklopljeno
});
function onBefore(curr, next, opts, fwd) {
// on Before arguments:
// curr == DOM element for the slide that is currently being displayed
// next == DOM element for the slide that is about to be displayed
// opts == slideshow options
// fwd == true if cycling forward, false if cycling backward
// on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet)
if (!opts.addSlide)
return;
// have we added all our slides?
if (opts.slideCount == totalSlideCount)
return;
// shift or pop from our slide array
var nextSlideSrc = fwd ? slides.shift() : slides.pop();
// add our next slide
opts.addSlide('<img class="imgFotoPasica" src="'+nextSlideSrc+'" />', fwd == false);
};
};
});
<!doctype html>
<html lang="hr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/css.css"/>
</head>
<body>
<div id="ovoj">
<div id="glava"><h1>HEAD</h1></div>
<div id="ovojSlideshow">
<div>
<a href="#"><span id="prev">Prev</span></a>
<a href="#"><span id="next">Next</span></a>
</div>
<div id="slideshow">
<img class="imgFotoPasica" src="foto/01.jpg" />
</div>
</div>
<div id="vsebina"><h1>ALL CONTENT, HAVE TO BE ALWAYS UNDER THE SLIDESHOW</h1></div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/SlideShow_01.js"></script>
</body>
</html>