Detect width and height of any resourcesFolder - jpg

Using JavaScript with Hype
1

i try to load jpgs from the resourcesFolder into a box, depending on width / height of the images.
i create a working example loading into the correct box by changing the width of a box using a slider.
but i don´t know how to detect the width or height of any resourcesFolder - jpg without using ids.
the background is to use this for loading images from a database.
depending on the width they should load into the right box.

var box = new Image();
var boxW = img.clientWidth;
var boxH = img.clientHeight;

… doesn´t work?
checkBild2.hype.zip (1,1 MB)

2

hope this’ll help :slight_smile:

	function getDim() {
    alert("width: " + this.naturalWidth + " ___ " + this.naturalHeight + " pixels");
    return true;
}
function loadFailure() {
    return true;
}
var myImage = new Image();
myImage.onload = getDim;
myImage.onerror = loadFailure;
myImage.src = '${resourcesFolderName}/' + 'hotel-kreta.jpg';
1 Like
3

thank you - this works perfect only for “hotel-kreta.jpg” image,
but i need it working for any img of the library, which is clicked at the moment.
do i have to create an array with img[i]??

4

If this is running on a server you may be able to use something like this to get the filenames dynamically in an array or use them in the other code to get the image sizes.

if (!window.images ){window.images =[];};
	window.imagePath = '${resourcesFolderName}/'; //--   path on server to images. 
	
	$.ajax({
    url : window.imagePath,
     async: false, //-- makes request synchronous so we can get globals working.  see http://stackoverflow.com/a/3222509/261305
    success: function (data) {
    
    $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.jepg|\.jpg|\.png|\.gif/) ) { 
              
           window.images.push(val);
             
            }
            
            
            });
     
    }
    
    });
    
    console.log(window.images)
2 Likes
5

hello @strmiska,

i had a closer look at your document. You’ve got an img within a button within a hypeelement. a behaviour is attached to the hypeelement targeting the img.

so:

var imgEl = element.querySelector('img') /*<-will get the img within the hypeelement*/, dim/*<-will hold the dimension*/;

dim = (imgEl.naturalWidth > imgEl.naturalHeight) ? "landscape" : "portrait";/*<-distinguish between landscape and portrait */

1 Like
6

thanks @h_classen! this looks good - i´ll give a try today :yum:

7

@h_classen solution works for my example - thanx.
and thanx to @MarkHunte, too - but i haven´t tested it yet by using a database.
I’ll keep that in mind

1 Like