Specifying width and height does not work

[steverob]

I am trying to build a gallery and Im using your amazing library. I initially did not use height and width. It worked perfectly.

Now I wanna try out with height and width attributes specified. Here is my HTML:

<div class='album-photoss'>
  <!-- - Photo.all.each do |p| -->
  <!-- = image_tag small(p), width: p.small_version_width, height: p.small_version_height -->
  <img height='150' src='http://deelay.me/3500?http://placehold.it/350x150/69D2E7/ffffff' width='350'>
  <img height='180' src='http://deelay.me/2500?http://placehold.it/320x180/A7DBD8/ffffff' width='320'>
  <img height='300' src='http://deelay.me/1500?http://placehold.it/320x300/E0E4CC/ffffff' width='320'>
  <img height='500' src='http://deelay.me/4000?http://placehold.it/472x500/F38630/ffffff' width='472'>
  <img height='360' src='http://deelay.me/3200?http://placehold.it/540x360/FA6900/ffffff' width='540'>
  <img height='600' src='http://deelay.me/2000?http://placehold.it/800x600/ECD078/ffffff' width='800'>
  <img height='120' src='http://deelay.me/1200?http://placehold.it/400x120/D95B43/ffffff' width='400'>
  <img height='300' src='http://deelay.me/4500?http://placehold.it/300x300/C02942/ffffff' width='300'>
  <img height='500' src='http://deelay.me/4500?http://placehold.it/320x500/542437/ffffff' width='320'>
  <img height='300' src='http://deelay.me/4500?http://placehold.it/450x300/53777A/ffffff' width='450'>
  <img height='360' src='http://deelay.me/3200?http://placehold.it/540x360/FA6900/ffffff' width='540'>
  <img height='600' src='http://deelay.me/2000?http://placehold.it/800x600/ECD078/ffffff' width='800'>
  <img height='120' src='http://deelay.me/1200?http://placehold.it/400x120/D95B43/ffffff' width='400'>
  <img height='300' src='http://deelay.me/4500?http://placehold.it/300x300/C02942/ffffff' width='300'>
  <img height='500' src='http://deelay.me/4500?http://placehold.it/320x500/542437/ffffff' width='320'>
  <img height='300' src='http://deelay.me/4500?http://placehold.it/450x300/53777A/ffffff' width='450'>
</div>

And here is my CoffeeScript:

$(document).ready ->

  $(".album-photoss").removeWhitespace().collagePlus
    fadeSpeed: 2000
    targetHeight: 200

I am only seeing a blank page. Upon inspection I can see that the images have been applied the following styles:

<img height="150" src="http://deelay.me/3500?http://placehold.it/350x150/69D2E7/ffffff" width="350" style="height: 0px; margin-bottom: 0px; margin-right: 0px; display: inline-block; vertical-align: bottom; overflow: hidden; opacity: 1;">

Could you please help me out on this one?

[steverob]

I dont see any errors or messages in the Console. So I think I've included everything properly.

[steverob]

Okay. For some reason, $img.height() is returning 0 in the library. And so the nh value becomes Infinity. I set the data-height attribute on the images and its fine now. :+1: