Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbox not so light in the UX

    Hello. I am the PM on a project that needs to launch yesterday. The dev handed the site to me today and the lightbox is jacked. I am looking for a clean, auto-resizing, nice lightbox for the images on the site, however, I am not getting that and the dev seems to be stuck ... so here I am.

    The dev is using the following JS: http://lokeshdhakar.com/projects/lightbox2/

    The issues I found straightaway are:

    Image on click bounce off the left side of the page then MIGHT center.
    The lightbox does not auto-resize.

    There are design issues but I am hopeful the dev can work those out.

    Can anyone help? Thanks in advance!

    Site in question (sub-pages): http://gantzerwater.com/test/

  • #2
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    code

    Code:
    $(document).ready(function() {
    	less.env = "development";less.watch();
    	$("select").change(function() {
    		window.location.href = $("option:selected").val();
    	});
    	$(".subimg").click(function() {
    		var href = $(this).attr("href");
    		$("body").prepend("<div id=\"backdrop\"></div><div id=\"lightbox\"><div id=\"close\">x</div><img src=\""+href+"\"></div>");
    		$("#backdrop").css("height",$(document).height());
    		var fixed = 0,
    			fix = setTimeout(function() {
    				if ($("#lightbox").height() >= $(window).height())
    					$("#lightbox img").css("height",($(window).height() - ($(window).height()/16)));
    				if (fixed == 2) clearInterval(fix);
    				if ($("#lightbox").width() >= ($(window).width() - 100))
    					$("#lightbox img").css("width",($(window).width() - ($(window).width()/16)));
    				$("#lightbox").css({
    					"top" : ($(window).height()/2),
    					"marginTop" : ($("#lightbox").height()/2) * -1,
    					"marginLeft" : ($(window).width() - $("#lightbox").width()) / 2,
    					"marginRight" : ($(window).width() - $("#lightbox").width()) / 2
    				});
    				$("body").css("overflow","hidden");
    				fixed++;
    			},200);
    	});
    	$(".img-anchor").click(function() {
    		var href = $(this).attr("href");
    		$("body").prepend("<div id=\"backdrop\"></div><div id=\"lightbox\"><div id=\"close\">x</div><img src=\""+href+"\"></div>");
    		$("#backdrop").css("height",$(document).height());
    		var fixed = 0,
    			fix = setTimeout(function() {
    				if (fixed == 2) clearInterval(fix);
    				if ($("#lightbox").height() >= $(window).height())
    					$("#lightbox img").css("height",($(window).height() - ($(window).height()/16)));
    				if ($("#lightbox").width() >= ($(window).width() - 100))
    					$("#lightbox img").css("width",($(window).width() - ($(window).width()/16)));
    				$("#lightbox").css({
    					"top" : ($(window).height()/2),
    					"marginTop" : ($("#lightbox").height()/2) * -1,
    					"marginLeft" : ($(window).width() - $("#lightbox").width()) / 2,
    					"marginRight" : ($(window).width() - $("#lightbox").width()) / 2
    				});
    				$("body").css("overflow","hidden");
    				fixed++;
    			},200);
    	});
    	$(document).on("click","#close",function() {
    		$("#backdrop, #lightbox").remove();
    		$("body").css("overflow","auto");
    	});
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •