terrymun / fluidbox Goto Github PK

It seems that the scale of the bigger image never stops, even you have a bigger monitor than the biggest image provided on the website.

IMHO the fluidbox should only scale to a maximum of the image size.

Specifying the CSS file in the main option would make this package much easier to user with grunt-wiredep.

Image enlargement animation is extremely choppy in Firefox (OS X, v31, v32 tested).

Right now, fluidbox is incompatible with lazy loading of images, because it requires that all images be loaded before it initializes. It would be great if the code were refactored/modified to allow for one off initialization of fluidbox (e.g., in a callback) so that it would work with lazy loading.

Hey

I am working on getting your Fluidbox to work in WordPress. (By placing the code in the head)
I have not yet been able to get it to work.
Could you give step by step detailed instructions on how to set up Fluidbox to get it to work correctly?
If you can also add some customization instructions along the way that would also be helpful.

A white flicker occurs on image enlargement in Safari (OS X, v7.0.6 tested). A double flicker occurs when image goes from large -> normal size.

The initial flicker is fairly consistent, while the large -> normal flicker is inconsistent. Some images trigger it, some do not.

Hi Terry,

I don't know if this is the right place to ask what probably is a simple noob question, but I can't get Fluidbox working.

Into the head of the HTML I have:

<link type="text/css" href="<txp:site_url />css/fluidbox.min.css" media="all" rel="stylesheet" />

At the bottom of the HTML I have:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="<txp:site_url />js/jquery.fluidbox.min.js"></script>

And the HTML is:

<a href="design/CIMG0919_sfw.jpg" title="" data-fluidbox><img src="design/CIMG0919_sfw.jpg" title="" alt=""></a>

I've put it on the server so you can look into the source > http://www.villaesma.es/txp (under construction) ... in Chrome 32 (Mac) it looks as intented (for now).

Joop

Hello,

I have just implemented Fluidbox on my website. Nevertheless, I am able to open multiple images at the same time and other weird bugs occur (http://gyazo.com/c6d3023f9b8ea6c3f96f38ba5b339380). I think that it's the same problem as described in #30 , but am not 100% positive about that and clueless in general when it comes to this bug.

Vincent

What's license is Fluidbox available under?

When the user scrolls, the lightbox does not disappear but stays open. It should be closed automatically.

when the img parent div is fixed size and set overflow: hidden, the image resized part will be hidden after zoom .
Any idea to deal with this case ?

There's a white flash when closing the Fluidbox that flashes twice.
The first is while scaling down the image and the other is after the image is closed.
I think this happens when switching between the two image sizes but the effect is really ugly.

Though you stated to keep this plugin simple, I think it's vital to have basic image navigation to make viewing a gallery of images more intuitive. Basic key navigation without any user interface would be fine, touch navigation (I prefer Hammer.js) would be a nice addition as well. Though phones might be too small, a tablet would benefit.

Would love to hear your thoughts and help you out 👍

Fluidbox fails to attach itself to anchors with more than one element in them. The lazy image loading plugin I use adds a noscript element in the anchor element below the image which is why Fluidbox skips it.

I'd suggest removing that 'feature' and in the case of multiple elements you pick the first img element. I might propose a pull-request later today.

Is Fluidbox registered in bower's registry?

# e@theaquaMacbook in ~ [12:57:24]
➜ bower search Fluidbox
No results.

# e@theaquaMacbook in ~ [12:57:31]
➜ bower search fluidbox
No results.

This would make a nice addition to cdnjs

If you click 3 times fast on an image (show big, close, show big), the animation seems not to finish correctly. So after the last click, the big image is not visible; opacity of the big image (the fluidbox generated div) is still on 0.

Sorry mate, I didn't mean to push you with my request yesterday.
Thing is, I checked your 1.2.4 and opened images now are kept behind other images, either thumbs or already loaded in some, to me, random manner. (Tested in Safari 7 and Chrome 33)
This also makes it undesirably possible to open several images at once.
This becomes most obvious in the galleries section or if you open an image that's not in your viewport center.

On another sight, something different: Safari 7 doesn't sharpen the image after zooming it, keeps it all blurred.

Sorry to make you fiddle around with this but that's my two observations from today.

People, contribute to this! It's a great plug-in!

On a device with a small screen we likely want the text and image to fit the entire width of the screen and so we need to disable fluidbox.

For instance, if I have only 480px, I do not want my text and image to be constrained to be even less than that (it makes text harder to read), only to have to use fluidbox to display the image at full device width... i.e at 480px. So, it would be useful to have an option to disable fluidbox under a chosen breakpoint.

The article suggest that "You can disable the effect easily, by adding a conditional statement listening on screen resolution upon the firing of the resize event.""

1. Would it be possible to post the code and instructions where to insert that code, or maybe create an alternative script?
2. Could a future version include a config option to disable fluidbox on small devices?

Hello!

Thank you for an amazing plugin!

I am trying to use fluidbox with images inside the Bootstrap Carousel since the .carousel{} class has overflow:hidden; fluidbox is not working as it is supposed to, It obviously works when I remove the overflow property but the carousel breaks. You have mentioned this case in the plugin's readme as well.

so basically is there any way I could make fluidbox work inside bootstrap's carousel?

Thanks for your help,

Hi,
Love the plugin – great job.

Trying to integrate Fluidbox into our website which uses Bootstrap v3 – the grid system seems to lock the overlay in place, stopping it from getting to its full dimensions and centering on the page.

As an example, if the smaller image version is in a 6 column grid (col-lg-6), and you click on it to open it to the overlay, the overlay white background works, but the image itself can't open larger than its container – so it opens up, centered, within the container, rather than being centered in the viewport.

Could you please advise?

Thanks,
Dan

Check out the website http://stegherr-uhrmachermeister.de/impressum and click on the "Zertifikat" image. The animation is very buggy. Sometimes the small image is getting repeated and sometimes it doesn't even show an image at all.
Any idea why this happens?

F.e. screenshot when I click 200x200 image
http://i.imgur.com/BFl0a3m.png

Great plugin! But let's suppose I have a fixed header like this: http://getbootstrap.com/examples/theme/

How would you let the lightbox stuff cover the header too (in other words, the whole viewport)? Also, is it possible to add an option to prepend the lightbox just before the closing body tag?

Cheers,
-P

As subject; especially in a gallery it would be nice+convenient to have a prev/next possibility (I understand that it would introduce all kinds of issues and not the original aim of the project).

Hi,

I've developed a simple example gallery with placeholder images here:

http://jsfiddle.net/5GDe4/7/

The site works on the latest versions of Chrome and Internet Explorer. However, on Firefox 28, once you've opened one image and closed it again, it appears that the lightbox overlay (id: fluidbox-overlay) is retained, meaning you can never click on anything else afterwards. You just end up resizing that one image ad infinitum.

Can anyone suggest where I'm going wrong, or is this an issue with the plugin?

(I'm on Windows 7 64-bit btw.)

Hi! Your project looks very promising, but have some problems with it, when I try to use it on images put in columns using the bourbon/neat grid.

1. The div.fluidbox-ghost is always visible and causes a big gap in my layout in size of the smaller scaled image.
2. When the image is clicked, the div.fluidbox-overlay is created but doesn't get the content.
3. The bigger image is cropped!

So, I don't know where is the mistake is, sorry! If you need my code or any screenshots for better understanding the issue, let me know.

See #77

Hi, pressing escape key to close Fluidbox should be added for accessibility matter.

To try it, apply border: 20px solid rgba(255,0,0,.2) to the <img> element, try it directly in devtools will do, you will see the closing animation glitch

I recorded a screenie, please wait for a while ,it is 3.5MB

https://cloud.githubusercontent.com/assets/1708463/3054784/c5820932-e1ba-11e3-9332-861fc18e06fd.gif

I simply fix it by

start from line 131

// Resize and position ghost element
$ghost.css({
  width: $img.width(),
  height: $img.height(),
  top: $img.offset().top - $wrap.offset().top + parseInt($img.css('borderTopWidth')), // it will be the computed value, em/% will become px
  left: $img.offset().left - $wrap.offset().left + parseInt($img.css('borderLeftWidth')),
});

Summary:
http://beepia.ms/ams --> Furniture Tab
Fluidbox 1.3.3
Zurb Foundation 5 Reveal-Modal

Fluidbox works within body, but when placed within reveal-modal, on init and image selection, doesn't bring the zoomed-in image to the front.

On Resize however, the image moves to front and resizes appropriately.

This works just fine in Windows, Linux, Ubuntu. The thumbnail is of 70x120, and the real image is 700x1200 (10x scale).

Any idea what might cause this? Is it the scale that's too big?

Hi, i loved your library, just wanted to ask if there is a preloader option or is on the way, or i just not saw it.

Thanks!

The description of the plugin version reads 1.2.1 in all files/downloads. Should match the latest release.

Also there's still one white flash when opening and closing (OSX Safari 7.0.2 and Chrome 33). Is this intentional? Medium has a very smooth transition without flickering. Would totally use your plugin if it was that way.

Anyways, kudos for a nice lightbox, love the positioning.

I've been changing the variables in source - having failed to effectively implement variable changes in the implementation. Any advise on how to control fluidbox variables in the "chain" implementation.

$(function () {
    $('a').fluidbox();

      viewportFill: 0.8    //example
})

thanks ian

Hey

How do I fix the issue of an image that popups up behind the body background?

Thanks!

Okay, so I'm using Jekyll (view my site's source) and Fluidbox is working on my local preview, but not on my live site.

I have no idea what's going wrong. Could issue with Cloudflare's Rocket Loader?

Summary: After clicking on a thumbnail, the larger image popups up. Once it's fully popped-up, it just (ever so slightly) changes in size, which makes the final result jump compared to the 'pre-final' one. The final image also seems to be more in focus ('sharper'?), don't know why.
On: Mac, latest version of Google Chrome
Page: http://terrymun.github.io/Fluidbox/

Click on the image of the church-like building, and look at the intersecting between the buildings really closely. After the image is done loading, the intersecting shrinks, appearing to 'bring the towers closer'. The image of the guy standing in front of the window seems to grow by a couple pixels after loading.

Firefox seems to have similar issues, but strangely enough only on the window picture, not on the church one. (Could be due to the additional toolbar I'm running on FF, which creates a different viewport).

Hi,

I guess I am the first one coming with an issue :)

Not sure how to explain it but please have a look at this page:
http://france.totorotimes.com/dune-of-pilat/

Not sure what the problem is but for sure the plugin doesn't show the image in a very nice way. Do you know what's going on?

Thanks a lot, can't wait to see this nice plugin working.

I think v.1.2.3 should be v1.2.3, right?

Hi!
Please look at: http://integral.github.io/stories/greenpeace/mannes-ubels/
Sometimes it works strange in OS X Firefox, for example after clearing cache

I think it'd be great if we could prevent scrolling while the lightbox is open. Is that possible?

My site is not live yet, so I can't provide a link .. I think there is an issue with where the ghost image is in the layout tree.

When I click a link there are a couple of issues (possibly same thing).

1. I see the image scale up, however the white div is in front of everything
2. The larger image is hidden by parts of the parent div(s)

First: Thumbsup on the cool plugin. - I'm planning on using it because of its simplicity.

I'm no programmer myself, so I don't know how it could be achieved or how much work it would be, but I really think it would be a very useful feature, to allow the prevention of upscaling.

I plan to use the plugin for the display of web design work, meaning: If I have a site that's only about 1000px wide, i hardly can produce shots that are bigger than this and If visitors have really big viewports, those screens might get blown up above original size quite a bit which doesn't really look very nice anymore.

Let me know what you think

Cheers
Phil

Hi,
first of all thanks for this great plugin.
I do have 2 questions please:
1- what is the browser compatibility for the plugin?
2- i would like to use it for a hight resolution image. Lets say the thumbnail in always 100x100px but the higher resolution image will not always have the same size and not necessary square. how can i achieve that?

Thanks

Would it be bloating if there was an option to step through a collection of images (gallery) using classic prev / next buttons while you are in "focus" mode?

Then it would be the neatest gallery plugin ever!

It appears that when a lightbox is and dismissed, the high z-index setting sticks with the image, causing visual conflicts. The z-index should reset when the lightbox is dismissed and the image returns to normal size/position. This happens in all browsers.

Here's the full explanation and example:
I have a site that's in development that uses a top header with a z-index of 999, allowing it to stay above the content at all times, even when scrolling vertically in the browser. It conflicts occasionally with Fluidbox, so I've used the stackIndex configuration setting (and CSS) to modify the Fluidbox/header relationship in a couple different scenarios:

If I set Fluidbox above the header, the lightbox appears to work perfectly. The semi-transparent (default white) overlay is placed, and the image is "lightboxed". However, after closing the lightbox and scrolling through the content of that page, the now-non-lightboxed image moves over the top of the header.

If I set Fluidbox below the header, the problem above is fixed: non-lightboxed image moves under the header. However, now the semi-transparent overlay doesn't cover the header at all.

The first scenario (Fluidbox above the header) seems like the way Fluidbox should work, with a bug stemming from the post-lightbox image's z-index holding the same setting as that of a lightboxed image—thus keeping the non-lightboxed image above the header.

Here's a link to the development site in question (specific content with an image):
http://charlotter.wpengine.com/issue-1/hello-world/

To replicate this issue:
—Click the image and scroll down and see that the image should go over the header menu bar. All should be well.
—Then, click the image again and the lightbox is dismissed, returning the image to its rightful place.
—Scroll down and you'll see the image go over the header menu bar, even in its normal state.

@terrymun This is amazing plugin. If there is a way to add a navigation (just like in an image gallery sort of a thing / You can click the next previsous buttons to move through the images) would be awesome.