jeudi 1 janvier 2015

Slideshow using Jquery, images do not fit window


I am trying to make a slideshow using jquery, I am a rooky in this code and am only familiar with css and html (though I am unsure how to position things in css). I want to create my slideshow and followed this template however I don't know how to change aspects of it, I tried messing around with it however no luck. My images are much bigger than the slide window created, I want to fit the image to the window, since now only a portion of the image is shown, which doesn't look very good.


So I was wondering how I could fit the complete image in that slidewindow (not a portion)


Here is what I have as html:



<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="Images/DSC_0419 copy.JPG" />
</div>
<div class="slide">
<img src="Images/DSC_1019 copy.JPG" />
</div>
<div class="slide">
<img src="Images/DSC_2975.JPG" />
</div>
</div>
</div>


My CSS:



#slideshow #slideshowWindow {
width:1000px;
height:700px;
margin:0;
padding:0;
position:relative;
overflow:hidden;


}



#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:1000px;
height:700px;
float:left;
position:relative;


}


And this is my Jquery script:



<script type="text/javascript">
$(document).ready(function() {

var currentPosition = 0;
var slideWidth = 1000;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;

slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float' : 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
} else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder')
.animate({'marginLeft' : slideWidth*(-currentPosition)});
}
});
</script>




Aucun commentaire:

Enregistrer un commentaire