Reputation: 465
Following on from another SO Question
This script changes an image on page scroll. However this script would be excessively large if it was for example, used for frames of a video with 200+ images. Is it possible to shorten this script for use with large number of files?
Many thanks
Upvotes: 1
Views: 4732
Reputation: 17171
Minor code tweaks...
http://jsfiddle.net/gvee/ygkWH/6/
<img src="http://placekitten.com/100/100" /><b>Frame: 0</b>
img, b {
position: fixed;
top: 0;
left: 0;
}
body {
height: 10000px;
}
// Array of images to swap between
var images = [];
// Add 200 items to array
for (i = 0; i < 200; i++) {
images.push('http://placekitten.com/' + (100 + i) + '/' + (100 + i));
}
var totalImages = images.length;
var pageHeight = $(document).height() - $(window).height();
// Work out how often we should change image (i.e. how far we scroll between changes)
var scrollInterval = Math.floor(pageHeight / totalImages);
$(document).scroll(function () {
// Which one should we show at this scroll point?
i = Math.floor($(this).scrollTop() / scrollInterval);
// Show the corresponding image from the array
$('img').attr('src', images[i]);
$('b').text('Frame: ' + i);
});
Upvotes: 8