Waar kan ik hier thumbnail grootte veranderen?

Allard · 9 okt 2009

He mensen, ik heb op mijn pagina een image gallery. Die laat een carousel zien met thumbnails. Ik wil echter de thumbnails verkleinen (de borders sluiten niet aan op de thumbnails zelf) en de balk waarin ze verschijnen, ook inkorten zodat er geen ruimte meer onder de thumbnails is, zoals nu.. Weet iemand waar ik dit kan vinden in de CSS hieronder? kan alles erin aanpassen, maar dit heb ik niet kunnen vinden...

Code:

/**

 * @Name         Theme Joomla Power Slide Diplay Module

 * @URL          http://powerslide.themejoomla.com

 * @version      $Id: powerslide.css 3 skashi $

 * @package      Joomla (1.5.x)

 * @subpackage   Power Slide Diplay Module

 * @copyright    Copyright (C) 2008-2020 Theme Joomla. All rights reserved. E & OE

 */



/* #flickrGallery { width: 500px; height: 334px } future plans */

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

.jdGallery { overflow: hidden; position: relative }

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

.jdGallery .slideElement {

	position: absolute; z-index: 1;

	width: 100%;

	height: 100%;

	background-repeat: no-repeat;

	background-position: center center;

	background-image: url('../images/core/loading-bar-black.gif') }



.jdGallery .loadingElement {

	position: absolute; z-index: 0;

	width: 100%;

	height: 100%;

	background-repeat: no-repeat;

	background-position: center center;

	background-image: url('../images/core/loading-bar-black.gif') }



.jdGallery .slideInfoZone {

	position: absolute;

	z-index: 15;

	width: 100%;

	margin: 0px;

	left: 0;

	bottom: 0;

	background: none;

	background-image: url('../images/core/transparent.png');

	color: #fff;

	text-indent: 0;

	overflow: hidden }



.jdGallery .slideInfoZone h2 {

	padding: 0;

	font-size: 1em;

	margin: 0;

	margin: 5px 13px;

	font-weight: bold }



.jdGallery .slideInfoZone div {

	padding: 0;

	font-size: 1em;

	margin: 5px 13px }


/* hier de thumbnail container */
.jdGallery div.carouselContainer {

	position: absolute;

	width: 100%;
		
	z-index: 14;

	margin: 0px;

	left: 0px;

	top: 0px }


/* hier het  thumbnail gedeelte */
.jdGallery .carousel {

	position: absolute;

	width: 100%;
		
	margin: 0px;

	left: 0px;

	top: 0px;

	background: #000000;

	color: #fff;

	text-indent: 0;

	overflow: hidden }


/* hieronder de show/hide button om de thumbs te laten zien */
.jdGallery a.carouselBtn {

	position: absolute;

	bottom: 0;

	right: 0;

	height: 20px;

	text-align: center;

	padding: 0 10px;

	font-size: 10px;

	background: #000;

	cursor: pointer }



.jdExtCarousel { overflow: hidden; position: relative }



.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper {

	position: absolute;

	width: 100%;
	
	top: 0px;

	left: 0px;

	overflow: hidden }



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

.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail {

	cursor: pointer;

	background: #000;

	background-position: center center;

	float: left;
	

	border: solid 1px #fff }
	/* hierboven de thumbnail border */





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

.jdGallery .carousel .label, .jdExtCarousel .label {

/* hieronder is de thumbnail specificatie tekst.. staat nu op hidden */

	font-size: 10px;

	position: absolute;

	bottom: 0px;

	left: 10px;

	padding: 0;

	margin: 0;
	
	visibility: hidden;}



.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 { color: #b5b5b5 }

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

.jdGallery a.right, .jdGallery a.left {

	z-index: 13;

	position: absolute;

	height: 99%;

	width: 25%;

	cursor: pointer;

	-moz-opacity:0.2;

	-khtml-opacity: 0.2;

	opacity: 0.2 }



.jdGallery a.left {

	left: 0;

	top: 0;

	background: url('../images/core/fleche1.png') no-repeat center left }



.jdGallery a.right {

	right: 0;

	top: 0;

	background: url('../images/core/fleche2.png') no-repeat center right }



.jdGallery a.right:hover, .jdGallery a.left:hover { -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8 }



.jdGallery a.open {

	left: 0;

	top: 0;

	width: 100%;

	height: 100% }



.withArrows a.open {

	position: absolute;

	top: 0;

	left: 25%;

	height: 99%;

	width: 50%;

	cursor: pointer;

	z-index: 12;

	-moz-opacity:0.8;

	-khtml-opacity: 0.8;

	opacity: 0.8 }



.withArrows a.open:hover { background: url('../images/core/open.png') no-repeat center center; }



/* Gallery Sets */

.jdGallery .gallerySelector {

	z-index: 20;

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0 }



.jdGallery .gallerySelector h2 { margin-left: 10px; padding: 0px }

.jdGallery .gallerySelector .gallerySelectorWrapper { overflow: hidden }



.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton {

	margin-left: 10px;

	margin-top: 10px;

	padding: 5px;

	padding-bottom: 0px;

	cursor: pointer;

  text-align: left;

	float: left }



.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 div.info {

	margin: 0;

	padding: 0;

	font-size: 12px;

	font-weight: normal }

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3 {

	margin: 0;

	padding: 0;

	padding-top: 3px;

	padding-bottom: 5px;

	font-size: 12px;

	font-weight: normal }



.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3:hover {text-decoration: underline }



.jdGallery a.gallerySelectorBtn {

	z-index: 15;

	position: absolute;

	top: 0;

	left: 0px;

	height: 20px;

	text-align: center;

	padding: 0 10px;

	font-size: 13px;

	background: #000;

	cursor: pointer;

	opacity: .5;

	-moz-opacity: .5;

	-khtml-opacity: 0.5 }



/* Lightbox styling */

#lbOverlay {

	position: absolute;

	left: 0;

	width: 100%;

	background-color: #000000;

	cursor: pointer;

	z-index: 100 }



#lbCenter, #lbBottomContainer {

	position: absolute;

	left: 50%;

	overflow: hidden;

	background-color: #000000;

	z-index: 101 }



#lbImage {

	border: 15px solid #000000;

	border-bottom: none;

	background-repeat: no-repeat }



#lbPrevLink, #lbNextLink {

	display: block;

	position: absolute;

	top: 0;

	width: 50%;

	outline: none }



#lbPrevLink {left: 0 }

#lbNextLink {right: 0 }

#lbPrevLink:hover { background: transparent url(../images/core/prevlabel.png) no-repeat 0% 15% }

#lbNextLink:hover { background: transparent url(../images/core/nextlabel.png) no-repeat 100% 15% }



#lbBottom {

	font-family: Verdana, Helvetica, sans-serif;

	font-size: 10px;

	line-height: 1.4em;

	text-align: left;

	border: 15px solid #000000;

	background-color: #000000;

	text-indent: 5px }



#lbCloseLink {

	display: block;

	float: right;

	width: 66px;

	height: 22px;

	background: transparent url(../images/core/closelabel.png) no-repeat center;

	margin: 5px 0 }



#lbCaption, #lbNumber {margin-right: 71px }

#lbCaption {font-weight: bold; font-size: 12px; font-family: Arial, Helvetica, sans-serif; margin-bottom: 10px }



/*Various CSS*/

.read_more a:hover {text-decoration: underline }

.jdGallery div.info {font-style: italic }

.jdGallery div.count {font-size: 11px }

thanks!!!

Goeroeboeroe · 9 okt 2009

Geen flauw idee

Dit is zo niet te zeggen. Dit is nogal 'n berg css, en in principe kan het op tig plaatsen staan. Of ook nog ergens anders, buiten deze css.
Heb je 'n link naar waar het online staat? Dan is waarschijnlijk heel snel te zien waar je het aan kunt passen.
Als je in Firefox werkt, kun je 't trouwens dan waarschijnlijk ook zelf heel snel vinden als je de extensie Firebug installeert. Die is hier perfect voor: klik op de thumb en de html/css daarvan verschijnt.

Allard · 9 okt 2009

kwam er net achter dat het dmv javascript geregeld is..

vandaar dat we het niet konden vinden haha.. ik ga daar even in ploegen..

supertip van dat Firebug trouwens.. gebruik idd firefox en dat komt handig uit denk ik zo!
thanks!

Waar kan ik hier thumbnail grootte veranderen?

Allard

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

Allard

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy