Menu
Hello everyone.
I’m working on a slideshow for a portfolio-like page. In order to make sure that the portfolio-page never gets higher than the actual page, I’m binding document.resize after document.ready fires (using jQuery). However, this script is not working as it should, and I’m not sure why. The issue I’m having is that when the document loads, and the slideshow fires the first time, the images end up sort of stacked on top of each other, and not side-by-side.
This is where it all starts, sort of. It binds to the event, fires it and then starts up the slideShow.
[CODE]jQuery(document).ready( function() {
var b = $(document);
$(window).resize(function () {
$(‘.img-wrapper’).width(“100%”);
var height = b.height();
var headerHeight = $(‘.header-wrapper’).height();
var footerHeight = $(‘.footer’).height();
var innerHeight = height – (headerHeight + footerHeight);
var upperHeight = innerHeight*0.6-10;
var lowerHeight = innerHeight*0.4;
var width = Math.round(1.067615658362989*lowerHeight);
jQuery(‘.main’).css(‘height’, innerHeight + ‘px’);
jQuery(‘.main-content’).css(‘height’, upperHeight + ‘px’);
jQuery(‘.main-extras’).css(‘height’, lowerHeight + ‘px’);
$(‘.main-extra1’).width(width);
$(‘.main-extra1’).css(‘right’, $(‘.img-wrapper’).width()/2+10);
$(‘.main-extra2’).width(width);
$(‘.main-extra2’).css(‘left’, $(‘.img-wrapper’).width()/2+10);
});
jQuery(window).trigger(‘resize’);
docReady();
});
function docReady(){
if (typeof(tid) !== undefined){
clearInterval(tid);
}
var params = Array();
var mainHeight = $(‘.main’).height();
var mainWidth = $(‘.main’).width();
params.push(mainHeight);
params.push(mainWidth);
var slideShowImages = new slideShowImageSet(ShowPics, params);
var tid = slideShowFunc(slideShowImages,params);
}
[CODE]function slideShowImageSet(set, params) {
var imageArray = [];
for(var i=0;i<set.length;i++){
imageArray.push(new slideShowImage(set[i], params));
}
return imageArray;
}
function slideShowImage(img, params) {
var divHeight = params[0];
this.divWidth = $(‘.img-wrapper’).width();
this.src = img[0];
this.imgWidth = img[1];
this.imgHeight = img[2];
var scale = this.imgHeight/ divHeight;
this.newWidth = this.imgWidth / scale;
this.centerOffset = this.divWidth/2 – this.newWidth/2;
this.startPosition = -this.newWidth – 10;
}
This part of the code sets up various variables related to scaling etc.
[CODE]function slideShowImageSet(set, params) {
var imageArray = [];
for(var i=0;i<set.length;i++){
imageArray.push(new slideShowImage(set[i], params));
}
return imageArray;
}
function slideShowImage(img, params) {
var divHeight = params[0];
this.divWidth = $(‘.img-wrapper’).width();
this.src = img[0];
this.imgWidth = img[1];
this.imgHeight = img[2];
var scale = this.imgHeight/ divHeight;
this.newWidth = this.imgWidth / scale;
this.centerOffset = this.divWidth/2 – this.newWidth/2;
this.startPosition = -this.newWidth – 10;
}
This part contains all of the code making sure that the slideshow ticks etc.
[CODE]function slideShow(s,param){
this.divWidth = param[0];
this.pos = getRandomInt(0, s.length-1);
this.cycle = s.length;
this.imageStack = s;
var outsideImage = this.imageStack[this.pos];
this.pos = (this.pos+1).mod(this.cycle);
var leftImage = this.imageStack[this.pos];
this.pos = (this.pos+1).mod(this.cycle);
var centerImage = this.imageStack[this.pos];
this.pos = (this.pos+1).mod(this.cycle);
var rightImage = this.imageStack[this.pos];
centerImage.newWidth = ($(‘.img-wrapper’).height()/centerImage.imgHeight) * $(‘.img-wrapper’).width();
centerImage.divWidth = $(‘.img-wrapper’).width();
centerImage.centerOffset = centerImage.divWidth/2 – centerImage.newWidth/2;
var leftImageOffset = offset(centerImage, leftImage, “left”);
var leftBackground = leftImageOffset + leftImage.newWidth + $(‘.img-wrapper’).width()/15 + “px”;
var rightImageOffset = offset(centerImage, rightImage, “right”);
var rightBackground = rightImageOffset + rightImage.newWidth;
var leftForeground = “<div class=’main-background-left’ style=’width: ” + leftBackground +”;’></div>”;
var rightForeground = “<div class=’main-background-right’ style=’width: ” + leftBackground + “;’></div>”;
var centerImageString = “<img id=’2′ src=’CFK/” + centerImage.src + “‘ style=’overflow: hidden; position: absolute; left: ” + -2000 + “px; height: 100%; width: auto;’></img>”;
var leftImageString = “<img id=’1′ src=’CFK/” + leftImage.src + “‘ style=’overflow: hidden; position: absolute; left: ” + -2000 + “px; height: 100%; width: auto;’></img>”;
var rightImageString = “<img id=’3′ src=’CFK/” + rightImage.src + “‘ style=’overflow: hidden; position: absolute; left: ” + -2000 + “px; height: 100%; width: auto;’></img>”;
var outsideImageString = imageString(outsideImage);
//alert(“Centerimage: ” + centerImage.startPosition + “nLeftImage: ” +leftImage.startPosition +”nRightImage: ” + rightImage.startPosition);
$(‘.img-wrapper’).append(leftForeground);
$(‘.img-wrapper’).append(outsideImageString);
$(‘.img-wrapper’).append(leftImageString);
$(‘.img-wrapper’).append(centerImageString);
$(‘.img-wrapper’).append(rightImageString);
$(‘.img-wrapper’).append(rightForeground);
}
function updateSlideShow(slideShow) {
var outside = $(“#0”);
var left = $(“#1”);
var center = $(“#2”);
var right = $(“#3”);
outside.attr(‘id’, function(){
return parseInt(outside.attr(‘id’))+1;
});
left.attr(‘id’, function(){
return parseInt(left.attr(‘id’))+1;
});
center.attr(‘id’, function(){
return parseInt(center.attr(‘id’))+1;
});
right.attr(‘id’, function(){
return parseInt(right.attr(‘id’))+1;
});
var divWidth = $(‘.img-wrapper’).width();
var leftWidth = left.width();
var outsideWidth = outside.width();
var rightWidth = right.width();
var centerWidth = center.width();
//alert(“Width: n ” + divWidth + “n” + outsideWidth + “n” + leftWidth + “n” + centerWidth + “n” + rightWidth);
var outsideLeft = outside.offset().left;
var leftLeft = left.offset().left;
var centerLeft = center.offset().left;
var rightLeft = right.offset().left;
//alert(“Left: n ” + outsideLeft + “n” + leftLeft + “n” + centerLeft + “n” + rightLeft);
var leftEnd = divWidth/2 – leftWidth/2+10;
var outsideEnd = leftEnd – outsideWidth – divWidth/15;
var centerEnd = leftEnd + divWidth/15 + leftWidth;
var rightEnd = divWidth + rightWidth;
//alert(“DivWidth: ” + divWidth);
//alert(“End: n” + outsideEnd + “n” + leftEnd + “n” + centerEnd + “n” + rightEnd);
var outsideMove = outsideEnd – outsideLeft;
var outsideString = “+= ” + outsideMove;
var leftMove = leftEnd – leftLeft;
var leftString = “+= ” + leftMove;
var centerMove = centerEnd – centerLeft;
var centerString = “+= ” + centerMove;
var rightMove = rightEnd – rightLeft;
var rightString = “+= ” + rightMove;
//alert(“Movestring: n” + outsideString + “n” + leftString + “n” + centerString + “n” + rightString);
right.animate({
left: ‘+=’ + rightMove
}, 250, “swing”, function(){
center.animate({
left: ‘+=’ + centerMove
}, 250, “swing”, function() {
left.animate({
left: ‘+=’ + leftMove
}, 250, “swing”, function() {
outside.animate({
left: ‘+=’ + outsideMove
}, 250, “swing”, function() {
right.remove();
});
});
});
$(‘.main-background-left’).width(leftEnd);
$(‘.main-background-right’).width(leftEnd+10);
}
);
slideShow.pos = (slideShow.pos+1).mod(slideShow.cycle);
$(‘.img-wrapper’).prepend(imageString(slideShow.imageStack[slideShow.pos]));
}
function imageString(image){
return “<img src=’CFK/” + image.src + “‘ id=’0′ style=’overflow: hidden; position: absolute; left: -1000px; height: 100%; width: auto;’></img>”;
}
function offset(centerIm, sideIm, side){
switch(side){
case “right”:
return centerIm.centerOffset + centerIm.newWidth + $(‘img-wrapper’).width()/15;
case “left”:
return centerIm.centerOffset – centerIm.divWidth/15 – sideIm.newWidth;
default:
return “0px”;
}
}
Number.prototype.mod = function(n) {
return ((this%n)+n)%n;
};
There’s also this piece of code which does the actual slideshow-starting.
[CODE]function slideShowFunc(slideShowImages,param) {
var show = new slideShow(slideShowImages, param);
updateSlideShow(show);
var tid = self.setInterval(function () {updateSlideShow(show)}, 10000);
return tid;
The first time the slideshow fires, we get this, which looks horrible. Hopefully my code is understandable, I’m quite new to JS and jQuery, but I think there is something else playing here. Sadly, I do not have a webserver where I can put up the page for view right now without exposing my own computer.
[ATTACH]15349[/ATTACH]
Anyone have any ideas? My guess is that there is some desync when firing, so that the document is NOT ready when it tries to resize the images and calculate their positions, and then it all gets buggered from there.
[canned-message]attachments-removed-during-migration