miromannino / justified-gallery Goto Github PK

I believe sometimes the images do not matter as much as the style and layout.

Would it be possible to have an option to remove the images that end up in the last row?

It would be fantastic.

I have problem then my design get changes by css media, after resize my gallery div must be horizontal with overflow-x:auto, and all images in one line with my own css. On resize then vertical gallery apear(works nice) and horizontal disapear i need turn on Justified-Gallery.

P.S. I can't find function that undo script changes and do it again by screen width

I created a simple version where the data comes from an external Json file and not from hardcoded HTML.

I am having some issues formatting the actual text in the caption (I would like to add links to individual elements, for example), but I am not much of a coder. If you have pointers of where this should be done, it would be a appreciated.

Code: https://github.com/tamielbr/menaphah/blob/master/index.php
Temp version: http://educacaoaberta.org/mapas/beta/

Hi, Amazing plugin!!

I have a situation where I load really large number of images and the users are having to download 40 MB. Its taking a long while to load.

Is it possible to do lazy loading of images? I can supply the image dimensions from the server side.

Or can we do it like this? - Use div in place of img? and use background-image to show images. I can lazy load background images and your plugin gets the width and height it needs.

Please point me in the right direction ❤️

Hello guys,

I have a little problem with image loading on my tablet.
On web browser, no issue. But on my computer, images can't completely load.
This is a screenshot :

https://drive.google.com/file/d/0B6O41rMZD3alY3NFTmlJcFFPc1k/edit?usp=sharing

I search some solution but nothing. Can you help me, please ?
Sorry for my poor english. If you want more information, ask me.

Is there a way to display center cropped images instead aligned to the top?

Hi! This is plugin is great – thanks so much. Is it possible to show the captions without hover, and without sitting over the image? So I guess this would mean extra space underneath each image.

div class='item'
  a href='#'
    img src'...'
  /a
  div class='cation'
    text
  /div
/div

the case will not work properly

Could someone please help explain to me where to put what code to make this work? I'm horrible at CSS and only understand the HTML parts. Also - not sure how to even install anything or if I have to. I installed the Flickr Photostream plugin and JQuery Updated and that's as far as I've gotten. I've been looking through the documentation but apparently either I can't open the document I need to help me or I can't find it.

Any help is much appreciated. I'm getting pretty burnt out and can't find a single friend of mine to help me. =\

Hi Miro,

First, thanks for this awesome plugin. Everything works well except the lastRow option. I can't seem to make the lastRow 'nojustify' or 'hide'. It is always scretched / justified. I can't see 'nojustify' showcase on your demo site either. Can you check?

Thanks!

May I know why I get "Image can't be loaded" for online links?

<a href="http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash4/s480x480/420735_10151557881529647_815211249_n.jpg" title="What's your destination?">
    <img alt="What's your destination?" src="http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash4/s480x480/420735_10151557881529647_815211249_n.jpg" />

Hi, is there an option for vertical grid (pinterest style)?
Thanks for a great plugin!

Hi, great plugin but for me it's not working online once I've uploaded it.
I've double checked that the .js and .css files are uploaded and in the right directories.
It's the first time I've used Bootstrap and that works all fine, it's just the Justified Gallery plugin.

It does work when I've previewed it locally through chrome/ff via Dreamweaver.

Please help, thanks

Andrew

I change rowHeight: 160 and run fixed_height.html,
Any image full width

Hello,

I'm seeing errors in the console and can't exactly find out what the problem is. I hooked up the latest version (v3.3) with Paul Irish's infinite scrolling. The problem, is whenever the infinite scrolling tries to get new results, I see this in the console when using the justified gallery minified js:

"TypeError: m.match(...) is null
...,g),b.css("left",f);var m=l.attr("src"),n=m.replace(k.settings.extension,"").rep..."

Using the unminified js, I get the following:
"TypeError: imageSrc.match(...) is null
imageSrc.match(context.settings.extension)[0];"

This problem also occurs on v3.2, but not v3.1. Version 3.1 loads the new images with infinite scrolling fine. Unfortunately, I'm not too familiar with javascript, so maybe I'm missing something here. Some image sizes and their respective suffixes aren't available -- does that cause a problem post v3.1? I would appreciate your help.

I'm not able to install version 2 with bower, only version 1.

Please add a bower.json and/or fix the change version numbers to x.y.z to fix this.

bower Justified-Gallery#*       cached git://github.com/miromannino/Justified-Gallery.git#1.0.4
bower Justified-Gallery#*     validate 1.0.4 against git://github.com/miromannino/Justified-Gallery.git#*

{
  name: 'Justified-Gallery',
  homepage: 'https://github.com/miromannino/Justified-Gallery',
  version: '1.0.4'
}

Available versions:
  - 1.0.4
  - 1.0.3
  - 1.0.2

Hey,

is it possible to add a spinner.gif or soemthing to inidicate that the system is working?

nice script!

kind regards,
john

Hi, this plugin is rad and just what we were looking for. We don't have multiple crop sizes though, and each time the script runs it 404s looking for other sizes. Is there a way to disable this? I tried passing an empty array {} for the sizeRangeSuffixes option. Let me know if there is any easy way to do this. I currently have it working with removing line 82 : getSuffix(imgWidth, imgHeight, context) +

Is there a way I can destroy an instance of JustifiedGallery? Or even clear all the images out of it?

Hi, great plugins!

I have a situation, when I have 1 or 2 images, this images are stretched, how not justified if is only 1 or 2 images, for example?

Thanks!

How do I add Paul Irish infinite scroll with this plugin?

This project looks great. Have you considered registering it with Bower to make it easier to insert into new project?

Hi Miro,
I am loading images from a remote location and adding them to the gallery div.

In all cases, the height is calculated to 33554382px, with different kind and amount of photos. Any idea?

Best regards, jr

Hi

I have a gallery with a row height of 340 (fixed height), last row justify and max row height -1. Sometimes, justifying makes the pictures in the last row much smaller than the normal rows.

I would rather have a last row with a really big image instead of a very cramped row with many small images. Is there a way to specify a minimum height for the last row?

Regards,
Freyana

Love the work done on 3.0.0, we're happily using it in production already. However it looks to be broken on IE9+. We disabled it for IE users.

Going to see if we can push in a fix/figure it out for you.

$('#gallery').justifiedGallery({
waitThumbnailsLoad : true
}).on('jg.complete', function () {
console.log("done");
});
I never get "done" in js console. I have 4 thumbs immediately displayed in viewport. If I set waitThumbnailsLoad : false then event is triggered.

Hi, i have intergrated Justified-Gallery in my website, but sometimes the gallery doesn't load at all, and the "loading" progress image stays on the screen forever. It only happens sometimes, but I can't figgure out a rule.
Is there anyway I could fix that? Thanks.
(I'm using Firefox 29.0.1.)

add filter and sort functions

It can work with bootstrap?

Hi again,
How to put a link into div caption, it's possible?
Thanks!

I'm trying to make a fadeOut in some elements, but the elements that continue to appear are not reorganizing.

How can I solve?
Thanks.

Hay, I want to use 'JG' without having 6 cropped copies of images based on size. I have a URL that needs to be displayed on the page.
Can I achieve that using Justified Gallery Plugin?
also I don't want to use '_t' '_m' '_n' '_z' '_b' etc in the end of FileName.
is there any way you suggest?

Instead of using jQuery's "fadeIn" & "fadeOut" you should instead consider applying a semantic class. As a developer I can hook CSS transitions to these semantic classes if I do want to opt-in to animations.

For example:

function onEntryMouseEnterForCaption (sender) {
            $(sender.currentTarget).find('.caption').stop().fadeTo(500, 0.7);
        }

I wish that would change to:

function onEntryMouseEnterForCaption (sender) {
            $(sender.currentTarget).find('.caption').toggleClass('mouse-over');
        }

I can then choose what opacity I want to correspond with the mouse being over it. 0.7 is an arbitrary opacity that you've chosen because you like it, but its qualitative & other people may not like it at 0.7 but may want 1.0... But this is just a simple example. Maybe I don't even want to animate the opacity but maybe I instead want to 'slide' in with CSS transform, maybe I want a custom bezier acceleration curve with keyframes, etc..

Another example of why its problematic is you fadeOut() for 500ms then fadeIn() for another 500ms. I'm screen capturing the page with phantomjs to generate a thumbnail for the gallery itself, and this adds an additional 1000ms latency before I can screen capture the page... so I'm now having to fork the project simply because I want to opt out of this 1000ms animation that's being animated for a computer who doesn't even see it (headless web browser client).

Please consider allowing us to disable the animations via a setting, or even better, simply toggle classes like switch the elements class from jg-loading to jq-loaded and let us users apply the styles that we want for those classes.

Putting the animations into JS makes things impossible to override. Also jquery animations can kill performance on mobile devices whereas CSS3 transitions are very smooth on all devices.

I have already repaired it but I dont know why but it doesnt wanted to read one image, when I opened image normally it was ok but when JG loaded it, it stoped in process and I didnt know why, no result shown , just white box.

But when I reuploaded that image , everything went ok. What should have been problem ? I can't reupload images automatically when this "error" happens , cause it was really hard to find out what the problem is and which image is not ok.

No error , but just stoped process with one image , which all browsers have loaded correctly, only JG not. It was .jpg

Hello, I have a problem with, I have
tag in my caption and every browser is ok with that but only IE I dont know why separates that caption to two different jg-image-labels.

and this is how it should looks like

please can you help me somehow ? The only change that I have made in your script is that I've used title as caption and not alt ;)

Thank you

Hello!

In row
$(el).justifiedGallery({rel: 'gal' + i}).on('jg.complete', function () {

i get a error

TypeError: $(...).justifiedGallery is not a function.

If there is new content added to #mygallery via an ajax call we have to call $("#mygallery").justifiedGallery(); again to get the new images justified.

Is there a possibility to call the function only on the last line of the "old" content and the "new" content instead of justifiying the whole gallery on every call?

Hey.

Firstly, great plugin. I loved it.

Although, I felt this needs another functionality before anything else. That is the ability to add custom HTML or style for each image. You have provided a style for displaying the captions, but I want to add my own div to display the captions in my own way, with a few anchor tags and other HTML tags. Do you have an existing solution for this? If not then can you look into this please? It would be great. I have also seen a few other people face this issue. This would help them too.

Thanks.

Hi,
I tried to install the JG in a rails 4.0 project. After copying the js & css files. The expected behavior of the images is not as demonstrated, meaning when i click on them they don't pop up and don't have ability to scroll back & forth as it does in the demo. Or does that need a different plugin?

Image ex:

Code:

<div id="mygallery" >
  <% @user.portfolios.each do |p| %>      
        <%=link_to image_tag(p.image.url, size: "150x150", :class => "img-rounded img-responsive"), p.image.url %> 
    <% end %>

</div>

<script type="text/javascript">
$(document).ready(function(){
$("#mygallery").justifiedGallery();
});
</script>

Thank you

When resizing the window, lightbox turns off in some way.

I'm working on trying to append more photos to the end of the gallery and would like a way to get justified gallery to draw in the new photos into the existing ones considering any available white space. It would help in integrating infinite scroller/loading.

I am trying to use the Justified-Gallery plugin in a gallery service on my personal website.

I have a php script that outputs all of the pictures in a directory to the page and then I call the justified-gallery plugin. It always returns the error: "The image can't be loaded: "photo/Cat_Harbor_Upper_Penninsula_m.jpg"" The actual file name, however, does not have the trailing "_m" that the error message gives. If I remove the call to the justified-gallery plugin the images load up just fine.

Here is a link to the page I am referring to:
http://mutablemango.com:8080/joel/web/gallery.php

I'm having an issue where I am binding html to the alt attributes of images which are inside of a gallery.

Especially when used in combination with something like Swipebox, it's nice to allow HTML here so that image captions can contain formatting such as italics. This does however have the side effect of making the (hover) alt text show markup.

Is having HTML within the alt attribute a valid use of this library?

My case is an output issue and sanitising the data server-side is not an option.

This is demonstrated here:
http://jsfiddle.net/p0fm2rp6/1/

Workarounds welcome.
(awesome plugin by the way 😄 )

in test/main/swipebox.html
when remove one row <div class="swipeboxEx"></div> and click the image , the swipebox goes wrong.

I fix it as the following:
if (i == 1) $('.swipeboxEx a').swipebox();
=>
if (i == 0) $('.swipeboxEx a').swipebox();

Hi,
which option do I have to trigger the spinner before requesting the referenced photos by AJAX?

Use case: Already the AJAX request for getting the photos takes a long time. During this time, the end user does not see a loading indicator. This will be displayed just after the photos are loaded and the gallery is instantiated.

Thanks and regards

Hi
Great work on this plugin!
I'm trying to figure out if there is a way to leave a space of lets say about 30px at the bottom of each containing div?

I had a working implementation with 2.1:

Then all I did was I switched the library out with 3.1.0 and reloaded my page & got this:

My code is nothing out of the ordinary I don't think:

<div id="photoset_images_ss">
            <a href="#"><img src="..." /></a>
            <a href="#"><img src="..." /></a>
            <a href="#"><img src="..." /></a>
             ...
    </div>

    <style type="text/css">
        #photoset_images_ss {
            width:1600px;
        }
        #photoset_images_ss img {
            border:1px red solid;
        }
    </style>

    <script>
        $(document).ready(function() {
            $('#photoset_images_ss').justifiedGallery({
                'rowHeight' : 400,
                'fixedHeight' : false,
                'justifyLastRow': true,
                'captions' : false,
                'margins' : 2,
                'refreshTime': 500000, // no need to refresh. phantom loads it with an 1600^2 viewport, screengrabs & exits.
                'sizeRangeSuffixes': { 'lt100':'',
                    'lt240':'',
                    'lt320':'',
                    'lt500':'',
                    'lt640':'',
                    'lt1024':''},
                'onComplete': function() {
                    $('.jg-row').slice(2).remove();
                    if (typeof window.callPhantom === 'function') {
                        window.callPhantom({ hello: 'world' });
                    }
                }
            });
        });
    </script>

Hi, I love this plugin so much and really appreciate your work.

I created a HTML page with this plugin(v3) and it seems to be great except only one problem: images are not loaded .

In Firefox(v28.0) images are never loaded, only the loading animation is showing up.

In Chrome(v33) this was almost half to half, half times they are loaded perfectly and the other was the same as Firefox.

In IE7/8, no problem at all.

I'm trying to track 'anchors' in my dynamically loading infinite scroll for updating page numbers in the address bar with history.pushstate. I found an example which does this and tuned it a bit to work with my code. Until i call the justifiedGallery function everything works, but somehow the tracking gets messed up when the output is formatted. Hoping someone can help me out :)
Here is my example http://jsfiddle.net/zYe8M/30/

With version 3.2.0 you use keyframes for caption animation. If I use the new flag cssAnimation:true, there is no mouseout animation. I think you should use CSS transition like in previous versions. Or should I write keyframes for mouseout?