search

landsurveyorsunited / pwi

Automatically exported from code.google.com/p/pwi
0 stars 0 forks source link

Overlap of pictures due to wronly set divHeight/divWidth #126

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What is the expected output? 
A nice gallery of album pictures.

What do you see instead?
Overlapping pictures because of wrong height/width set.

What version of the product are you using? On what browser and version and
operating system?
PWI 2.0
Chrome Version 27.0.1453.93
OS X 10.6.8

Link to site showing the described behaviour:
Not online yet.

Please provide any additional information below.

It seems (see screenshots attached) that at first the alignPictures function is 
called before the images of the divs have been loaded. This causes a wrong 
divHeight to be used, and all divs appear as overlay over the preceding line.

In the last two screenshots you can see that after a few reloads, it seems the 
pictures have been loaded, and the right width & heights are used, yielding the 
expected result.
The amount of reloads is irrelevant, as this should not happen at all.

Original issue reported on code.google.com by jeroen.v...@gmail.com on 28 May 2013 at 9:14

Attachments:

GoogleCodeExporter commented 9 years ago 
The popups you see on the screenshots is debug code i inserted to see what 
width/heights are being set.
You can clearly see the different values on the same pages.

Original comment by jeroen.v...@gmail.com on 28 May 2013 at 9:15

GoogleCodeExporter commented 9 years ago 
Can you please provide the configuration you use for PWI? If you do not want it 
to be public (yet) you can also mail it me at borkhuis at gmail.

Original comment by borkh...@gmail.com on 28 May 2013 at 9:19

GoogleCodeExporter commented 9 years ago 
I did have a look at this, however I cannot reproduce it. It probably also 
depends on the speed of the internet connection. When images are not loaded 
quickly enough the script cannot calculate the height of the div.

I will have a look at this, to see if I can do something about this.

Original comment by borkh...@gmail.com on 1 Jun 2013 at 6:02

GoogleCodeExporter commented 9 years ago 
You can try to see if you can reproduce on a live install: 
http://www.atriac.be/drupal/picasaweb/albums

Original comment by jeroen.v...@gmail.com on 1 Jun 2013 at 6:14

GoogleCodeExporter commented 9 years ago 
Is it possible to wait for a document loaded event, or incorporate a check to 
see if the images have loaded ?

Original comment by jeroen.v...@gmail.com on 1 Jun 2013 at 6:15

GoogleCodeExporter commented 9 years ago 
Exploring my last comment further, i have the following suggestion, using 
another jquery plugin (but i assume you could just copy it's functionality into 
your project) :

- Download and add this plugin: 
https://github.com/alexanderdickson/waitForImages/blob/master/src/jquery.waitfor
images.js

Surround each call to alignPictures as shown below:

             $('.pwi_container').waitForImages(function() {
               alignPictures('div.pwi_photo');
             } );

This way, the alignment won't start until all pictures have been loaded.
The only possible 'drawback' is that you will see the images move on the 
screen, but i'm assuming that would have been the case in the current setup, so 
no harm there ?

Hope this helps !

Original comment by jeroen.v...@gmail.com on 1 Jun 2013 at 10:41

GoogleCodeExporter commented 9 years ago 
Hi,
I thought I had this issue, inserted the code but now I have slower alligning 
images, but the problem is my thumbnails show as lines, and only after pressing 
refresh all thumbnails come out

Original comment by marijn.g...@gmail.com on 9 Oct 2013 at 5:54