tin-cat / jquery-mosaic Goto Github PK

Demos looked nice, so I put together very simple CodePen test:

https://codepen.io/cenozoic/full/WXLBZB/

There are 5 (same) images in it. But jquery-mosaic shows sometimes 3, sometimes 4, almost never all 5 (just resize the viewport to see this). That looks pretty unusable for a gallery.

Thanks for the nice plugin! I use it on my portfilio site!
maxRowHeightPolicy 'tail' - good improvement!
But! Sometimes last row still looks ugly.
I suggest the following:

1. Disallow the case when there is only one element on the last line. In this case, we can move another element from the previous line (of course, if there are more than 2 elements). Or apply 'skip' option.
2. Possibility to center the last line if maxRowHeightPolicy = 'tail'

Mosaic is set as follows:

$('#gallery1').Mosaic({
showTailWhenNotEnoughItemsForEvenOneRow: true
});

However last two elements () are still hidden.

This is more-or-less the same as #10 but perhaps stated more clearly.

If you have a mosaic configured with $('#mosaic').Mosaic({maxRowHeight: 200, innerGap:5}) and you have (let's say) only 3 square images, and your container is wider than 615 pixels, then all images are hidden (due to

This is probably a bug?

My gallery looks like this:

<div class="gallery">
   <div class="gallery-item-img-wrapper"  data-aspect-ratio="1.5">
      <a href="/images/phocagallery/wedding/IMG_8994.jpg">
         <img itemprop="thumbnail" class="gallery-item-img lazyload" src="/images/phocagallery/wedding/thumbs/phoca_thumb_m_IMG_8994.jpg" />
      </a>
   </div>
   ...
   ...
   ...
</div>

This structure is due to many factors and I cannot change it. The problem is that 'data-high-res-image-src' property does not work with this structure. I resolve this issue via pretty library 'lazysizes', but it'll be cool if it works out of the box.

Currently the script works only if all the images have defined widths and heights. For example:

works <img src="path.jpg" width="32" height=32">
doesn't work

Is there a way where I don't have to put the dimensions? The images have different aspect ratios.

When I try to add the popular lightbox plugin, then jquery mosaic won't work.
This works, even with lazyload added:
<img class="lazyload" data-src="image.jpg" width="450" height="300" />

But this won't work:
<a href="bigimage.jpg" rel="lightbox[roadtrip]" title="mytitle"><img class="lazyload" data-src="image.jpg" width="450" height="300"></a>

I tried to add the image as background of a div, but that also won't work.
Is there any way to make it work, since I really like jquery mosaic more than masonry.js

It will be very nice to add one of this options

After loading all pictures on some screen dimention last pictures aren't show. For example when i got automaticly created 3 rows from 15 pic where row has 4 pic so there is missing 3 pic (script set this last 3 pic on display none). Is this some of bug or what? How can i fix this?

I found this issue when I uploaded this web application to the online server.
This application works fine when it is launched inside local PC, but it is broken when it is on the web server.

I found a culprit. That is an image file of 4.8MB jpg. The file is at the second position that is supposed to lie in the middle of the first row on my PC screen. I suspect the file is a culprit because it is loaded at last even though it is on the second position.
I have no idea why the aspect ratio is broken only on the web server. The second file is loaded at last on my local computer too. It is instantly loaded, but at last. On the web, it is loaded at last and it takes a few seconds, and ends up with broken aspect ratio of other images.
My gallery is fixed if I delete the image file of 4.8MB, but application itself is not fixed, you know.

I'd appreciate if developers fix this issue or add some safeguard against accidental break of aspect ratio for user images uploaded on the web application .

just chrome dont work, IE and FF it work, you can fix this? thanks man, this plugin so good.

When the mosaic does not overflow the viewport in the y axis, the initial state of the mosaic leaves a gap on the right side (see this image and this actual example).

Once you resize the browser window, the mosaic: either gets refitted correctly and the gap disappears (in Firefox), or the gap remains (Chrome). It's important that there's no y-axis overflow, because otherwise the gap space is taken up by the scroll bar.

I have no idea where the problem is, can anyone else replicate this?

Hi,

jQuery mosaic may behave badly if not using a recent version (jquery 3.0 at least, it seems to me), because of the following function :

		base.retrieveBaseWidth = function() {
			baseWidth = Math.floor($(base.el).width());
		}

With older versions of jquery, the width could be rounded up if floating, so this function could return a bad value (1 pixel too big) and break the whole logic of jquery mosaic. (See here for details about the history of jquery width and floating values jquery/jquery#1724).

So either this problem should be handled directly in jquery mosaic, or the minimal required version of jquery to use should be specified in the documentation ; old versions of jquery are still used in wordpress for example... :(

Cheers,
Ben

Love this simple plugin, thanks for sharing!

Would be great if there was an easy way to support margins around images.

For example:

Adding padding or a border currently throws off the layout.

Any chance of adding support for this or any suggestions on how to get there myself?

Thanks!

Need to include the ability to run code given different events, such as before plugin starts, before each element is placed, after element placed, and after plugin done.

Hello, can we please get support for VIDEO elements in the gallery? I want to have mixed images+videos and jquery.mosaic seems to ignore the videos. This can be perhaps worked around by wrapping the videos with ##DIVs, but that's just unnecessary annoyance. The change needed is trivial, just add VIDEO to getItems and into CSS and it works fine.

Imagine a scenario when one wants to use jquery-mosaic to show a single row of images with a fixed height. With a small number of images - fewer than required to tile across the width of a wide display, there are some problems;

• with skip mode and insufficient images cause the entire widget (all images) to be hidden. This must be a bug?
• with crop mode, the last image is stretched (as expect)

It would be good to have something very close to 'oversize' mode, but with a limit on the total height 'maxContainerHeight', or 'maxNumRows'. This way, with few images on a wide screen mosaic would not dissapear. Meanwhile, with smaller screens, all images would retain the same height.

Hi,

Not sure where is problem, but for me not work correctly.

Please check this: https://drive.google.com/file/d/0B-xpN57F9sqza0RNNTJBSk1fRUE/view?usp=drivesdk

It would be great to have a randomize=true parameter where the order of the placement of the elements are random each time the page is loaded.

Sometimes, when using the plugin on Internet Explorer, the blocks are misaligned. It only happens at certain widths. This bug seems to originate on some IE difference when calculating sizes via javascript, and might be related to width decimals rounding.

Not sure why. I've seen this on all the examples, but I can't get my images to randomize after reloading the page. They are always in the same order. I'm using the original, unmodified, code from here, everything works great, except the random thing :/
Can anyone help me fix this?

Thx,
Mat

Hey,
this plugin is amazing! Is it possible to add photos with AJAX to reduce load times? My Scenario is a photographer site with many photos (50+).

Thanks, Jannis

When simply wrapping images with anchors it breaks the display as seen here:

I believe this is due to anchors inheriting the style instead of the images:

To test simply replace your mosiac gallery with the following:
`

Edit: I see Github parses HTML images. Simply swap image tags with a blank anchor to replicate.

I get that anchors are meant to inherit sizing due to being the parent element; however it's very common for galleries to be outputted in simple images wrapped in an anchor. There are many advantages to supporting img tags that are wrapped in an anchor.

I am experiencing a probllem with rendering the mosaic at certain widths. It resides within bootstrap 3 column if that makes any difference. There's video in the link with recording of this happening:

https://www.youtube.com/watch?v=2aOXHqlYcaU

code of the page below:

<div class="row">
  <div class="col-lg-8">
   <div class="service-mosaic">
        <div id="civil-engineering-mosaic" class="mosaic">
        <div class="item withImage highRes" width="4032" height="3024" style="background-image: url(/user/pages/04.civil-engineering/zDZhsOW8SKjT3C4.jpg);"></div>
        <div class="item withImage highRes" width="4032" height="3024" style="background-image: url(/user/pages/04.civil-engineering/l7mKy59IRbo6CGa.jpg);"></div>
        <div class="item withImage highRes" width="1200" height="1600" style="background-image: url(/user/pages/04.civil-engineering/7eZsOJT4IqchSwA.jpg);"></div>
        <div class="item withImage highRes" width="1200" height="1600" style="background-image: url(/user/pages/04.civil-engineering/T7fINOSB6EP5qD8.jpg);"></div>
        <div class="item withImage highRes" width="1200" height="1600" style="background-image: url(/user/pages/04.civil-engineering/RvnP5VDlE9SU1gL.jpg);"></div>
        <div class="item withImage highRes" width="1200" height="1600" style="background-image: url(/user/pages/04.civil-engineering/QnxoLBX3HEpDcTl.jpg);"></div>
        <div class="item withImage highRes" width="1200" height="1600" style="background-image: url(/user/pages/04.civil-engineering/m0AViw3yOBEjhT2.jpg);"></div>
        <div class="item withImage highRes" width="1200" height="1600" style="background-image: url(/user/pages/04.civil-engineering/3iDTE41W2zHC0NU.jpg);"></div>
        <div class="item withImage highRes" width="1200" height="1600" style="background-image: url(/user/pages/04.civil-engineering/AdvwU82G4s10fmz.jpg);"></div>
        <div class="item withImage highRes" width="4032" height="3024" style="background-image: url(/user/pages/04.civil-engineering/4LRUnqvT6dJaFMu.jpg);"></div>
   </div>

   <script>
   $(function() {
   $('#civil-engineering-mosaic').Mosaic({
   innerGap: 30,
   outerMargin: 46,
   maxRowHeight: 320,
   maxRowHeightPolicy: 'crop'
   });
   });
    
   </script>
    
  </div>
 </div>

I'm having issues with the size of the image been displayed as if it cropped from the top left on the image.
This only appears to happen when you link to it.

Also I am trying to get it to work with fancy box 3, which it does work, accept for the cropping of the image.

Its been tested out here: https://www.stateofmind.me.uk/test/

Is this an issue with using 2 different jQuery or is it something I'm doing wrong?

Any chance if getting rid of the jQuery dependency? These days most new projects don't use jQuery anymore, so it would be nice to avoid depending on it.

Hello!

First of all, thanks for creating this script. It was very easy to get up and running!

I am trying to responsively adjust the mosaic.

On the desktop, I have 16 images taking up 2 rows with a max row height of 500.

    $('#mosaic').Mosaic({
        maxRows: 2,
        maxRowHeight: 500,
        outerMargin: 0,
        innerGap: 0,
        maxItemsToShowWhenResponsiveThresholdSurpassed: 8
    });

The result for me on a mobile device is two rows of very large images.

Is it possible to set a responsive row height?

Thanks again!

On desktop, making browser skinny like a phone looks good. One image per row. On actual iPhone, the images are stretched (wrong height).

I am working on a site where users can click a button to switch between the mosaic view and a grid view. I've had to resort to a "hack" that removes the class and associated data. But it would be nice if there was an actual method that could undo any changes to the elements.