Lightbox image preloader delema
Hi I'm kinda new in coding and jquery i would like some help on loading my script. I was trying to experiment on a horizontal site with a gallery
http://grenzenlos.comuv.com/test/scroller.html problem is I can't seem to make a decent image preloader for my gallery and a proper "onresize" script that will adjust my divs when the window is resized (i kinda made one but I need to go back to the far end (scrollTo 0 0) to resfesh it.
here is the code for the lightbox
-
$(document).ready(function(){
// add a click event
$(".lightbox").click(function(){
$("#container").remove();
overlayLink = $(this).attr("href");
window.startOverlay(overlayLink);
return false;
});
});
function startOverlay(overlayLink) { //the Back Light Picture Box
//add the elements to the dom
$("body")
.append('<div id="container"> </div>')
//add the lightbox image to the DOM
var myimgHeight = $(window).height();
$("#container").html('<img src="'+overlayLink+'" alt="" class="ratioimg" style="height:'+myimgHeight+'px"/>');
//position it correctly after downloading
imager1();
}
function imager1() {
$("#container img").load(function() {
var imgWidth = $("#container img").width();
var imgHeight = $("#container img").height();
// var newTop = ($(window).height() - imgHeight) / 2;
// var newPicWidth=0,newPicHeight=0,newPicRatio=0;
var bx4Width = $(window).width()*4; //get current window size then multiply by the location of horizontal scrolling box "use only on HS Sites"
var curWidth = $(window).width();
var halfImg = (curWidth - imgWidth)/2;
$("#container")
.css({
"left": "0",
"overflow": "hidden",
"z-index": "-1", //makes it load on the back
"width": $(window).width(),
"height": $(window).height(),
"margin-left": bx4Width + halfImg,
"margin-top": "-16px" //to position it in the middle
})
window.removeOverlay();
});
}
help is greatly needed on the image preloader for the gallery
