Implement Fluidbox for images

[alanorth]

See Fluidbox... https://terrymun.github.io/Fluidbox/

[alanorth]

I just tried it and it doesn't really work. In Chrome it almost works, but the fluidbox zooms and the image is huge. In Firefox the image is just huge even before you click it.

Also, you're modifying style.css, which comes from Bootstrap, so this will get overwritten the next time we update Bootstrap. We need a modular way to include this... I think SASS or LESS or whatever can do this...

Edit: Hmm, it might have been my browser's mixed-content blocking that made the script not work well. Lemme try again later. Edit 2: Nope, definitely doesn't work.

[ooduor]

@alanorth The issue of zoom out before you click means the fluidbox CSS and isn't loaded. I checked those in alchemy repo. basically after checkout, pelican content should add them. You could confirm that you have those by looking at the page source also. I saw that as well before I realized the alchemy was a different repo and that's where to checkin the assets. If you have these files https://github.com/nairobilug/pelican-alchemy/commit/688fc0fbae097c34298dd4b56332750eec25aeae in the page all works well.

[alanorth]

The javascript and css is loaded. Here's how it looks before and after clicking in Chrome 40 in Linux:

Note the copious whitespace below the image.

[ooduor]

@alanorth I see. Styles necessary for this to work

    <link rel="stylesheet" href="http://localhost:8000/theme/css/fluidbox.css" media="all" type="text/css" />
    <link rel="stylesheet" href="http://localhost:8000/theme/css/style.css">

The second one I appended extra fluid box styling. That's most likely the one not updated in this case.

Footer should have this

  <script src="http://localhost:8000/theme/js/bootstrap.min.js"></script>
  <script src="http://localhost:8000/theme/js/jquery.fluidbox.min.js"></script>
  <script>
        $('.full-post a[data-fluidbox]').fluidbox();
        // Trigger recomputing on Flexbox items, sometimes buggy width calculations due to browser recomputation of flex items
        $('.cols').each(function() {
            var a = [],
                $f = $(this).find('a.fluidbox');

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

            $.when.apply(null, a).done(function() {
                $f.trigger('recompute');
            });
        });
  </script>

This is how it should look before and after:

[ooduor]

A better way to know the CSS has loaded. When you mouse-over on the image, the mouse should toggle to zoom-out icon.

[molo-rnrah]

Hello, interesting stuff, continue sending these messages I get them. I am in North Texas near Dallas and i'm using a Lenovo notebook.

On Tue, Feb 3, 2015 at 8:17 AM, Anthony Oduor [email protected] wrote:

A better way to know the CSS has loaded. When you mouse-over on the image, the mouse should toggle to zoom-out icon.

— Reply to this email directly or view it on GitHub https://github.com/nairobilug/nairobilug.or.ke/issues/75#issuecomment-72657132 .

Name: Erustus Omolo Tel: Web:

[alanorth]

Ok, I just had another look at this and found out that you hadn't included fluidbox.css in the base.html template.

Once I included it, I got a bunch of errors in the Chrome console like this:

GET http://localhost:8000/theme/css/fluidbox.css.map 404 (File not found)

And in Firefox the image starts out as full resolution on page load.

[rwanyoike]

You can ignore the .map ref, css preprocessors (less,sass,stylus) use those files to tell the browser how to map compiled css to preprocessor css. You can turn it off in the chrome dev tools ("Enable CSS source maps").

[alanorth]

Ok, so the error is non-fatal, but the code still doesn't work (and the .css isn't included). :)

On Mon Feb 09 2015 at 11:53:12 PM raymondwanyoike [email protected] wrote:

You can ignore the .map ref, css preprocessors (less,sass,stylus) use those files to tell the browser how to map compiled rule to processor rules. You can turn it off in the chrome dev tools ("Enable CSS source maps").

Reply to this email directly or view it on GitHub https://github.com/nairobilug/nairobilug.or.ke/issues/75#issuecomment-73587779 .

[ooduor]

@alanorth @raymondwanyoike will update/fix this later today...

[rwanyoike]

Talk to me @highPriestLOL :), what's the status here