image width in smooth carousel

1,024 Posts

Frank Reply #1, 16 years, 7 months ago

Hi,

banging my head cause i set this gallery up with photo s of the exact size (623x. 415) And the layout was perfect, eh for me it is.
Finally found the time to start collecting the real pictures and, off-course there is an issue.
And I don t know what is causing it. Probably in the css.
The problem is that although i have my pic "wrapper width" set at 623px, and also the jdgallery.slide element at 623px (and tried 100%), no padding apllied, still my pictures are resized. Probably missing some 150px in the width. It is this URL:http://italianartists.eu/work Aim is that the large picture has about the same width as the menu bar,

Here s the call:

[!MaxiGallery? &display=`embedded` &embedtype=`smoothgallery` &smoothgallery_carouselElement=`carousel` &smoothgallery_useExternalCarousel=`true`  &smoothgallery_width=`623`&smoothgallery_carouselHorizontal=`false` &smoothgallery_showArrows=`false`&smoothgallery_showInfoPane=`false`&smoothgallery_thumbHeight=`120` &smoothgallery_thumbWidth=`140`&max_thumb_size=`140x120` &smoothgallery_thumbSpacing=`2` &customFields=`price,size` &smoothgallery_preloader=`true`&manager_webgroups=`artists` &debug=`0`!]

Here s the css:

jd.gallery.css

/*#myGallery, #myGallerySet, #flickrGallery
{
	width: 460px;
	height: 415px;
	z-index:5;
	border: 1px solid #000;
}

#flickrGallery
{
	width: 500px;
	height: 415px;
}*/

#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
	display: none;
}

#myInfoContainer { /*width: 275px; height: 355px;*/}
.myInfoContainer h2, h3, h4 {  text-align : left;}

.jdGallery
{
	overflow: hidden;
	position: relative;
}

.jdGallery img
{
	border: 0;
	margin: 0;
}

.jdGallery .slideElement
{
	float: left;
	position: relative;
	width: 100%;
	height: 415px;
	background-color: #1C0D01;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-image: url('img/loading-bar-black.gif');
}

.jdGallery .loadingElement
{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('img/loading-bar-black.gif');
}

/*mod infozone*/

.jdGallery .slideInfoZone {
	position: relative;
	z-index: 10;
	width: 623px;
	height: 20px;
	bottom: 0;
	text-indent: 0;
	overflow: hidden;
}
#myInfoContainer {
	width: 623px;
	height: 15px;
	padding: 0;
	line-height: 20px;
	color: #ffffff;
	display: inline
}
* html .jdGallery .slideInfoZone {
	bottom: -1px;
	margin: -15px 0 0 40px;
}
.jdGallery .slideInfoZone h4, #myInfoContainer h2 {
	margin-left: 15px;
	padding: 0;
	font-size: 14px;
	height: 18px;
	font-weight: bold;
	color: orange;
	float: left;

}
.jdGallery .slideInfoZone p, #myInfoContainer p {
	margin-left: 10px;
	margin-top: 2px;
	padding: 0;
	font-size: 10px;
	height:18px;
	float: left;
	}
/*end mod infozone*/

.jdGallery div.carouselContainer
{
	float: left;
	position: relative;
	height: 135px;
	width: 100%;
	z-index: 10;
	/*margin: 461px 0 0 0;*/
	left: 0;
	top: 0;
}

.jdGallery .carousel
{
	position: absolute;
	width: 100%;
	margin: 0px;
	left: 0;
	top: 0;
	height: 115px;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}

.jdExtCarousel
{
	overflow: hidden;
	position: relative;
}

.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
	position: relative;
	width: 100%;
	height: 124px;
	top: 10px;
	left: 0;
	overflow: hidden;
}

.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
	position: relative;
}

.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
	cursor: pointer;
	background: #1C0D01;
	background-position: center center;
	float: left;
	border: solid 0px #fff;
}

.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
	margin-bottom: 10px;
}

.jdGallery .carousel .label, .jdExtCarousel .label
{
	font-size: 13px;
	position: absolute;
	bottom: 5px;
	left: 10px;
	padding: 0;
	margin: 0;
	display: none;
}

.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
	font-size: 10px;
	position: absolute;
	bottom: 5px;
	right: 10px;
	padding: 1px 2px;
	margin: 0;
	background: #222;
	border: 1px solid #888;
	cursor: pointer;
}

.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{margin: 0px 0 0 -20px;
	color: transparent;
}

.jdGallery a
{
	font-size: 100%;
	text-decoration: none;
	color: inherit;
}

	
	
/* Gallery Sets */

.jdGallery a.gallerySelectorBtn
{
	z-index: 15;
	position: absolute;
	top: 0;
	left: 30px;
	height: 20px;
	text-align: center;
	padding: 0 10px;
	font-size: 13px;
	background: #1C0D01;
	color: #fff;
	cursor: pointer;
	opacity: .4;
	-moz-opacity: .4;
	-khtml-opacity: 0.4;
	/*filter:alpha(opacity=40);*/
}

.jdGallery .gallerySelector
{
	z-index: 20;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #1C0D01;
}

.jdGallery .gallerySelector h2
{
	margin: 0;
	padding: 10px 20px 10px 20px;
	font-size: 20px;
	line-height: 30px;
	color: #fff;
}

.jdGallery .gallerySelector .gallerySelectorWrapper
{
	overflow: hidden;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
	margin-left: 10px;
	margin-top: 10px;
	border: 1px solid #888;
	padding: 5px;
	height: 40px;
	color: #fff;
	cursor: pointer;
	float: left;
}

.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
	background: #1C0D01;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
	background: #000;
	background-position: center center;
	float: left;
	border: none;
	width: 40px;
	height: 40px;
	margin-right: 5px;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
	color: #aaa;
}

general stylesheet:

*{margin: 0; padding: 0;
	font-family: "Helvetica Neue ultra lite", "HelveticaNeue-Light", Helvetica;
	text-decoration: none;	outline:none
}

body {
background-color:#1C0D01;
margin: 0;
padding: 0;
outline:none;
vertical-align: bottom;
}
#wrapper {
	background-color: transparent;
	/*position: absolute;*/
	width: 860px;
	height: 678px;
	color: #1C0D01;
	margin: 60px auto ;
	position: relative;
	display: block;
	border: solid 1px white;
}

#topwrapper {
	float: left;
	height: 50px;
	width: 665px;
	margin: 0 0 0 0px;
	background-color: transparent;
	/*font-family: "HelveticaNeue-Light", "Helvetica Neue Light";*/
	color: #ffffff;text-decoration: none;
	font-size: 21px;
	font-weight: lighter;
	text-indent: 0px;
/*.foo, x:-moz-any-link, text-indent: 0px;*/  }

/*menu section*/
.menu ul { padding: 0;  margin-top: 23px;  list-style-type: none; width: 664px;}
.menu ul li { float:left;	display: inline;  list-style: none; padding: 0; margin: 0; border-right: solid 0px}
.menu ul li a {	float: left;display: inline; height: 40px;	color: #ffffff; line-height: 40px;   padding-right: 40px;   text-decoration: none;
}
.menu ul li.active a {color:orange;}
.menu ul li a:hover {color:#5c5855; background:transparent;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:100px; width:90px;}
/*.menu li a:here{color: orange;} */
/*end menu section*/

#sidebar {
	float: left;
	width: 160px;
	height: 416px;
	color: #ffffff;
	padding: 10px 35px 0 0;
	vertical-align:bottom;
	font-size: 18px;
}

#logo {
	float: left;
	width: 125px;
	height: 125px;
	color: #ffffff;
	background: url('images/logo.png' ) no-repeat;
	margin: 80px 0 0 33px;
	padding: 10px 35px 0 0;
	vertical-align:bottom;
	font-size: 18px;
}

#dynnav {
	float: left;
	width: 125px;
	height: 290px;
	color: #ffffff;
	margin: 240px 0 0 33px;
	padding: 10px 35px 0 0;
	vertical-align:bottom;
	font-size: 17px;
}	
/*menu section*/
ul, li{/*margin:20px 0 0 0;*/ border:0; padding:0; list-style:none;}
.vmenu { clear: both; margin: 0 0 0 0; padding:10px 0 0 0;  height: 22px;}
.vmenu li {  margin: 0px 10px -50px 0; }
.vmenu li a { margin: 0px 0 7px 0;display: block; height: 20px;	color: #ffffff;line-height: 24px; padding-left: 0px; text-decoration: none;}
.vmenu li a:hover {color:#5c5855; }
.vmenu li.active a {color:orange;}
/*end menu section*/

#content {
	float: left;
	width: 623px;
	height: 415px;
	background: transparent;
	margin: 40px 0 0 0;
	overflow: visible;
	color: #ffffff;
	z-index: 97;
		font-size: 12px;
}
h1{
	font-size: 30px;
	margin: 0 0 30px 0;
	color: #c9c09e;
}

#bottomwrapper{
position: relative;
	float: left;
	width: 858px;
	height: 171px;
	background-color: transparent;
	margin: -60px 0 0 195px;
	color: #ffffff;
	z-index: 98;
		font-size: 12px;
}

.buyart{
	float: left;
	width: 623px;
height: 20px;
margin: 75px 0px 0 -25px;
	color: #ffffff;
	z-index: 11;
}


#photo {
	float: left;
	width: 200px;
	/*height: 300px;*/
	overflow: hidden;
	margin: 0 20px 0px 20px;
}
#info01{
	float: left;
	width: 180px;
}
#info02{
	float:left;
	width: 180px;
	margin: -20px 0 0 20px;
}
#info03{
	float: left;
	width: 600px;
	z-index: 99;
}
#arrowleft{
	float: left;
	width: 10px;
	height: 171px;
	margin: 0 0 0 0;
	background-color: transparent;
}	
#carousel{
	float: left;
	width: 623px;
	height: 120px;
	margin: -5px 0 0 -10px;
	background: transparent;
	overflow: hidden;
}
.footer{
	clear: both;
	float: left;
	font-size: 12px;
	width: 623px;
	height: 70px;
	margin: -20px 0 0 199px;
	background: transparent;
	border: solid 0px white;
	color: #1C0D05;text-decoration: none;
	font-size: 14px;
	font-weight: lighter;
	z-index: 98;
}

/*menu section*/
.footer{  height: 20px;}
/*.footer ul, li{list-style:none; padding: 0 80px 0 0;}
.footer li { float:left;}*/
.footer a {height: 20px;	color: #ffffff ;line-height: 21px;  text-decoration: none; 
}
.footer a:hover {color:#5c5855; }

.footer .active a {color:orange; }

/*end menu section*/

4,213 Posts

doze Reply #2, 16 years, 7 months ago

The images are resized by keeping aspect ratio intact, so that’s why the pictures don’t get to the exact widths (because height is achieved). You could use phpThumb together with maxigallery to zoom crop the pictures into exact widths.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

1,024 Posts

Frank Reply #3, 16 years, 7 months ago

Aigai,

does not seem to go as expected, even keeping the aspect ratio, the largest pics all seem to have the width of 450 max. Example, one pic was beeing resized to 450 x 284, where the max size available is 623 x 412. SO both on height and width it is not filled to the max. Waht is wrong?

thanks, Frank.

4,213 Posts

doze Reply #4, 16 years, 7 months ago

See &max_pic_size parameter from maxigallery wiki page.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

1,024 Posts

Frank Reply #5, 16 years, 7 months ago

Hi, thanks,

I am using the max_pic_size, like so:

&max_pic_size=`625x412`

But it just resized to the default 450, so I changed the size in the mg.php.
However can I set eg width to 0 and height to 412? For no limit on the width?

&max_pic_size=`0x412`

And what is the purpose of &smoothgallery_height=`412, also should I use the &smoothgallery_thumbHeight or the max_thumb_size? Or both?

4,213 Posts

doze Reply #6, 16 years, 7 months ago

The smoothgallery width and height parameters are used to control the size of the div it uses to render the image. See the parameter explanations from maxigallery wiki page!

You can use phpThumb for more complex image resizing, see the sticky "usefull information" topic for help on that.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."