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.

Type: Discussion
Status: New
KenH
View Replies:
jb1 replied on at Permalink Reply
jb1
It certainly does defeat the purpose of it. I had never considered doing that.

I'll have to take a closer look at the code and come back to you on Monday.

Thanks for your patience.

JB
KenH replied on at Permalink Reply
KenH
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?
jb1 replied on at Permalink Reply
jb1
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.
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
KenH replied on at Permalink Reply
KenH
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
jb1 replied on at Permalink Reply
jb1
Its quite possible. I'll take a closer look and get back to you on Monday. Thanks for your patience.
jb1 replied on at Permalink Reply
jb1
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.
KenH replied on at Permalink Reply
KenH
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 :)
jb1 replied on at Permalink Reply
jb1
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.

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.