FB within ZF-5 Reveal doesn't zoom image on init. Works on Resize. about fluidbox HOT 11 CLOSED

I have taken a look at your code, and it seems that the ghost element is being assigned no height or width whatsoever. This is not typical Fluidbox behaviour, because in the code will check for the image dimensions before attaching the click handler. In addition, the fact that the enlarged image displays normally when you resize is an indicator that FB is unable to gain access to initial image dimensions on DOM ready (that is when Fluidbox runs the first round of calculations, and stores all image dimensions in the jQuery data object).

Some questions you should consider:

• Are the images dynamically added? You might want to call Fluidbox again after DOM insertion/update.
• Are you using any scripts that has lazy loading functionality?
• Are you using the latest version of Fluidbox?

A suggestion if everything fails: tear down your prototype site, and start with enabling Fluidbox on your gallery. Add other features incrementally, and see at which point Fluidbox stops functioning. That is because I am checking the console log on your site and unfortunately there are no errors being thrown, so I am not sure where the problem might have originated from.

from fluidbox.

Can you elabourate on the statement "It works fine if I don't place the gallery within the modal."?

The issue is not with the stylesheet. It is with the script that, for hitherto unknown reasons, does not have access to the image dimensions in your gallery. This is not usual—if you look at the official demo, you can see that I do not need to declare the image dimensions for this to work.

What if you strip everything away, but only use the images and Fluidbox in a blank HTML file? Can you still replicate the problem?

from fluidbox.

•Images are loaded regularly
•No Lazy Loading being used
•I'm using version 1.3.3

It works fine if I don't place the gallery within the modal.

Is there anyway I should call the height/width of the .fluidbox-ghost on init through the fluidbox.css ? Also I'm right now using "data-fluidbox", but should I have a class wrapped around that is class="fluidbox-ghost"?

Here is a working example not within the modal but on the splash of the page: http://beepia.ms/ams_fb

from fluidbox.

As you can see, it is probably something with your implementation that causes FB to fail to access the image dimensions. After putting it on the flashpage FB is working just as fine.

No, the class fluidbox-ghost is assigned automatically, doing so manually will mess with how FB works, and probably break the plugin. Just stick to using the HTML5 data attribute.

from fluidbox.

Is there anyway to "fake" a resizeWindow on init with your code? That's the one workaround I can think of, but haven't achieved any modifications.

from fluidbox.

You can simply trigger the window resize event using $(window).resize() or $(window).trigger('resize'). Note that this only partially solves your problem, and you should really examine your code about what is conflicting with FB.

I have so far implemented FB on several sites with other jQuery plugins, and there has not been any conflicts observed or experienced.

from fluidbox.

@terrymun Hi, I've also experienced the same exact issue and have been able to recreate a standalone, here you go: http://jsbin.com/dahucarazota/2

1. Basically, I have a table with some rows initially hidden via CSS (display: none).
2. Then, I added a link which will then reveal the hidden rows after they're clicked.
3. Notice that the first few rows that are not initially hidden works as expected.
4. For the hidden elements, however, is not the case. It seems that FB fails to read the width and height of the thumbnail therefore produces fluidbox-ghost with width: 0 and height: 0.
5. This is magically fixed when there's a slightest viewport resize, such as popping up inspect element in browser (which takes a bit of viewport height), or manually resizing them.

from fluidbox.

As I have mentioned previously, any methods that causes the image dimensions to be unaccessible to Fluidbox will return an error: which includes hiding them by using display: none. I'm planning to access image dimensions with the .get() method, will do some testing before applying a bug fix.

[Edit]: The .get() method is opening a new can of worms, so I strongly recommend using the "interim solution" recommended below.

For the moment being, an interim solution would be to rebind .fluidbox() to newly revealed elements. Alternatively, you can force the $(window).trigger('resize') event to simulate correct behaviour.

from fluidbox.

@terrymun, thanks for the quick reply. Rebinding .fluidbox() is also what I thought at first, but it's still not working. Check this out: http://jsbin.com/coqopu/5/edit

EDIT: this is better http://jsbin.com/coqopu/5

EDIT 2: $(window).trigger('resize') does the trick for now. Thanks!

from fluidbox.

I don't see that you're rebinding .fluidbox(). Rebinding it works — the trick is to bind to visible elements only:

$('[data-fluidbox]:visible').fluidbox();

$('.row-reveal').click(function() {
  $('[data-fluidbox]:visible').fluidbox();
});

See fixed demo here: http://jsbin.com/puhutitukeda/1/edit

from fluidbox.

No, I did rebind it in the Javascripts tab:

$('.row-reveal').click(function(e) {
  e.preventDefault();
  $('.collapsible-hidden').each(function() {
    $(this).removeClass('collapsible-hidden');

    // this doesn't work
    $(this).find('[data-fluidbox]').fluidbox();
  });

  // this also doesn't work
  $('[data-fluidbox]').fluidbox();
});

and the initial binding is done in the body script:

<script>
    $('[data-fluidbox]').fluidbox();
</script>

However, I noticed that the usage of :visible selector in the body script does the trick. It does not try to initialize on hidden fluidbox elements. So it seems that (literally) rebinding doesn't actually work.

Anyways, problem solved. Thanks for your help :)

from fluidbox.