0

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.

Trasiva
  • 494
  • 14
  • 29
  • How do you get `img` object ? – DontVoteMeDown May 07 '14 at 20:30
  • @DontVoteMeDown Sorry, missed that somehow: `var img = $(this);` – Trasiva May 07 '14 at 20:32
  • Post more of your code. The value of 'this' changes based on the context and scope. – Tyler Biscoe May 07 '14 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 May 07 '14 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 May 07 '14 at 20:40

2 Answers2

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.

Trasiva
  • 494
  • 14
  • 29
DontVoteMeDown
  • 21,122
  • 10
  • 69
  • 105
  • Is it normal to do img.attr(prop, value)? I always use .css. – Tyler Biscoe May 07 '14 at 20:42
  • @Tyler no, I realize that after. Fixed now. – DontVoteMeDown May 07 '14 at 20:43
  • As soon as our test server recovers from crashing I'll let you know how it went @DontVoteMeDown. – Trasiva May 07 '14 at 20:46
  • @Trasiva Ok, take your time, dude. – DontVoteMeDown May 07 '14 at 20:48
  • I think you need to change those css keys to camel case – Jason Sperske May 07 '14 at 20:52
  • Here is a jsfiddle (using the excellent PlaceCage.com) http://jsfiddle.net/4LNpY/ though it's missing some more of your HTML and CSS to be a drop in solution you can at least play with the JavaScript to see how to sort out your question. – Jason Sperske May 07 '14 at 20:55
  • @JasonSperske damn.. thank you for pointing that. I really missed that. – DontVoteMeDown May 07 '14 at 21:01
  • 1
    @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 May 07 '14 at 21:05
  • @Trasiva you're sure that the `$("#<%=imgFull.ClientID%>")` selector **is** your full image? If yes, then you'll might try using [image's load evet](http://stackoverflow.com/q/10121797/1267304) to set all the properties after the load was succeed. Got it? – DontVoteMeDown May 07 '14 at 21:13
  • @DontVoteMeDown So after looking, it seems like it's not recognizing the image size of the img var. `img.width()` and `img.height()` are coming back as 0. – Trasiva May 07 '14 at 21:13
  • @DontVoteMeDown the `$("#<%=imgFull.ClientID%>")` references the image I'm using. The image shows and hides just fine, and it's calling the correct image from our test database. I just don't understand why it's not picking up on the image size. Seems like adding a load event is entirely too much work **just** to center the stupid thing. – Trasiva May 07 '14 at 21:19
  • @Trasiva look the update. The most important thing here is try to understand what is happening. I think that when you try to access image's size, the image itself isn't loaded yet. Check it out. – DontVoteMeDown May 07 '14 at 21:27
  • @DontVoteMeDown You're right, the image wasn't loaded beforehand, your code gave an error though for the listener: `Uncaught TypeError: undefined is not a function Cameracaptures.aspx?FleetID=5:258 (anonymous function) Cameracaptures.aspx?FleetID=5:258 b.event.dispatch jquery.js:9593 b.event.add.v.handle` – Trasiva May 07 '14 at 21:33
  • @Trasiva now I see. The error should be on the `img` variables inside the event handler, because `img` doesn't exist inside it anymore. Try changing it to `$(this).width()` too. It should work. – DontVoteMeDown May 08 '14 at 11:43
  • 1
    @DontVoteMeDown Yea, I fixed it last night, I just forgot to mention it, thanks for sticking with me! – Trasiva May 08 '14 at 15:19
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

jshthornton
  • 1,284
  • 11
  • 29