Hello,
open the gridGallery.js file and find this:

location.href=url;

then replace it for this:

window.open(url , '_blank');

and then use the gridGallery.js file in your HTML page instead of the minified version

The only think I noticed is that the pictures load a little bit slower then in the Ultimate Grid Responsive Gallery. I also miss the transitions between the pictures when I am in lightbox view. Is it configurable?

Hello,
actually the Media Boxes is faster, but you see it a little bit slower because of the following things:

1) The Media Boxes demo page is loading way more content than the Ultimate Grid page, I mean custom css/js, bootstrap css/js, the menu, font-awesome, the content, google fonts, etc. the Ultimate Grid is just loading the grid and bootstrap css

2) The Media Boxes demo page is loading 2 grids instead of just 1

3) The Media Boxes thumbnails are around 25-30kb and the thumbnails on the Ultimate Grid are around 10-15kb, in other words the images on the Media Boxes are heavier (since they have better quality)

The lightbox is called Magnific Popup, you can read more about it here: http://dimsemenov.com/plugins/magnific-popup/

I hope this makes sense

Thanks a lot!

Hello, I haven’t explained well…

I have a gallery into a Bootstrap Modal. My problem is that when I open the modal, the gallery is not showing, but, if I resize the browser window, the gallery appears.

I think that this happens because a function recalculates the size of the gallery in accordance with the browser size. I want to call that function when the bootstrap modal callback is fired.

Thank you!

Hello,
ohh alright, yes indeed! when the page loads the gallery can’t know the dimensions of the browser since it doesn’t know where is going to be and it is hidden!

alright so as you said you need a callback for the bootstrap modal, I guess you can find it in the docs of Bootstrap (I haven’t use it before)

once you have the callback try adding this peace of JS inside to refresh the gallery:

setTimeout(function(){ 
    $(window).trigger('resize');
}, 500);

Best, David

Thats just what I wanted!! Now it works very well!

Thank you very much!

Hello,
1) you can change the id for the second gallery like this:

<div id="grid2">

and then in JS add a second initialization like this:

$('#grid2').grid();

2) I guess you can set all your images to be the same height like this with CSS:

.grid-brick{
  height: 150px;
}

but controlling the total height of the grid is not possible, as it depends on how many rows are and the height they got

I hope this makes sense,
Best, David

Hello,
any chance is a different plugin from another author?
since the grid and the lightboxes are not from this plugin (ultimate grid) I even checked the source code and I don’t see the files of this plugin.

Let me know

Best, David

Hello,
can you specify which images are the ones that are not visible? I see that the grid is being loaded, but not sure where are supposed to be the hidden images.

Best, David

Hello,
ohh yes I guess that can be done

Hello,
1. you can insert this plugin in that page, but there’s no option to limit the height

2. yes you can link to a page

Hello,
you can turn off the animation, open the gridGallery.min.js file and find this:

duration:500

then replace it for this:

duration:0

also this plugin is not very advanced, if you really need this I would strongly recommend you to use this one: http://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020

it is the advanced version of this plugin, you can do much more things and have a more powerful/faster grid

Best, David

Absolutely can. Here you go. http://oi57.tinypic.com/2d7zjpw.jpg

Nevermind, it works perfectly. For those of you that may be running into this issue with BS3+; simply wrap the code in a container class div. All set. Great product. Thank you!

awesome

Hi,
alright I found that mootools is adding extra JS methods to all JS arrays, which is affecting all JS code (including plugins) I found a work around so it doesn’t affect this plugin, can you contact me via email so I can send you the JS file with the new modifications (through my profile at the bottom there’s a contact form)

Best, David

Thank you very much I will send you an email from the form of the author page (castlecode). I really appreciate

just sent you the new file

yes, lets say one row will have 3 columns and the next row 4

Ohh now I understand what you mean, the thing here is that there are not rows, since the plugin works on a masonry layout (they are stacked from top to bottom and the images can have variable width). so it wouldn’t be possible with the plugin as it is

Best, David

OK, Thanks

Hello,
when there’s no more images to load the “Load More” button should be hidden automatically, (like in the live preview) if this isn’t working on your side and in the live preview is, can you show me a living example online so I can take a look?
Best, David

Hello,
try the following:

.box{
  box-shadow: 1px 1px 2px #e6e6e6;
}
.box img{
  border: 7px solid red;
  box-sizing: border-box;
}

Best, David

Thanks! Where do I have to put the code? I tried different positions without success.

Hello,
in your HTML page you already got something like this:

$('document').ready(function(){
    //INITIALIZE THE PLUGIN
    $('#grid').grid();
});  

just replace it for this:

$('document').ready(function(){
    //INITIALIZE THE PLUGIN
   if( $(window).width() > 400 ){
       $('#grid').grid();
   }else{
       $('#grid').grid({
          lightBox: false,
        });
   }
});  

Thanks a lot! It works perfectly now.

Hello,
this plugin is not very advanced, the categories only filters the results in the grid, they don’t load more items, but if this is really necessary I would recommend you the advanced version of this plugin which is this one: http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

in that one you can specify the minimum of items per category (in your case would be 30) so it loads more if it is necessary

Best, David

I think I fixed the problem, I removed the data-url info and added :

<script type=”text/javascript” charset=”utf-8”> $(”#grid”).click(function() { window.open(‘URL’); return false; }); </script>

awesome glad you found a solution

Hello,
by slideshow you mean the lightbox? do you have an online example so I can inspect it?
also did you but the plugin from a different account? since you don’t have the “purchase” badge
Best, castlecode

Hi, thanks for your answer but probably I was not clear enough (My english is not very good I’d like to use it in two languages: “All” will be displayed in the english version, and “Toutes” displayed in the french version of my website. That’s the reason why I duplicated all the ul category-navbar section and gave them an ID. But I was looking for an easiest solution because I also need to translate the “Load more images” button. Thanks

in that case in the html of your grid you probably got this (the container of the images in the html):

<div id="grid">

then add this attribute:

<div id="grid" data-allword="the ALL word">

and then open the gridGallery.js file (the not minified version, also make sure to use it in your page) find this:

html("All")

and replace it for this:

html($container.attr('data-allword'))

I hope this make sense

Yes, it makes sense, and that’s exactelly what I wanted. I’m not familiar with js but inspecting your code helps me to add a blinking arrow font icon in both side of the text.

 .html('<i class="icon-arrow-down blink" /> ' +$container.attr('data-loadmore')+ ' <i class="icon-arrow-down blink" />'); 

Thank’s a lot for your help.

apreta el link y veras

Si deseas que te de acceso al ftp de las imagenes dame una dirección de email y te envio un acceso. Gracias

problema solucionado