Centreren thumbnails in een image gallery

Door Niels Cup op 28-11-2014 11:47

1.184 views

Beste leden

Ik heb een Wordpress website heb met daarin een plugin voor een Image Gallery.
Men ziet eerst een kleine thumbnail en nadat daarop geklikt is krijgt je de afbeelding vergroot te zien.

Probleem:
De thumbnails worden niet netjes gecentreerd in de pagina weergegeven. Op mobiele telefoons, tablets en PC's ziet het er elke keer anders uit. Hoe kan ik ervoor zorgen dat de thubmails op elk apparaat netjes gecentreerd worden weergegeven?

Wat heb ik zelf gedaan?
Ik heb de configuratieinstellingen van de plugin nagelopen maar niks kunnen vinden. Ik heb de thumbnails in een div geplaatst en daarna met CSS de eigenschap align: center toegepast.

wie weet iets meer?

http://www.jijdigitaal.nl/test/gallery/

Frank Nietbelangrijk

28-11-2014 17:23

Zonder naar je CSS te kijken durf ik te wedden dat de afbeeldingen float:left; in de css meekrijgen. Dat wil zeggen dat de afbeeldingen in principe in een horizontale lijn worden weergegeven totdat de parent div (die zwarte) 'vol' zit. Dan wordt de eerst volgende op de volgende regel getoond. Die parent div biedt nu plaats aan zo ongeveer 6,33 foto's.

Je kunt drie dingen doen om dit op te lossen:
A. je padding-left vergroten van de parent-div
B. je afbeeldingen iets groter weergeven zodat er precies 6 afbeeldingen in de parent-div passen per regel
C. De margin tussen de afbeeldingen onderling iets vergroten.

Aan jou de keus.

Toevoeging op 28/11/2014 17:35:35:

A:


#header, #main, #footer, .footer-area {
	padding-left: 45px; /* aangepast */
	padding-right: 0px;
}


.ngg-gallery-thumbnail img {
	width: 200px; /* toegevoegd */
	background-color: #FFFFFF;
	border: 1px solid #A9A9A9;
	display: block;
	margin: 4px 0px 4px 4px;
	padding: 4px;
	position: relative;
}


.ngg-gallery-thumbnail img {
	background-color: #FFFFFF;
	border: 1px solid #A9A9A9;
	display: block;
	margin: 4px 0 17px 17px; /* aangepast */
	padding: 4px;
	position: relative;
}

Reageren

Inloggen om te reageren