CODEWITHSUNDEEP
jquery
Gord
Gord

Reputation: 73

Is there a way to get the img size from this js and apply it this jQuery function

I'm working inside a program that has an old js pop up and I'm trying get it into a jQuery modal window, the problem I'm having is getting the img size.

This is the 24hr DEMO

The original script is this:

<script type="text/javascript">
  <!--
    function newWin(strURL,imgheight,imgwidth) {
    var mybar='toolbar=no,directories=no,status=no,menubar=no,resizable=no';
    mybar+=',width=';
    mybar+=imgwidth;
    mybar+=',height=';
    mybar+=imgheight;

    window.open(strURL, 'newWin', mybar);
  }
//-->
</script>

..and the HTML get's written like this:

<div id="TMBOBJ7DD361E59F1760" style=" position:absolute; top:201px; left:79px; width:150px; height:96px;  z-index:4;" >
<a href="nextpop/imag001A.html" onclick="newWin('nextpop/imag001A.html',408,630);return false;" target="_blank">
<img src="nextpop/imag001.jpg" width=150 height=96 border=0 alt="Mustang">
</a>
</div>

Now I have it so it all converts with this jQuery as you can see in the DEMO

$(document).ready(function() {

$('[id^=TMBOBJ]').each(function() {
var $a = $(this).find('a');
$a.attr('href' , $a.attr('href').replace('html', 'jpg' ));
$a.removeAttr('onclick');
$a.removeAttr('target');
});

$(function () {
var top = Math.max($(window).height() / 2 - $("#large")[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - $("#large")[0].offsetWidth / 2, 0);
$("#large").css('top', top + "px");
$("#large").css('left', left + "px");
$("#large").css('position', 'fixed');
});

$('#background').each(function() {
$(this).css('height',$(document).height());
$(this).css('width',$(document).width());
});

$('[id^=TMBOBJ] img').click(function(){

$("#background").css({"opacity" : "0.7"})
.fadeIn("slow");

$("#large").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("alt")+"")
.fadeIn("slow");
return false;
});

$("#background").click(function(){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});

$("#large").click(function(){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});

});

Except I can't figure out how to get the img size any ideas it's a tough one for a beginner like me. I tried this:

$("img").load(function(){
    var img = document.getElementById('[id^=TMBOBJ]'); 
    var width = img.clientWidth;
    var height = img.clientHeight;
});

But I need to get the size out of the original script is what I'm thinking? I know... but it'll help update the wysiwyg program for folks and I am close (it's proved to be an interesting problem too geting this far).

Upvotes: 0

Views: 79

Answers (1)

couzzi
couzzi

Reputation: 6366

document.getElementById('[id^=TMBOBJ]'); is an issue/won't work as it expects an ID, not a query selector.

Either make it a jQuery selector: 

var img = $('[id^=TMBOBJ]');

or use document.querySelectorAll()

var img = document.querySelectorAll('[id^=TMBOBJ]')

Worth nothing that both of these selectors will return an array of DOM elements, so your load function should be modified, or simply use $(this) for your scope.

Also, use jQuery to its full potential!

$("img").load(function(){
    var img = $(this),
        width = img.outerWidth(true),
        height = img.outerHeight(true);
});

Upvotes: 2

Related Questions