Height of first slide not determined - collapse to zero

Thanks, I'm not seeing the issue localy, but the change makes sense.

Committed: http://drupal.org/commitlog/commit/14264/e8b34c414e9b6dd683ab7c45d39d6df...

I'm seeing this too.

I had installed 7.x-1.2 but I deleted & updated to the 7.x-1-dev version and it is still happening on node pages. I have double checked & the fix in the js above is being served to the browser & the showFirstSlide function does run on page load (I added a console.log within the function).

For what it's worth I'm seeing it in Safari & Chrome, but Firefox is expanding the gallery-slides div to show the first large thumbnail.

I thought it may be theme issues but it still happens in Bartik. I cleared my caches & disabled Safari extensions.

I'll try a clean install to see if it still occurs.

I just copied galleryformatter.js from version 7.x-1.1 and it fixed the problem with first slide.

I retried with a clean install & it works fine.
I'm still seeing the problem when I refresh the page on my existing site, it never expands on a page refresh.

I just tried the js from 1.1 and it still won't expand on refresh.

I logged the image size that is used to expand the div & it always reports 0 on page refresh.
On line 62 console.log ($hash.find('img').height());

I'm trying to disable all other modules that output js to see if one is causing the issue, I suspect it is something to do with cached images being loaded after the script?

I'm at a loss, anyone got ideas?

It seems like it is the browser failing to get the correct dimensions from cached images.

The following seems to work…

Replace line 61 of galleryformatter.js

        $slideContainer.css("height",$hash.find('img').height());

with…

        $hash.find('img').load(function() {
          $slideContainer.css("height",$hash.find('img').height());
        });

For reference I found the solution here… (it should probably be made to account for IE too, see Rytis's comments).
http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

This fixes it in Chrome & Safari as mentioned above. It looks this is only me seeing behaviour this so I expect it won't be committed, is there a clean way to make it apply without hacking the module?

Got the same problem in Chrome and Safari. But this last solution worked fine for me. Thanks drew!

Can you guys seeing this problem try this code instead of #6 :

var $firstimage = $hash.find('img');
if($firstimage.height() > 0) {
  $slideContainer.css("height",$firstimage.height());
}
else {
  $firstimage.load(function() {
    $slideContainer.css("height",$firstimage.height());
  }
}

In order to avoid the CDN and other issues mentioned in the comments here for the proposed solution.

I tried #8 in Safari & Chrome & Chrome Canary (on OS X). I emptied Drupal's & the browsers caches.
Slide 1 loads correctly.

There seems to be an error in #8 I think it should have a }); on the last but one line e.g.

        if($firstimage.height() > 0) {
          $slideContainer.css("height",$firstimage.height());
        }
        else {
          $firstimage.load(function() {
            $slideContainer.css("height",$firstimage.height());
          });
        }

Otherwise console complains, perhaps I'm just inserting it wrong, I replaced line 61 of galleryformatter.js with the above.

Incidentally the broken version in #8 makes the URL hashes work, they actually appear in the address bar, but the page jerks quickly to align the slideshow to the top of the viewport.

I hadn't given it much thought, but as it stands with & without this fix the hashes don't appear at all, so deep linking is broken in browsers that should support it.
Entering the url manually with the hash will load the correct slide.

Thanks drew reece for the detailed test report.

I'm marking this as needs work. Also, the correction you made to my code on #8 looks correct, although I haven't tested it yet.

Tested the code in #9; was having the problem with multiple browsers and this fixes it.
Many thanks! I didn't want to revert to 1.1 given the security fix in 1.2.

Amended: Spoke too soon...

This patch fixes the problem with displaying the first slide image BUT kills the LEFT and RIGHT scroll buttons on the slide itself. The green arrows on the thumbnails work correctly and are present. The back/grey shaded arrows on the slide for left and right are now missing.

Reverting back to the original code for line 61 restores the behavior where the first slide is NOT displayed - clicking on another thumbnail reveals the appropriate slide and the slide left/right arrows are present.

Haven't had a chance to dig in and find out why...

Stu

I am also having this issue. (First slide does not load initially. Only the thumbnails show. Once the 2nd thumbnail is clicked, the main image finally appears.)

I have tried the above solution (#9) and it did not resolve the issue. This is happening in Google Chrome and Safari only.

Here is my gallery: http://benext.ca/location/photo-gallery

I do not want to have to strip out this module and use an alternate because I am happy with everything except this issue.

Please help.

Furthermore, I used the Gallery Formatter module on this site as well (Drupal 6) and it works fine!
http://www.liveqwest.com/interiors

The previous link I posted (benext) is a Drupal 7 site.

So this issue seems to be limited to Drupal 7.

Thanks Manuel, this works with the addition of the missing ); as noted.

Here is a patch with what we have up to comment #9 so that we can test this easier.

About the problem mentioned in #11, it's indeed an issue. The chrome console spits out this when clicking on the buttons:
event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

Searching about it, I found this, where they mention a bug in jQuery. Apparently this is fixed now if you upgrade to jQuery 1.7 ... anyone using that on their installation? can you report if this is a problem still with jQuery 1.7?

I applied the patch at #15 and it's still not working - the problem remains.
I use the jQuery 1.5.2 as the update to 1.7 has not yet a stable version (jQuery Update module).

Thanks for help

Edit: the problem remains in Firefox (15.0.1). In IE 9 and Chrome 22, it's OK.

Seems OK with jQuery 1.7 on Firefox and Chrome

And the two buttons to switch the main image (= not he green arrows at the bottom but the transparent on the bigger picture) are working fine?

For me I can't switch the images unless I click first on one of the preview images (in the row below the main picture). Then it works... But still, that is confusing for the visitors and as the Gallery constitutes the principal part of the node, it's quite annoying.

Is there a simply and secure way to install the jQuery 1.7 (without modifing manually the code) --> as I said above, the jQuery Update module updates only to 1.5 version.

Thanks for advice / help.

Use the dev version of jQuery Update to get 1.7 (although if you do and you use Views, you'll need to upgrade ctools to dev version as well)

Tried different versions of jQuery, stable and dev versions of CTools, tried patch from post #15. In Chrome v22 height still equals zero. In Firefox and IE all is good. Is problem in zero height or like it seems to me - image not loaded?

Solution from #0 post doing his work!

Scratch #17 - the issue is still present with 1.7, apologies for posting too soon. The issue does not manifest itself often in Firefox on Linux but Windows users report frequent occurences. I ended up setting fixed height on 'gallery-slides' div - seems to have helped but again I may be posting too soon.

I tried to check with Firebug and you can see that the block starts at the top of the gallery (as the first picture is not shown, it starts at the top of the thumbnails row) and it goes down, below the thumbnails and it continues to the next content of the web page. I mean the firebug blinking border of the selected element. So the that "border" has the correct size (at least in my case) but the image is not shown and the element border "envelop" also the text that is on the page just below the gallery.

Other remark: it happens only when the first picture is not in the browser cache. When I print Ctrl+F5, it occurs. If I go to some other web content and after I go bact to the gallery (even not via history but directly via URL) it's working fine.

So personally, I have two problems:
1° first image not shown when the page is loaded
2° when you can see the first picture (thanks to cache), the grey arrows on the "main" picture (not green arrows) are not working until you click on one of the thumbnails in the row below.

I use Windows 7...

Thanks drew - solved my issue on firefox, chrome and IE9...

In case it helps anyone else... to help with keep my theme responsive I also added a $(window).resize function inside $thumbslinks.click()... without it the thumbnails weren't responding correctly.

$(window).resize(function() {
          $slideContainer.css("height",$hash.find('img').height());
});

Bug still appears in Chrome and sometimes in FireFox. In Chrome nearly always div.gallery-slides height = 0px yet after Ctrl+F5 and in Firefox sometimes div.gallery-slides height = 19px. d:?mmy. All updated to latest...

Replece this
$slideContainer.css("height",$hash.find('img').height());

to

        var $firstimage = $hash.find('img');
		if($firstimage.height() > 0) 
		{
		  $slideContainer.css("height",$firstimage.height());
		}
		else
		{
			$firstimage.load(function() {
			$slideContainer.css("height",$firstimage.height());
		});
		}

I don't think this is fixed yet, be careful with the status popup xr0m3oz.

That code in #25 is basically the same as #8 and #9.

I am running Gallery Formatter 7.x-1.2 on Drupal 7.14, jQuery 1.7.
I forced via CSS a fixed height for the image. It works fine, but in IE8, where the slide is never displayed. I can see the thumbnails and the gray right/left arrows, but never the image, nor clicking on the arrows neither clicking on the thumbs.

I tried the code in #9, deleted the CSS "fix", but then the behavior gets really weird on Firefox, too, namely not displaying the slide.

Any suggestion on how to fix this problem would be much appreciated.
Thanks!

Hello guys,

I've tested the solution #9 and it's working for the height load issue.

thx,

p.s.
Do not forget the first line before coping and pasting the #9 into: /sites/all/modules/galleryformatter/theme/galleryformatter.js:
var $firstimage = $hash.find('img');

Had the same issue on Chrome. #15 fixed it.
Thanks

#9 and #15 not working for me. Firefox 16.0.2. I can confirm it is working in IE 8 and 9 though.

Anyone have any ideas on this one? #25 seems to resolve the issue in IE9, and Google Chrome for me, but in Firefox 16.0.2 still not working.

I'm not sure if this helps anybody, but I was able to get the heights loading properly in all web browsers by:

1. Adding jquery code from #25
2. Installing jQuery Update module for Drupal 7. (Not sure if this made a difference, but thought it would be good to do in case issue with outdated Jquery).
3. Adding the following code to my pages.css css file in Zen Subthemes. Seems that there was code in Zen Subtheme which was conflicting with img heights for Gallery Formatter

.galleryformatter img {
	height: 100%;
	max-width: none;
}

For me, separating the value from the setter worked. That is, change galleryformatter.js, line 61 from:
$slideContainer.css("height",$hash.find('img').height());

to

var $slideHeight = $hash.find('img').height();
        $slideContainer.css("height", $slideHeight);

That was enough to get the first slide to appear. This is on Drupal 7.17 with GF 1.2.

A followup: the above change doesn't work in and of itself as I thought. However, if the browser is debugging the JS at that spot (after var $slideHeight), it works consistently. Could it be an issue of timing?

Sorry, one last reply and then I'll shut up for a while!

The solution is easy (and related to timing!): take the startup behaviour processes like

   var $locationHash = window.location.hash; // if we are being deeplinked to a specific slide, capture that

   function showFirstSlide(){
     // Activate the first slide
     $('a', $thumbsLi.filter('.slide-0:not("cloned")')).trigger('click');
    }

   // if we have a hash in the url
   if ($locationHash) {
     var $slideToShow = $slides.filter($locationHash);
     // if the hash corresponds to one of our slides
     if ($slideToShow.length > 0) {
       $slideToShow.show(); //  show that slide
       $thumbsLi.not($(".cloned")).find("a[href="+$locationHash+"]").parent().addClass('active'); // activate that thumbnail
       // set the slide container's height to allow use of portrait images
       $slideContainer.css("height", $slideToShow.find('img').height());
     }
     // otherwise the default
     else {
       showFirstSlide();
     }
   }
   // otherwise the default
   else {
     showFirstSlide();
   }

and move it outside of the Drupal.galleryformatter.prepare function and into a separate function (I used activateGF()) along with the necessary variables which is fired in

$(document).ready(function() { 
$('.galleryformatter').each(function(){activateGF(this);}); })

Now, the only issue is showing the $locationHash slides on load (for whatever reason, this rearrangement botches that part, but the initial image will load properly).

You're not the only one seeing this issue. It is happening on a clients store that I am working on. The gallery does not load the first image (the big one above the slider bar) until new images are clicked on it. I'm hoping I can find the solution in here.

Thanks for this post, I'm going to try it.

I'll be posting a patch later this week. I was in the process of altering this to be responsive and noticed that when those numbers were removed, things just worked. So, I'll be posting a patch which (1) is responsive (I was working with Omega/Alpha theme) and (2) resolves the height display issue. Some info until I get the patch: the issue is that most browsers do not know what height the image is until after it loads, which makes things difficult for this script which runs before then!.

Cool! Thanks a lot for solving this problem!

OK, let's try a more aggressive approach... don't do anything until all assets are loaded.

Please test the patch attached and report back with any findings.

I tested the patch #39:

OS: Windows 7

Chrome 23 & IE 9 & Firefox 17

--> problem with the first image height is solved BUT (!) the arrows (nor the green below, nor the grey above) are not shown and the thumbnails are not in one "moving" row but in several "fix" rows.

Thanks PMZ for testing.

That sounds like the JS is not being executed PMZ ... does the firebug js console show any error messages?

Hi Manuel,
I made a mistake during the upload of the patched file (it was at 1h in the morning...)
I re-checked and: IT WORKS FINE - everything works perfectly on the 3 browsers.

Thanks a lot!
Martin (PMZ)

Great, thanks for testing PMZ, committed to 7.x-1.x
http://drupalcode.org/project/galleryformatter.git/commit/362b2a1