Code Monkey home page Code Monkey logo

fluidbox's Introduction

Fluidbox

Build Status Latest Github release npm downloads Starred Watchers


⚠️ Public service announcement: I am officially archiving this repo because I have since moved on from using jQuery in my development works, and therefore will no longer maintain this repo. Feel free to fork your own copy. Thank you for your support all these years.


If you're using Fluidbox for production, use the latest stable release and not the edge release (latest commit).

Replicating and improving the lightbox module seen on Medium with fluid transitions. View demo here. For users who are looking for a quick setup and/or troubleshooting process, refer to basic usage, but do not forget to read the usage precautions and frequently asked questions.

Although not thoroughly tested, Fluidbox should be working in IE ≥10 and all versions of Chrome, Firefox, Safari, iOS Safari and Android Chrome, with the exception of Opera Mini. However, I suggest disabling Fluidbox on mobile devices or at small screen resolutions.

Special thanks to the following stellar folks who has helped majorly in making Fluidbox better:

  • @hybernaut for refactoring the code and reorganizing functions
  • @maxee for implementation of a new feature that enables differential image ratios between thumbnails and linked image
  • @benwhilhelm for suggesting the immedate open option in Fluidbox. Ben has author a PR, but I have found some issues that I cannot resolve. However, I have adopted his idea and simplified the implementation in v1.4.3.
  • @jaechick for creating the LESS file for Fluidbox stylesheet, even though the LESS file is removed from the project as the stylesheet is now being preprocessed by SASS.
  • @_mattbailey for his awesome guide towards integrating Grunt into a project. This has made building Fluidbox a lot easier.
  • @DJDavid98 for enabling proper parsing of backgorund image URLs. Note that the URL provided still has to be RFC3986-compliant.
  • @Gaya for fixing the blurry image issue on OS X / macOS.
  • @Mesoptier for cleaning up messy CSS transition declarations.

In addition, a shoutout to:

Introduction

Fluidbox was initially a simple personal challenge I set myself, with two simple aims—to replicate the distraction-free, fluid lightbox seen on Medium, and to improve on it such that it will allow linking to a larger-resolution image. The plugin deals with higher resolution, linked images elegantly, such that it only preloads them when users click on the thumbnails, therefore conserving bandwidth usage for your visitors and your server(s).

The plugin is relatively lightweight: 8.74kb (2.71kb after gzipped) for the minified JS file, and 2kb (667b after gzipped) for the minimal stylesheet.

You can read my article on Medium about how I got inspiration for this little project of mine, and the basic mechanisms behind the plugin. Some serious math is involved (nah, not really).

Moreover, you can visit the demo of this plugin on the project page hosted with GitHub. The plugin v1.22 and onwards (uncompressed, minified and its associated CSS file) is hosted with CDNJS.

In the wild

Fluidbox is part of the vast collection of libraries proudly hosted by CDNJS. You can reference all versions of Fluidbox published hitherto from there.

Fluidbox has been implemented on other sites in the wild, too—check it out:

To add your site that has implemented Fluidbox, or an article/tutorial you have written on Fluidbox use and/or application, feel free to write to me at @teddyrised.

Installation

To install Fluidbox, you will have to include the following resources in your page. The JS files should be loaded in the order stipulated below. For the CSS file, you can either incorporate it with your site's stylesheet, or load it externally through the <link> element in <head>.

Type File Name Description
JS jQuery 1.x External Dependency: The latest verson of jQuery 1.x library is needed for Fluidbox functionality. Minimum version requirement: v1.7
JS jQuery debounce/throttle plugin External Dependency: Ben Alman's plugin is optional, but highly recommended.
JS dist/js/jquery.fluidbox.min.js Confers the main functionality of Fluidbox. Alternatively, you can load the minified version, jquery.fluidbox.min.js
CSS dist/css/fluidbox.min.css Offers styles that are crucial for the correct display of Fluidbox. The appearance will break if this is not included. Properties in this file include the necessary vendor prefixes.

If you are modifying the source in the src/ directory and wish to rebuild (or make your own build), please refer to the developer notes further down the readme.

Dependencies

Fluidbox require the following dependencies in order to function properly—you will have to include them in your page, if you want Fluidbox to work:

  • The latest release of jQuery 1.x (minimum requirement: jQuery ≥1.7), available from Google's jQuery API at http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
  • Ben Alman's debounce/throttle plugin, available from CDNJS. This plugin is not compulsory but highly recommended, as it throttles how frequent the window resize event is fired, which triggers recomputing and repositioning of Fluidbox-related elements. Fluidbox will issue a warning, but will still work, if this plugin is not loaded.

Usage

Basic

It is rather straightforward to use Fluidbox—simply chain the .fluidbox() method to a selector of your choice. The plugin will automatically check if the selector is:

  1. An anchor element (<a>)
  2. Contains one and only one <img /> element (can be nested as an indirect descendant, to support the HTML5 <picture> standard.
  3. Is visible upon DOM ready

In the event that the element that satisfies the selector criteria but failed any one of the above criteria, the element will be ignored and the plugin moves on to the next available element. Therefore, it is important that your Fluidbox element(s) follow the following format. The title and alt attributes of the <img> element is not used by the plugin, but the alt attribute has to be present for it to be semantically valid.

<a href="/path/to/image">
    <img src="/path/to/image" alt="lorem ipsum" />
</a>

...or...

<a href="/path/to/image">
    <picture>
        <source media="(max-width: 650px)" srcset="/path/to/alt/image">
        <!-- img tag for browsers that do not support picture element -->
        <img src="/path/to/image" alt="lorem ipsum">
    </picture>
</a>

In your JS file, you can simply chain the .fluidbox() method to your selector on DOM ready:

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

The selector can be anything of your choice. Let's say you want to target the <a> elements specifically in a certain section on your page:

<section id="gallery">
    <h1>Title</h1>
    <p>Introductory text with an <a href="#">unrelated link</a></p>
    <a href="..." rel="lightbox">
        <img src="..." alt="" />
    </a>
</section>

Then, you can use, for example:

$(function () {
    $('#gallery a[rel="lightbox"]').fluidbox();
})

Public functions and custom triggers

There are several public functions exposed in the Fluidbox plugin that allows you to manipulate individual Fluidbox instances. There are three ways of calling public functions. Let's say we want to call the close method of Fluidbox:

// Method 1: Call as an argument in `.fluidbox()`
$(selector).fluidbox('close.fluidbox');

// Method 2: Call using a custom trigger via `.trigger()`
$(selector).trigger('close.fluidbox');

// Method 3: Call by chaining the `.data('plugin_fluidbox')`
$(selector).data('plugin_fluidbox').close();

Here is an example:

$('button').click(function() {
    $(selector)
    .css('width', '200px')
    .fluidbox('recompute'); 
});

The list of public methods supported by Fluidbox v2.x is as follow:

Method Version Description
open ≥2.0 Triggers the programmatic opening of Fluidbox.
close ≥2.0 Triggers the programatic closing of Fluidbox.
compute ≥2.0 Triggers (re)computing and positioning of Fluidbox instance. Useful when you are altering the size of the thumbnail (such as DOM manipulation). Remember that the window resize event, which might change the thumbnail dimensions, is listened automatically for you.
destroy ≥2.0 Destroys the Fluidbox instance and reinserts the original DOM node.
bindEvents ≥2.0 Binds the one and only click event.
bindListeners ≥2.0 Binds listeners so that Fluidbox listens to public methods called by the .trigger() method.
unbind ≥2.0 Unbinds the click events and all other listeners associated with Fluidbox function.
reposition ≥2.0 Repositions the ghost element, useful when Fluidbox is not opened, but the thumbnail dimensions are changed.
getMetadata ≥2.0 Getter function. It returns all the metadata associated with the Fluidbox instance, and does not return the original jQuery object, and is therefore not suitable for chaining.

Custom events

Fluidbox will trigger several distinct namescpaced events depending on the state of the current (and only) instance of Fluidbox. You should use .on() to listen to the event being triggered, and can add your own custom callbacks if necessary, for example:

var doSomething = function() {
    // Do something
}

$(selector)
.on('openstart.fluidbox', doSomething)
.on('closeend.fluidbox', function() {
    // Do something else
})
.fluidbox();

The list of custom events supported by Fluidbox is as follow. Remember that the events are namespaced:

Event Version Description
openstart.fluidbox ≥1.4.1 Fired when a click event is registered from a Fluidbox instance that triggers its opening. This is called after the linked image has been successfully loaded.
openend.fluidbox ≥1.4.1 Fired when the transitionend event is fired (with appropriate vendors supported). This happens when Fluidbox has been scaled to its final size (determined by viewportScale, see configuration). The timing between openstart and openend are dictated by the transition-duration settings in fluidbox.css, or any overrides that you have implemented that targets the class .fluidbox-ghost.
closestart.fluidbox ≥1.4.1 Fired when a click event is registered from a Fluidbox instance that triggers its closing.
closeend.fluidbox ≥1.4.1 Fired when the transitionend event is fired (with appropriate vendors supported). This happens when Fluidbox has been scaled back to its original thumbnail size on the page. The timing between closestart and closeend are dictated by the transition-duration settings in fluidbox.css, or any overrides that you have implemented that targets the class .fluidbox-ghost.
computeend.fluidbox or recomputeend.fluidbox ≥1.4.2 Fired when the Fluidbox ghost element, or the active Fluidbox on display, is recomputed due to layout changes not dependent on the $(window).resize() event. This is triggered manually by the custom trigger recompute (see usage instructions).
imageloaddone.fluidbox ≥1.4.3 Fired when the target/linked image is successfully loaded. Synonymous with delayloaddone if immediateOpen option is set to true.
imageloadfail.fluidbox ≥1.4.3 Fired when the target/linked image fails to load.
thumbloaddone.fluidbox ≥1.4.3 Fired when the thumbnail has been loaded. Will only happen once, when .fluidbox() is first applied to the element.
thumbloadfail.fluidbox ≥1.4.3 Fired when the thumbnail fails to load. Will only happen once, when .fluidbox() is first applied to the element.

There are custom events that were introduced in v1.4.x but are now deprecated because they serve redundant functions:

Event Version Description
resizeend 1.4.1 Removed in v2.x. Fired when the positioning and scale of an opened Fluidbox instance is recalculated and has been transitioned to completion.
delayedloaddone 1.4.3 Removed in v2.x. Fired only when the immediateOpen option is set to true (see configuration). Indicates that the target/linked image has been successfully loaded.
delayedreposdone 1.4.3 Removed in v2.x. Fired only when the immediateOpen option is set to true (see configuration). Indicates that the ghost image has been transformed successfully after retrieving the natural dimensions of the newly loaded image.

Previously hidden elements

As of v1.3.4, Fluidbox will only work with elements that are visible, i.e. not display: none, on the page upon DOM ready. This is because dimensions of hidden images (or images in parents who are hidden) are inaccesible to Fluidbox, resulting in an error. You will have to rebind Fluidbox to the newly revealted elements. Given the example below:

// Apply Fluidbox to elements of interest
$('.gallery a').fluidbox();

// User-triggered event to display gallery
$('#show-gallery').click(function () {
    $(this).next().show();
});
<button type="button" id="show-gallery">Show Gallery</button>
<div class="gallery" style="display: none">
    <a href="...">
        <img src="..." alt="" />
    </a>
</div>

You will realize that, even after revealing the element, the Fluidbox method is not working for it. That is because non-visible elements, despite satisfying the selector, will not be bound. So, use the following code instead:

// Apply Fluidbox to elements of interest
$('.gallery a').fluidbox();

// User-triggered event to display gallery
$('#show-gallery').click(function () {
    $(this)
        .next()
        .show()             // Show gallery
        .find('a')          // Fluidbox to all elements in gallery
            .fluidbox();
});

Dynamically-added elements

In order to enable Fluidbox functionality to dynamically-added content, you will have to apply .fluidbox() to the element of interest after appending it to the DOM. For example, let's say clicking a <button> triggers the addition of a new image:

$(function() {
    $('button').click(function(e) {
        e.preventDefault();
        
        // Construct new image
        var $newContent = $('<div><p>This is a new image that is dynamically-added to the page.</p><a href="http://placehold.it/500x500" title="" data-fluidbox><img src="http://placehold.it/200x200" alt="Alternate Text" title="Image Title" /></a></div>');
        
        // Insert new content object into DOM, and then apply .fluidbox to it
        $(this).after($newContent).next().find('a[data-fluidbox]').fluidbox();
    });
));

You are of course welcome to use other ways to manipulate and/or transverse the DOM, but you will have to adjust the search/filter function (using .find() or other similar jQuery methods) to retrieve the newly inserted content and search for the element of interest where you want Fluidbox to work with.

Configuration

Fluidbox can be configured according to your needs when calling the .fluidbox() method. Fluidbox follows the following model of setting overrides—in increasing order of priority:

  1. Default settings in plugin file
  2. Custom settings in .fluidbox() method
  3. Custom settings in the element's HTML5 data- attribute:
  • Note: In order to ensure that Fluidbox does not clash with commonly-used HTML5 data- attributes, it is tuned to listen in to namespaced attributes. For example, for the immediateOpen property, the corresponding attribute would be data-fluidbox-immediate-open. As per HTML5 specification, you should avoid using camelCase in your HTML5 data attributes because that is parsed into dash-delimited keys by the dataset method (jQuery uses .data() as an alias).
  • For boolean attributes, simply specifying the attribute itself constitutes a ="true" declaration, as per HTML standards

User-defined settings have to be passed as the aforementioned variables/options to the .fluidbox() method, i.e.:

$('a').fluidbox({
    viewportFill: 0.8,
    maxWidth: 800,
    loader: true
});

You may also pass settings as HTML5 `data- attributes, i.e.:

<a href="/path/to/image" data-fluidbox-viewport-fill="0.8" data-fluidbox-max-width="800" data-fluidbox-loader />
    <img src="/path/to/thumbnail" alt="lorem ipsum" />
</a>

The full list of Fluidbox configurations:

Option Type Default Description
immediateOpen Boolean false Determines if Fluidbox should be opened immediately on click. If set to yes, Fluidbox will open the ghost image and wait for the target image to load. If set to no, Fluidbox will wait for the target image to load, then open the ghost image.
loader Boolean false Determines if a loader will be added to the manipulated DOM. It will have the class of .fluidbox__loader.
maxWidth Integer 0

Sets the maximum width, in screen pixels, that the ghost image will enlarge to. When set to zero this property is ignored. This property will not override the viewportFill.

This option should not be specified (≥0) in lieu with maxHeight. In the event that both maxWidth and maxHeight are specified (≥0), maxWidth takes precedence. Fluidbox will throw a warning in the console discouraging this use.

maxHeight Integer 0

Sets the maximum height, in screen pixels, that the ghost image will enlarge to. When set to zero this property is ignored. This property will not override the viewportFill.

This option should not be specified (≥0) in lieu with maxWidth. In the event that both maxWidth and maxHeight are specified (≥0), maxWidth takes precedence. Fluidbox will throw a warning in the console discouraging this use.

resizeThrottle Integer (milliseconds) 500 Determines how much to throttle the viewport resize event that fires recomputing of Fluidbox dimensions and repositioning of the ghost image.
stackIndex Integer 1000 Determines how high up the z-index will all Fluildbox elements be. Leave this option as default, unless you have other relatively or absolutely positioned elements on the page that is messing with Fluidbox appearance.
stackIndexDelta Integer 10 Determines how much the z-index will fluctuate from stackIndex in order to allow visually-correct stacking of Fluidbox instances. With the default settings, this means that the effective range of z-indexes Fluidbox operates in will be between 990–1010. For elements that should go under the overlay, they should have a z-index of less than 1000.
viewportFill Float (fraction) 0.95 Dictates how much the longest axis of the image should fill the viewport. The value will be coerced to fall between 0 and 1.

Developer notes

Building with Grunt

Fluidbox is built using Grunt and NodeJS. If you are new to this, kindly refer to Matt Bailey's excellent guide on setting up Grunt. To build Fluidbox, you will need to run npm install and install the following dependencies:

Grunt dependency Comment
grunt Grunt is needed to build from source.
time-grunt Keeps track of the time consumed for each time Grunt is run.
load-grunt-config Splits up Grunt tasks.
grunt-concurrent Allows multiple Grunt tasks to be run at the same time.
grunt-contrib-clean Cleans up the dist/ directory.
grunt-sass Parses .scss files into .css. PostCSS will take over from here.
grunt-contrib-uglify Minifies .js files.
grunt-contrib-jshint Needed to perform linting on JS file.
jshint-stylish Needed to perform linting on JS file.
grunt-contrib-watch Allows you to build on the fly using $ grunt watch by watching for file changes, so that you don't have to run $ grunt at the project root all the time manually.
grunt-postcss Uses PostCSS to dynamically add prefixes and handle minification thereafter.

The main tasks are grunt or grunt prod, which minifies everything and makes it ready for produciton, and grunt dev which instead creates a build for testing and development.

Configuration

The configuration for each Grunt task can be found in their respecitve .js files in the /grunt folder.

Known Issues

Blurry images in Safari

Fluidbox might render the expanded image in a way that appears to be blurry in OS X / macOS Safari. A fix has been implemented as of v2.0.4 (#178, issue #168).

Transition of CSS3 transform in Safari

For inexplicable reason(s), Safari no longer transition CSS transformations (the scale component especially) after the first time the Fluidbox has been opened. A simple workaround would be enabling the immediateOpen option (i.e. immediateOpen: true) when initializing Fluidbox.

Transform of parent nodes lead to incorrect overlay positioning

If the CSS transform property is applied to any parent node, this causes the fixed positioned overlay to only expand to the boundaries of the transformed parent. #165.

Precautions

Overflowing content

Fluidbox may not work properly in the event that you have set your parent container, or content wrapping elements, such as <div id="#content"> and the likes, to hide their overflowing content, i.e. overflow: hidden. This is because the enlarged image is positioned relatively to its hyperlink, and not absolutely or fixed within the viewport.

Interaction with other positioned elements on the same page

When you want an absolutely/fixed-positioned element on the page to not be obscured by the dynamically-generated wrapping element, you should use a z-index of between 1000 to 1010. 1000 is set as the default stackIndex of Fluidbox, while 10 is set as the default stackIndexDelta, which is toggled on/off depending on the state of the Fluidbox. These settings can be individually tuned, see Configuration below.

Binding Fluidbox to previously hidden images

As Fluidbox requires access to the final calculation dimensions of the image in question in order to (1) position the ghost element correctly and (2) calculate the correct scale factor and transform values, it will only bind to images that are visible upon DOM ready. If you are relying on dynamic events (e.g. user-triggered, AJAX-loaded and etc.) to trigger a later appearance of an image, rebind Fluidbox to freshly revealed elements. This also applies to dynamically-loaded content, see demo for a working example.

Derped ghost element calculations in flexbox layouts

In some cases—which I have also experienced myself—the ghost element that overlays the thumbnail might have incorrect dimensions being calculated. This is because its dimensions are calculation on DOM ready by retrieving the computed dimensions of the underlying image. When the flexbox layout is active, the browser might change the dimensions of the image when flex-grow and/or flex-shrink are enabled (i.e. set to a non-zero integer). The cause is likely to be that the browser receives information on the image dimensions after DOM ready and then resizes the flex containers, which happens after the computed widths are fed to Fluidbox calculations.

In this case, I strongly recommend triggering the recomputer custom trigger (see above) after all images in the flexbox container has loaded. You can do this upon $(window).load(), but you can also use jQuery deferred objects and promises to do so. Let's say we have a flexbox container with the class of .flex:

// Do this AFTER Fluidbox has been initialized
$('.flex').each(function() {
    var images = [],
        $fb = $(this).find('a.fluidbox');

    $f.find('img').each(function() {
        var image = $.Deferred();
        $(this).load(image.resolve).error(image.resolve);
        images.push(image);
    });

    $.when.apply(null, images).done(function() {
        $fb.trigger('recompute');
    });
});

Accidental creation of new stacking contexts

There are a few CSS properties, when applied to the wrapping parent of elements meant for the .fluidbox() method, causes a new stacking context to be created—this leads to an issue where an opened Fluidbox instance will fail to cover its neighbouring elements.

They are, in alphabetical order but not exhaustively so:

  • CSS3 regions1
  • filter1, 2
  • flex3
  • isolation3
  • mix-blend-mode3
  • opacity1
  • position1, 3
  • paged media1
  • transform1
  • will-change3

Sources:

  1. What No One Told You About Z-Index by Philip Walton
  2. Why does stacking order change on webkit filter hover? on StackOverflow
  3. The stacking context on MDN

Frequently Asked Questions

  1. Fluidbox is not working in my installation. Where should I start?
    Start by checking your browser's console log. What error messages do you see? Also, make sure that you are using the latest version of jQuery 1.x (minimum requirement: v1.8 or above) and that the dependencies have been loaded successfully. Also, did you remember reading the usage precautions? You might have encountered a scenario where Fluidbox is not designed to handle.

  2. Do you plan to implement [insert feature]?
    Fluidbox is conceived as a means to simplify lightboxes. Therefore, I plan to keep Fluidbox as simple as it is, without additional features, such as captioning (there are other limitations to this, too) and gallery features. However, you can always fork and modify Fluidbox to your personal liking. Manual captioning is possible, refer to the [advanced demo].

  3. The image url isn't being interpretted correctly.
    Fluidbox fetches the larger image based on the URL specified in the href attribute if the wrapping anchor (<a>) tag.

  4. I have a application-specific problem that I need help troubleshooting. Can you help me?
    Of course! I am more than happy to help, but it really depends if you have a clear problem statement and a minimal, complete and verifiable example (MCVE) that I can play around with—I strongly encourage you to host your reduced test case(s) with either JSFiddle, CodePen or the likes. Then, create a new issue. I promise I will get back to you when I have time.

  5. Do you provide private support by email / phone call / Skype call / (insert any other forms of communication)?
    Since Fluidbox is provided as-is and free-of-charge, I am sorry to inform you that it is so far not possible for me to dedicate so much effort. However, you can follow what is described in step #4.

Licensing: MIT License

This plugin is licensed under the MIT License.

fluidbox's People

Contributors

benwilhelm avatar christianhegedues avatar gaya avatar hybernaut avatar jchck avatar jeffpersonified avatar joshuapinter avatar kkirsche avatar m19c avatar marcofugaro avatar marcstoecker avatar maxee avatar mesoptier avatar ngotchac avatar nhaglind avatar terrymun avatar toddmoy avatar zorker avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fluidbox's Issues

Maximum scale to image size

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.

Zoomed image stays blurred in MacBook

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?

Disable fluidbox on small devices

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?

Stacking order of opened images

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!

Can't get Fluidbox working ... :(

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

[enhancement] Make compatible with lazy loading of images

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.

Previous / Next

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!

Problems when used in combination with bourbon/neat

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.

Quick tip on how to implement the variables?

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

White flickering in Safari

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.

White Flash

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.

More detailed step by step instructions.

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.

Incorrect size and position

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.

Next/previous navigation

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 👍

Bootstrap grid system hinders centering and sizing

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

image in a fixed size div

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 ?

Add CSS file to bower.json

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

Prevent Upscaling

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

Version description not up to date

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.

Couple of issues

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)

Fast click cause big image not to be visible

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.

Cannot dismiss overlay on Firefox

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.)

Doesn't seem in bower

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.

Z-index setting sticks after lightbox is dismissed

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.

using fluidbox with Bootstrap3 Carousel

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,

Image pops after done loading

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).

Does not work when using lazy image loading plugin

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.

License

What's license is Fluidbox available under?

Preloader

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!

[request] prev/next ?

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).

linking to higher resolution image but different size

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

A translation glitch when the img element have border style apply to it.

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

glitch
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')),
});

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.