CSS Image Gallery Support Product Page

Make main images smaller for thumbs?

Asked 29 Jun 2010 22:44:00
has this question
29 Jun 2010 22:44:00 Rusty Monette posted:
Is it possible to use the same image as the main image as your thumb just a scaled down version without using the resizing program. I have a website that is getting the images dynamically and it is working fine. The only problem I have is the images that it shows in the thumbs is a severely cropped image of the main image. How can I scale that image to 25% before it crops it? I see in the image code there is a width and height but doesn't seem to do anything on the gallery.

Also I want to do a similar thing with the main image. I would like to set a standard width like 600 and all the images that display in that main window will show in the width of 600 and the hight will keep aspect to the 600 width. So if a image is to large it will bring it down to 600 and if a image is to small it will display it at 600 as well. is this possible? I have not had any luck getting it to do this.



Replied 30 Jun 2010 10:53:37
30 Jun 2010 10:53:37 Miroslav Zografski replied:
Hello Rusty,

You say you are getting images dynamically. Do they pass through a Smart Image Processor or a similar script?

Replied 30 Jun 2010 17:27:19
30 Jun 2010 17:27:19 Rusty Monette replied:
No they do not. The thumb and the main image are the same file. I just want to display the thumb much smaller not cropped.
Replied 01 Jul 2010 10:06:39
01 Jul 2010 10:06:39 Miroslav Zografski replied:
Hello Rusty,

Unfortunately you can gain a little control over the thumbnail images in CSS Image Gallery, because they are set as a css background-image property. Despite that the main image is not populated in such a manner and you can have there an additional CSS adding :

.imageMainContainer>img {width:600px !important;}

This will set each main image to 600 width and will keep aspect ratio.
However you must not set gallery to auto resize to fit the image.
About thumbnails... you'll need a image processing script or set the dimensions of the thumbnail container bigger.

Replied 13 Feb 2015 09:57:20
13 Feb 2015 09:57:20 sultan shah replied:
Hello Col,
You need to set in the css style of the next and prev buttons outline:none
Also you need to apply this property to .dmxGallery class style.

HyBriDe Dd

Reply to this topic