ed-lea / jquery-collageplus Goto Github PK

Images do not load correctly... only 3 or 4 load, and then you have to refresh multiple times for the others to load... Chrome and FFox are fine.

Is possible?

I tried to switch $this.append(html) for $this.prepend(html) but the animation is complicated

Add support for non-img elements like objects
https://github.com/estelle/clowncar/

Hi.
This module works fine for me except one issue: I cannot set the number of rows for the images. For example I have 10 images and want to display them in 3 rows so they fit in the container.
or for example 5 images in 1 row.
Is it hard to modify the library so it works with that functionality?

thanks for help in advance

Hello,

Thank you for the excellent plugin. It is exactly what I want for my image gallery.

I have implemented it in my Drupal 7 site and I want to use it along the module Views Infinite Scroll: https://www.drupal.org/project/views_infinite_scroll

The problem is when Infinite Scroll loads the new content the collagePlus formatting is not recognised which breaks the layout. Because I have very limited knowledge in scripting, may I ask for help how could I call collagePlus each time the infinite scroll loads new content?

Thank you :)

Hi,
I am adding this into gantry framework. they use Motools. when i add this then i got extra request from motools of the request url for each item. Please see the image

Please advice me what should I do?

I can't seem to get this working in the jsfiddle?

You mention the jquery.removeWhitespace.js plugin in the DOCS page, but you provide no link, and googling it results nothing. did anything change since?

caused Chrome tab to freeze. Thusly, I can't copy the console :(

Chrome Version 35.0.1916.153 m

Windows 8

Awesome plugin, but....
As we see in your example
http://collageplus.edlea.com/example.html
the image 400x120 are extended beyond its original height. That impacts image quality a lot :(

Hello, I have a small issue, the images dont fill the 100% of the container. I had a right gap. You can see it in:

http://devigner.ga/islamazatlan/villa-mar.htm

Thanks for the help

Landscape images do not have opacity set to 1 after plugin is loaded in internet explorer. in 0.3.2

Works fine in 0.3.1 and 0.3.2 works in firefox or chrome.

Bug in ie:

fine in chrome:

This is happening on
-Firefox on Mac OS.
-Chrome on Windows
-IE on Windows

Works fine on Safari and Chrome on Mac

I've put the gallery inside a box.
You can see an example at http://www.villareginateodolinda.it/#!gallery
What happens is that the vertical scrollbar takes the space that was designated for the imgs. Thus the last image of the row is forced to move one row down.

Is it possible to set the targetheight new after resize of the window?
I try this.

  // All images need to be loaded for this plugin to work so
    // we end up waiting for the whole window to load in this example
    $(window).load(function () {
        $(document).ready(function(){

        collage();


        });
    });     

    var size = "150"

    // Here we apply the actual CollagePlus plugin

    function checkWidth() {
            var windowSize = $(window).width();

            if (windowSize < 480) {
                var size = "120";
            }
            else if (windowSize < 720) {
                var size = "120";
            }
            else if (windowSize < 1160 ) {
                var size = "120";
            }
            else {
                var size = "150";
            }
            console.log(size);
        };

        // Execute on load
        checkWidth();
        // Bind event listener
        $(window).resize(checkWidth);   

        $(window).resize(collage);   


    function collage() {
        $('.Collage').removeWhitespace().collagePlus(
            {
                'fadeSpeed'     : 'fast',
                'targetHeight'  : size,
                'direction'     : 'vertical'
            }
        );
    };

what do you think about collageplus as a bower package?
perhaps a good thing for easy updates.

http://bower.io/

Hi, I am using jquery-collagePlus, for my personal gallery, it is great plugin. Unfortunately in the last version of Chrome ( 35.0.1916.153 m), it is broken.

see: https://dl.dropboxusercontent.com/u/3246832/jgplus01.jpg
or directly at http://urza.cc/altai2013

In Firefox it looks fine, in Chrome the pictures have wrong size and alignment.. Also few weeks ago it looks just fine in Chrome as it should without problems.. I didn't change anything in the gallery since then, it just started to look like this...

I downloaded your project but examples didn't run. I even try to copied all the code from http://jsfiddle.net/edlea/uZv3n/ but still not working. Sorry for asking like that, I'm a newbie

In firefox 33.1 on a fairphone / android, I am using collagePlus with imagesLoaded. Some pictures are not correctly put in position and stretched to 100% width, or not displayed at all. It used to work, but in the last weeks, something must have happenend, or I have an error in my code that I did not yet find.

It looks as if the collage-function is called before everything is loaded, but I'm not sure.

Is anybody having trouble in firefox for android, too? I could not yet figure out what is going wrong - also the images are not hidden with opacity until all are loaded, as it is, for example with chrome browser.

It would be great if someone could reproduce this or even has an idea what is happening. On an archlinux /gnome desktop with firefox 33.1.1 the problem does not appear, here.

When I try load 400 hundred photo with your library it set correct height and width only for first maybe 30 photos. What it can be?

checkout http://jsfiddle.net/uZv3n/724/. I've added latest version as the resource. it looks like the image is invisible

Is it possible to only set padding to all element's except the last element in the row? Like
`

- padding - padding - no padding

- padding - no padding` ` - no padding

Amazing plugin - nice job!

I'm having to load the collage content over AJAX to enable instant updates to it. Refreshing on window.resize works fine, but setting initial content with HTML sent over Ajax (or manual refresh) seems to a) not release the opacity, and b) set width and height to 0, rendering the photos invisible.

The collage needs to be rebuilt after a photo is added (i.e. prepended to the front), or removed.

To reproduce:

Init:

// WRAPPED in document.ready
        window.photo_collage_options = {
                'allowPartialLastRow' : true,
                 'targetHeight'    : 250,
                 'direction'       : 'vertical',
                 'effect'          : 'effect-5',
                 'fadeSpeed'       : 2000
        };
        if(jQuery('#photo_gallery').length > 0) {
              jQuery.ajax({
                    url: '/workspace/media/photos',
                    error: function(xhr, status, error) {
                        jQuery('#photo_upload_error .error-msg').html('Error refreshing photo wall. You may need to refresh the page manually.');
                        jQuery('#photo_upload_error').show().delay(5000).fadeOut();
                    },
                    success:function(data){
                        //console.log(data);
                        jQuery('#photo_gallery').html(data);
                        refresh_media_wall('photos');
                    }
              });
        }

Which then calls:

function refresh_media_wall( media_type ) {

// i have 4 pages with 4 different galleries, ignore as it's in a switch()

    var el = '#photo_gallery'; // target element
    var options = window.photo_collage_options; // constructor options

    jQuery(el).removeWhitespace().collagePlus(options);
    jQuery('.media_wall img').css('opacity', 1); // set manually, as it doesn't like it
    jQuery(el).collageCaption();

    var resizeTimer = null;
    jQuery(window).bind('resize', function() {
        jQuery('.media_wall img').css('opacity', 0); // manual again
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() { 
                jQuery(el).removeWhitespace().collagePlus(options); 
                jQuery('.media_wall img').css('opacity', 1); // manual
        }
        ,200);
    });
}

All works fine when printing the HTML. I have a suspicion it's looking at the #photo_gallery container, and seeing it's empty. However, the function is only called manually after the content is loaded in.

The most dominant property of the plugin is the width of the parent grid, i.e. it will always force the width of the parent grid and override the target height. Target height is really just a guide size and not a fixed value. This is because to fit the images to the exact width, the height must be adjusted to maintain aspect ratio. The problem usually happens when the image (or couple of images) are the last in the row so there is not really enough to fill the width without making those images much bigger. For example, a 400px wide image might be stretched to 1000px wide if it is the only image available to that row.

Adding a setting will enable devs to choose appropriate behaviour

var allowPartialLastRow = true : false

Is there anyway to trigger a on collage complete?

Just wondering if you'd consider preventing images being stretched too much. Not sure what that amount should be, but in particular if only one image is available, it is stretched to take up the full width of the page. An option to prevent this would be great.

Hello,

Images not correctly aligned on IE

On Internet Explorer 10, The images are not aligned to the left.
.

Thanks for your help

Is there any way in which I can use lightbox with CollagePlus?
Whenever I try to put an "a" tag around an "img" tag the picture doesn't show up.

When the images are in a containing element, like an <li>, the effect to show the images never occurs, resulting in essentially a blank screen. I was able to fix it by replacing this block of code:

if( settings.effect == 'default'){
    $obj.animate({opacity: '1'},{duration: settings.fadeSpeed});
} else {
    if(settings.direction == 'vertical'){
        var sequence = (rownum <= 10  ? rownum : 10);
    } else {
        var sequence = (i <= 9  ? i+1 : 10);
    }   

    $obj.addClass(settings.effect); 
    $obj.addClass("effect-duration-" + sequence); 
}   

With this:

var $img = $obj; 
if(!$img.is("img")) $img = $img.find("img");

if( settings.effect == 'default'){
    $img.animate({opacity: '1'},{duration: settings.fadeSpeed}); 
} else {
    if(settings.direction == 'vertical'){
        var sequence = (rownum <= 10  ? rownum : 10);
    } else {
        var sequence = (i <= 9  ? i+1 : 10);
    }   

    $img.addClass(settings.effect); 
    $img.addClass("effect-duration-" + sequence);
}   

Basically just checking to see that $obj is in fact an <img>, and finding it if it isn't. Btw, it looks like you've already got other code that is doing this elsewhere, so I didn't submit a PR as I'm guessing you might have a better solution that reuses the code that already does this. But in my case, the above fix solved it quickly.

Thanks for the great plugin!

Hi

The following is a screenshot of my website. I set targetHeight to 400. But as you can see the "amazon.ca" one, it takes too much space. I was wondering if I can set a max-width (I tried in CSS but it doesn't work very well) or only show the central part of the image with max-width specified.

If you want to see it alive, my website is https://chaozhi.la/

Thanks in advance

I have a thumbnail image 305x200 px. Target height is 200px.
The image is resized to 304x200. so it is blurred and not sharp.

The image is the only one in it`s row. There is no need to resize it.

Why is that, and how can I fix it?

Right now, the script sometimes places the final image on its own row. Setting allowPartialLastRow to false then makes the last image huge -- which looks great, but the first image is frequently the most important image, and the one that would look best at full width.

When the image collection requires there be an orphaned image, I'd love the option to make the first image be the orphan instead.

(My guess is this would mean reversing the list of images before assembling rows, and then again reversing both the images in each row and the rows themselves before returning the final markup.)

When you scroll down on a tablet or phone using any mobile browser (Safari on iOS too) they changes UI and minimize URL bar. That leads to screen height change and so the resize function is called. I found it very anoiying since it is only changing height and not width, the result is the same. Is it somehow possible to check only width and if it's changed,then fire the function?

Hi, you may see from the following screenshot 1. The Guess photo on the third row should be in the second row. The width of that photo (and all the other photos) are calculated 1 more pixel than expected. You can see from screenshot 2, when I change the width of the image contaoner from 485px to 484px, the Guess photo is paced to where it should be.

I'm guessing this is because we are using round function (1.9 = 2, 456.89 = 457 ) when the images container? So we are placing a little more pixel on one row. I'm not sure. I may look the code later this week but I think it's good to create an issue for this.

You may this issue live on http://chaozhi.la/

Thanks, the 2 screenshots are as follow:

screenshot 1:

screenshot 2:

Awesome plugin. I was wondering if collagePlus works for html5 videos? If so, can you suggest how? Thanks!

In the readme it keeps referring to the removeWhitespace plugin as clearWhitespace

It seems, that multiple instances are not calculated separated for each instance. (I have 5 divs with class="Collage" and try to have separated collages) --> hope you can see it on the screenshot

Your gallery plugin is awesome. I was wondering how hard it would be to give some kind of support for portrait images. For example

+-----+---+
|     |   |
|     +---+
|     |   |
|     +---+
|     |   |
+-----+---+

Lots of images are portrait, especially with smartphones. As such the fact that the current gallery only does rows and then fits images into those rows means portrait images are almost always very small.

Thoughts?

Ideally it would make collages where there are often no lines that go all the way across or down the screen.

okay:

+----+---+-----+
|    |   |     |
+--+-+--++-----+
|  |    |      |
+--++---+--+---+
|   |      |   |
+---+------+---+

okay:

+---+---+---+
|   |   |   |
|   +---+   |
+---+   |   |
|   |   +---+
+---+   |   |
|   |   +---+
|   +---+   |
|   |   |   |
+---+---+---+

best:

+------+------+
|        |    |
|        +----+
|        |    |
+----+---+-+--+
|    |     |  | 
|    |     +--+ 
+----+     |  | 
|    |     |  | 
+----+-----+--+

Hello,

I reopen the issue "Internet explorer opacity of landscape images" :
#10

I have the same problem.

Thanks for your helps

While I love this plugin, it's been giving me some issues with fixed position divs in all browsers, but especially in chrome. Namely, fixed divs don't stay fixed in the window and instead scroll with the rest of the page. Any idea what could be causing this? It only happens when I include this plugin.

First of all, great plugin.. thanks! (saved me a lot of time coding my own). I did notice one bug with Bootstrap 3, using the img-polaroid class. This adds padding to the image, as well as a border. Your getImgProperty almost works... but I had to tweak it to also take into account the padding. Please see my revised code below:

    function getImgProperty( img )
    {
        $img = $(img);
        var params =  new Array();
        params["w"] = (parseFloat($img.css("border-left-width")) + parseFloat($img.css("border-right-width")) + parseFloat($img.css("padding-left")) + parseFloat($img.css("padding-right")));
        params["h"] = (parseFloat($img.css("border-top-width")) + parseFloat($img.css("border-bottom-width")) + parseFloat($img.css("padding-top")) + parseFloat($img.css("padding-bottom")));
        return params;
    }

Thanks!

I'm using the plugin successfully to generate 2 grids - in 2 tabs. The first (visual/shown) tab works fine, but the second (hidden) tab doesn't work at all. I'm calling the collage function when the hidden tab is shown (with a slight timeout, using imagesloaded() as it doesn't work otherwise) and the height of the parent is set to zero, and the child element is also zero (no width values are created at all). Each time i load the gallery in any instance, i have to set a timer to change the opacity, and to reload it on window.resize.

Problem happens both when i call it programmatically from the JS, and when i run the commands manually from the JS console after the tab is visible. Using jQuery('#div-area-name').removeWhitespace().collagePlus(window.array_of_default_options);

It can see the content, the tab is made visible, it runs through all the items OK, but even on a manual call to the function results in no widths, and zero heights.

I am trying to build a gallery and Im using your amazing library. I initially did not use height and width. It worked perfectly.

Now I wanna try out with height and width attributes specified. Here is my HTML:

<div class='album-photoss'>
  <!-- - Photo.all.each do |p| -->
  <!-- = image_tag small(p), width: p.small_version_width, height: p.small_version_height -->
  <img height='150' src='http://deelay.me/3500?http://placehold.it/350x150/69D2E7/ffffff' width='350'>
  <img height='180' src='http://deelay.me/2500?http://placehold.it/320x180/A7DBD8/ffffff' width='320'>
  <img height='300' src='http://deelay.me/1500?http://placehold.it/320x300/E0E4CC/ffffff' width='320'>
  <img height='500' src='http://deelay.me/4000?http://placehold.it/472x500/F38630/ffffff' width='472'>
  <img height='360' src='http://deelay.me/3200?http://placehold.it/540x360/FA6900/ffffff' width='540'>
  <img height='600' src='http://deelay.me/2000?http://placehold.it/800x600/ECD078/ffffff' width='800'>
  <img height='120' src='http://deelay.me/1200?http://placehold.it/400x120/D95B43/ffffff' width='400'>
  <img height='300' src='http://deelay.me/4500?http://placehold.it/300x300/C02942/ffffff' width='300'>
  <img height='500' src='http://deelay.me/4500?http://placehold.it/320x500/542437/ffffff' width='320'>
  <img height='300' src='http://deelay.me/4500?http://placehold.it/450x300/53777A/ffffff' width='450'>
  <img height='360' src='http://deelay.me/3200?http://placehold.it/540x360/FA6900/ffffff' width='540'>
  <img height='600' src='http://deelay.me/2000?http://placehold.it/800x600/ECD078/ffffff' width='800'>
  <img height='120' src='http://deelay.me/1200?http://placehold.it/400x120/D95B43/ffffff' width='400'>
  <img height='300' src='http://deelay.me/4500?http://placehold.it/300x300/C02942/ffffff' width='300'>
  <img height='500' src='http://deelay.me/4500?http://placehold.it/320x500/542437/ffffff' width='320'>
  <img height='300' src='http://deelay.me/4500?http://placehold.it/450x300/53777A/ffffff' width='450'>
</div>

And here is my CoffeeScript:

$(document).ready ->

  $(".album-photoss").removeWhitespace().collagePlus
    fadeSpeed: 2000
    targetHeight: 200

I am only seeing a blank page. Upon inspection I can see that the images have been applied the following styles:

<img height="150" src="http://deelay.me/3500?http://placehold.it/350x150/69D2E7/ffffff" width="350" style="height: 0px; margin-bottom: 0px; margin-right: 0px; display: inline-block; vertical-align: bottom; overflow: hidden; opacity: 1;">

Could you please help me out on this one?

Hi,

Me again :) I'm trying to use your plugin on another site, but I'm getting an issue with padding:

You can see it here:

http://www.gardenerhorsham.co.uk/gallery.html

Basically, the 2nd item on the next rows, always seems to have a padding issue. Its kinda like the other bug I reported before ( and we fixed ), but I can't track down where this one is coming from.

Any ideas?

TIA

Andy

I have a suggestion/request to add in rotation options. I found your plugin and really like it, but I'm looking for something that can create a collage with some random rotation. Every time the page is loaded, the layout and rotation change. For instance, take a look at this site: http://www.squareonesalon.com/square-one-salon/centerville-salon.php and you'll see a dynamically generated collage that changes with each page load. My guess is it's being done server-side, but I'd be okay with a client-side solution and your plugin has a nice set of features that are precursors.

Hey @ed-lea 😄

I've been using your plugin on our app for a while now. We have been facing some performance issues lately. When we have multiple albums with hundreds of images in one page Firefox seems to just crash :( Chrome works absolutely perfectly though....

Any pointers as to how I can handle this? Currently I am just paginating the albums with 5 per page but I need a better solution 😞

Is there a way to lazily execute the layouting when we scroll to the album? Just thinking out loud.....

After window resize, sometimes slideup translucent crouton message with extra data seems to have its height messed up.

The images do not align correctly after resizing the window in Chrome, FF and Safari.

The whole container refreshes when append with more images. Is there any way that it can be forced not to refresh the whole container and just append the images?

This is an incredibly weird issue. If I have the console opened, I can see the images aligned properly. If I reload the page with console closed it appears very wrong. Have a look: :(

A page with lots of large images can often take a while to load since all images seem to need to be loaded before any are shown. Any chance you could add something to indicate that the images are loading? Thanks!