probacu da objasnim malo bolje
znaci ja koristim jquery cycle plug-in scriptu za slideshow na pozadinu mog sajta. ta scripta se povikuje na sledjeci nacin:
Code:<div id="slideshow">
<div class="slide">
--- Content u prvi slajd ---
<div class="resize-img">
<img src="px.gif" width="100%" height="100%" data-ratio="neka-promenliva"
style="background:url(slide1.jpg) no-repeat; background-position:center center; background-size: 100% auto;"
/>
</div>
<div class="img-info">
<p>Neki tekst sa kom se opisuje sliku</p>
</div>
</div>
<div class="slide">
--- Content u drugi slajd ---
<div class="resize-img">
<img src="px.gif" width="100%" height="100%" data-ratio="neka-promenliva"
style="background:url(slide1.jpg) no-repeat; background-position:center center; background-size: 100% auto;"
/>
</div> <div class="img-info">
<p>Neki tekst sa kom se opisuje sliku</p>
</div>
</div>
<div class="slide">
--- ||| ---
</div>
</div>
Code:
<script type="text/javascript">
$('#slideshow').cycle();
</script>
konkretno u mom slucaju, ja imam sliku u svaki slide i za svaku sliku neki tekst za opis.
koristimm jos jednu logiku preko kog u svaki momenat sliku bude preko celo ekrana, proporcionalno skaliranu, bez deformaciju.
i to sam uradio,
ali taj kod radi samo za prvu sliku, posle promene slideshow u vtorog slajda, sliku nije rasprostranjena po celog ekrana
Code:
<script type="text/javascript">
$(function() {
var imgs = $(".cnt img");
function resizeImgs(e) {
imgs.each(function() {
var browserratio = $(this).width() / $(this).height();
if(browserratio > $(this).attr('data-ratio')) {
$(this).css('background-size', '100% auto');
} else {
$(this).css('background-size', 'auto 100%');
}
});
}
$(window).resize(resizeImgs);
$(window).load(resizeImgs);
});
</script>