Centering an image utilizing Javascript

Question

I have a dynamic image that appears when an icon is clicked to overlay the image to display it. It shows, but off center.

$('.preview').click(function(){
    var img = $(this);
    $("#<%=imgFull.ClientID%>").attr("src", img.attr('fullImg'));
    $("#<%=imgFull.ClientID%>").attr("top", "50%");
    $("#<%=imgFull.ClientID%>").attr("left", "50%");
    $("#<%=imgFull.ClientID%>").attr("margin-top", "-" + (img.width()) + "px");
    $("#<%=imgFull.ClientID%>").attr("margin-left", "-" + (img.height()) + "px");
    $("#overlay").show();
    $("#overlayContent").show();
});

I'd use CSS, but I'm not very familiar with using CSS with Javascript, and my clientIDs change since the image name slightly changes on server side thanks to ASP.

The images I'm using to test are 320px X 240px, for some reason though, the img.width and img.height are equaling 24px, which makes no sense. Any suggestions or solutions that resolve this would be greatly appreciated.

Edit Per request, adding full scope of the function in question.

@DontVoteMeDown Sorry, missed that somehow: var img = $(this); — Trasiva
– Trasiva, Commented May 7, 2014 at 20:32
Post more of your code. The value of 'this' changes based on the context and scope. — Tyler Biscoe
– Tyler Biscoe, Commented May 7, 2014 at 20:35
But what is this? Can you provide the full scope code? Its strange because you reference the image in two ways: $("#<%=imgFull.ClientID%>") ahd img. Why ? — DontVoteMeDown
– DontVoteMeDown, Commented May 7, 2014 at 20:35
@Tyler, updated code. DontVoteMeDown, I just realized that, but I'm personally not very experienced with Javascript. The office kind of threw this project at me and I'm just trying to absorb as much of the information as I can while being fed with a firehose. — Trasiva
– Trasiva, Commented May 7, 2014 at 20:40

Trasiva · Accepted Answer · 2014-05-08 15:25:42Z

3

Try the following code:

$('.preview').click(function(){
    var img = $("#<%=imgFull.ClientID%>");
    img.attr("src", $(this).attr('fullImg'));

    img.load(function(){
        img.css({
            top: "50%",
            left: "50%",
            marginTop: "-" + (img.width()/2) + "px",
            marginLeft: "-" + (img.height()/2) + "px"
         }, false);
    });
    $("#overlay").show();
    $("#overlayContent").show();
});

Now the fullImg attr is being get from $(this) which is the preview image, actually. The img now is the full image element that you have to deal to make it center on the screen. So img.width() and img.height() will stand for the dimensions of the full image, not for the thumbnail anymore.

Update: Better yet, use .css() instead of .attr() to set css properties to the element. Anyway, you should be concerned about probably getting z-index problems.

Update 2: Let's try positioning the image after the load is succeed. Didn't tryied it.

edited May 8, 2014 at 15:25

Trasiva

4941 gold badge14 silver badges29 bronze badges

answered May 7, 2014 at 20:41

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Tyler Biscoe Over a year ago

Is it normal to do img.attr(prop, value)? I always use .css.

DontVoteMeDown Over a year ago

@Tyler no, I realize that after. Fixed now.

Trasiva Over a year ago

As soon as our test server recovers from crashing I'll let you know how it went @DontVoteMeDown.

Trasiva Over a year ago

@JasonSperske You had to pick some of the creepiest Cage photos out there, no Face Off though? Tsk! However, it's still not quite centered, the top left corner is sitting centered...but not the entire thing.

Trasiva Over a year ago

@DontVoteMeDown Yea, I fixed it last night, I just forgot to mention it, thanks for sticking with me!

|

jshthornton · Accepted Answer · 2014-05-08 11:49:07Z

2

I wrote a utility script the other day which helps with this exact problem: https://github.com/jshthornton/buoy.js

This script does not include horizontal alignment as that can be achieved in CSS. Additionally, if you do not need support for IE<8 then you can use the transform trick to not even use JS.

http://caniuse.com/#feat=transforms2d

http://jsbin.com/paxuv/2/edit

answered May 8, 2014 at 11:49

jshthornton

1,31411 silver badges29 bronze badges

Collectives™ on Stack Overflow

Centering an image utilizing Javascript

2 Answers 2

15 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related