How to make all the images equal size
Permalink Browser Info Environment
Hi I know this is kinda difeating the object of this add-on but i need to know how to make all the thumbs equal in size. The mosaic effect is nice but not suitable for what i trying to achieve. Will JavaScript tweaking be required? If so, can you please provide details?
Thanks.
Thanks.
Type: | Discussion |
---|---|
Status: | New |
Lol, Thought you'd say that!
I like the way it works but the mosaic effect doesn't quite work for me on this particular project.
On slow connection I also notice that the images come in full size, very briefly, then form into the tiles....can you advise on how to get around this?
I like the way it works but the mosaic effect doesn't quite work for me on this particular project.
On slow connection I also notice that the images come in full size, very briefly, then form into the tiles....can you advise on how to get around this?
Try opening the /packages/jb_mosaic/blocks/jb_mosaic/js/jquery.photoMosaic.js file and look for this snippet of code:
http://screencast.com/t/TSkR3cPXpe...
Try changing the 2 highlighted lines to fix the width and height of the resized images.
Eg.
I haven't tested this out but it should get you on the right track.
Hope this helps.
JB
http://screencast.com/t/TSkR3cPXpe...
Try changing the 2 highlighted lines to fix the width and height of the resized images.
Eg.
image.width.adjusted = 100; image.height.adjusted = 150;
I haven't tested this out but it should get you on the right track.
Hope this helps.
JB
Hi,
I have made the changes to the JavaScript file, as per your instructions, but the thumbs are still producing the mosaic effect.
Are the Thumbs getting a 'random size' instruction elsewhere in the JS code?
CODE SNIPPET:
// image sizes
image.src = this.src;
image.width = {};
image.height = {};
image.padding = self.opts.padding;
image.caption = this.caption;
image.width.original = $img.width();
image.height.original = $img.height();
image.width.adjusted = 174;
image.height.adjusted = 174;
//Original code
//image.width.adjusted = self.col_width;
//image.height.adjusted = Math.floor((image.height.original * image.width.adjusted) / image.width.original);
//End of original code
You can see the gallery in action here:http://bit.ly/IbQMqD
I have made the changes to the JavaScript file, as per your instructions, but the thumbs are still producing the mosaic effect.
Are the Thumbs getting a 'random size' instruction elsewhere in the JS code?
CODE SNIPPET:
// image sizes
image.src = this.src;
image.width = {};
image.height = {};
image.padding = self.opts.padding;
image.caption = this.caption;
image.width.original = $img.width();
image.height.original = $img.height();
image.width.adjusted = 174;
image.height.adjusted = 174;
//Original code
//image.width.adjusted = self.col_width;
//image.height.adjusted = Math.floor((image.height.original * image.width.adjusted) / image.width.original);
//End of original code
You can see the gallery in action here:http://bit.ly/IbQMqD
Its quite possible. I'll take a closer look and get back to you on Monday. Thanks for your patience.
Try lines 390, 418 of the js file. I'm moving house at the moment and my file server which has the original copy of the code is packed. But if this doesn't do the trick, it will have to wait until I'm all up and running again.
Let me know how you go.
Let me know how you go.
Hi JB,
Yeah that helps a bit. As I need 5 columns for the gallery I need to ensure that all thumbs are filled. For Example, I have just 11 images to display...The format goes all wrong as the rows are not filled up. If I add 4 blank images to the set (15 images now) the format behaves and the mosaic effect goes away. Get the images in proportion is also causing some issues.
Hope to hear from you soon & hope the move goes well :)
Yeah that helps a bit. As I need 5 columns for the gallery I need to ensure that all thumbs are filled. For Example, I have just 11 images to display...The format goes all wrong as the rows are not filled up. If I add 4 blank images to the set (15 images now) the format behaves and the mosaic effect goes away. Get the images in proportion is also causing some issues.
Hope to hear from you soon & hope the move goes well :)
It does sound like you may be using the wrong tool for the job. This addon -http://www.concrete5.org/marketplace/addons/highslide-webalbum/... - is very good. It handles cropping of thumbnails (into squares) and with a few CSS tweaks you can get it to look nice and neat in a grid layout. I hope this helps.
I'll have to take a closer look at the code and come back to you on Monday.
Thanks for your patience.
JB