start to fix image gallery sizing issues

This commit is contained in:
Sanj 2011-12-14 02:40:19 +05:30
parent b35637b6fd
commit 1b804c0189
2 changed files with 20 additions and 4 deletions

View File

@ -483,7 +483,8 @@ left:0;
right:0; right:0;
margin:0 auto; margin:0 auto;
width:600px; width:600px;
max-height:500px; /*SANJ, PLEASE DO THE RESIZE IN JS*/
/* max-height:500px; */ /*SANJ, PLEASE DO THE RESIZE IN JS*/
min-height:200px; min-height:200px;
overflow-y:auto; overflow-y:auto;
background-color:#FFF; background-color:#FFF;

View File

@ -55,19 +55,34 @@ $('.thumbsDetails').live("click", function(e) {
if (thisIndex < (totalImages - 1)) { if (thisIndex < (totalImages - 1)) {
var hasNext = true; var hasNext = true;
var nextImage = $(this).parent().find(".thumbsDetails").eq(thisIndex + 1); var nextImage = $(this).parent().find(".thumbsDetails").eq(thisIndex + 1);
var preloadImage = new Image();
preloadImage.src = nextImage.attr("data-bigimage");
} }
if (thisIndex > 0 && totalImages > 1) { if (thisIndex > 0 && totalImages > 1) {
var hasPrev = true; var hasPrev = true;
var prevImage = $(this).parent().find(".thumbsDetails").eq(thisIndex - 1); var prevImage = $(this).parent().find(".thumbsDetails").eq(thisIndex - 1);
} }
var $lbox = $('#lightboxContent');
var $cont = $('<div />').addClass("lightboxContainer");
var bigImage = $(this).attr("data-bigimage"); var bigImage = $(this).attr("data-bigimage");
var $img = $('<img />').attr("src", bigImage).addClass("lightboxImg"); var $img = $('<img />').attr("src", bigImage).addClass("lightboxImg");
$img.appendTo($cont);
var imgWidth = $img.width();
var imgHeight = $img.height();
var lightboxWidth = imgWidth + 40;
var lightboxHeight = imgHeight + 60;
$('#lightboxPanel').width(lightboxWidth);
$('#lightboxPanel').height(lightboxHeight);
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
//FIXME: Add conditionals for if image bigger than viewport
// showLightbox($img); // showLightbox($img);
var title = $(this).hasAttr("title") ? $(this).attr("title") : ''; var title = $(this).hasAttr("title") ? $(this).attr("title") : '';
// var $c = $('#lightboxContent'); // var $c = $('#lightboxContent');
var $cont = $('<div />').addClass("lightboxContainer");
$img.appendTo($cont);
if (title != '') { if (title != '') {
var $caption = $('<div />').addClass("lightboxCaption").text(title).appendTo($cont); var $caption = $('<div />').addClass("lightboxCaption").text(title).appendTo($cont);
} }