Gallery - subgallerylijst met namen/tekst ipv thumbnails

culdoc · Post by **culdoc** » Tue Apr 03, 2012 10:23 am

Weet iemand hoe ik een lijst met subgallery's kan laten zien in tekstlinks (de namen van de Gallery's) ipv dat de module een thumbnail wil laten zien?

Zie: http://www.vandereepe.nl/index.php?page=onze-collectie

Ik denk zelf dat ik iets moet wijzigen in het sjabloon, maar hoe en wat?
Ben nl. helaas geen programmeur...

Code: Select all

<div class="gallery">
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
{foreach from=$images item=image}
	<div class="img">
	{if $image->isdir}
		<a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}" alt="{$image->title}" /></a>

	{else}
   <a href="{$image->file}" title="{$image->title}" rel="lyteshow[gallery]"><img src="{$image->thumb}" alt="{$image->title}" /></a>
	{/if}
	</div>
{/foreach}
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
<div class="galleryclear">&nbsp;</div>
</div>

Jos · Post by **Jos** » Tue Apr 03, 2012 2:20 pm

culdoc wrote:Ben nl. helaas geen programmeur...

Volgens mij hoef je daar ook geen programmeur voor te zijn, maar wel iets weten van html en misschien een klein beetje smarty...

Verander dit

Code: Select all

	{if $image->isdir}
		<a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}" alt="{$image->title}" /></a>

in dit

Code: Select all

	{if $image->isdir}
		<a href="{$image->file}" title="{$image->title}">{$image->title}</a>

culdoc · Post by **culdoc** » Tue Apr 03, 2012 2:34 pm

Dank je! En hoe krijg ik de titels netjes onder elkaar?
Ze staan nu nog steeds naast elkaar zoals als het thumbnails zijn.

Jos · Post by **Jos** » Tue Apr 03, 2012 2:37 pm

css aanpassen in de gallery-template.

Er staat nu een float:left in wat er voor zorgt dat alles naast elkaar komt te staan. Als je dat dus verwijdert, komt alles onder elkaar te staan.

culdoc · Post by **culdoc** » Tue Apr 03, 2012 2:46 pm

en dan zijn de foto's wel naast elkaar?

culdoc · Post by **culdoc** » Tue Apr 03, 2012 3:10 pm

Waar moet ik eea veranderen om de titels onder elkaar te plaatsen?

Ik heb een paar float=left weggehaald maar zag geen verschil.
Hier de originele css:

Code: Select all

/* Album Module CSS for default, ImageGallery, and Thickbox templates */
/* Used for categories to make things clear correctly */
.album_content {
	width:100%; 
	float:left;
}
.clear {
	clear:both
}
/* Album List UL */
.albumlist
{
	margin-left:0;
	padding-left:0;
	float:left;
}

/* Picture List UL */
.picturelist
{
	margin-left:0;
	padding-left:0;
}

/* Album and Picture Lists */
.thumb
{
	padding:0;
	width:140px;
	margin: 2px;
/* Thumbnail spacing */
	text-decoration:none;
	line-height:normal;
	list-style-type:none;
	text-align:center;
	float:left;
}

.thumb a
{
	display:block;
	height:140px; 
/* Set link formatting*/
	width:140px; 
/* Thumb width*/ 
	
/* Thumb height*/
	padding:1px;
/* Thumb padding to form thumb frame */
/* You can set the above to 0px = no frame - but no hover indication!*/
	background-color:white;
	text-decoration:none;
}

.thumb img{
   width: 140px;
   height: 140px;
}

.albumcomment { text-align: left; }
.thumb a:visited img
{
	background-color:#000000;
/*Background of thumb on hover - sort of a light grey */
}

.thumb a:hover img
{
	background-color:#dae6e4;
/*Background of thumb on hover - sort of light blue/green */
}

/* Styling of text and navigation for Album */
.albumname
{
	font-size:smaller;
	text-align:center;
	font-weight:bold;
	font-style:normal;
}
.albumname a
{
	display: inline;
        border: none;
        margin:0;
        padding:0;
        background-color:transparent;
}
.albumpicturecount
{
	font-size:smaller;
	text-align:center;
	font-weight:normal;
	font-style:italic;
}

.albumcomment
{
	text-align:center;
	font-weight:normal;
	font-style:normal;
}

.albumnav
{
	text-align:center;
	font-weight:normal;
	font-style:normal;
	font-size:smaller;
}

.instructiontext
{
	font-weight:normal;
	font-style:normal;
	font-size:smaller;
	font-style:italic;
}

/* Big Picture */
.bigpicture
{
	padding:0.5em 0 0;
	clear:left;
	border-top:1px solid #ccc;
	text-align:center;
}

.bigpicturecaption
{
/* Big picture caption */
	text-align:center;
	margin:0 0 5px;
	padding:0;
}

.bigpicture img
{
/* Big picture settings */
	padding:18px;
/* Image padding to form photo frame. */
	width:80%;
/* Width of big picture - set to auto for actual width*/
	margin:0;
	background-color:white;
/* Background of picture */
	border-top:1px solid #000000;
/* Borders of picture frame */
	border-right:2px solid #ccc;
	border-bottom:2px solid #ccc;
	border-left:1px solid #000000;
	text-decoration:none;
}

.bigpicturenav
{
	margin:0;
	padding:0;
	color:#000;
	font-size:smaller;
	line-height:normal;
}

/*Thickbox CSS */
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
/* Already done in main CMSMS stylesheet. Commenting out. */
/* *{padding: 0; margin: 0;} */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}

#TB_secondLine {
	font: 10px Arial, Helvetica, sans-serif;
	color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	background-color:#000;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	height:100%;
	width:100%;
}

* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
	position: fixed;
	background: #ffffff;
	z-index: 102;
	color:#000000;
	display:none;
	border: 4px solid #525252;
	text-align:left;
	top:50%;
	left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
	display:block;
	margin: 15px 0 0 15px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

#TB_caption{
	height:25px;
	padding:7px 30px 10px 25px;
	float:left;
}

#TB_closeWindow{
	height:25px;
	padding:11px 25px 10px 0;
	float:right;
}

#TB_closeAjaxWindow{
	padding:7px 10px 5px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
}

#TB_title{
	background-color:#e8e8e8;
	height:27px;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
	padding:15px;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: fixed;
	display:none;
	height:13px;
	width:208px;
	z-index:103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
	z-index:99;
	position:fixed;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	height:100%;
	width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;
}

/* CSS for Lightbox follows */
#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../templates/db/lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../templates/db/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../templates/db/lightbox/images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	
/* Last-Modified: 28/06/06 00:08:22 */
#GB_overlay {
    background-color: #000;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    z-index: 100;
}

#GB_window {
    left: 0;
    top: 0;
    font-size: 1px;
    position: absolute;
    overflow: visible;
    z-index: 150;
}

#GB_window .content {
    width: auto;
    margin: 0;
    padding: 0;
}

#GB_frame {
    border: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    white-space: nowrap;
}


.GB_Gallery {
    margin: 0 22px 0 22px;
}

.GB_Gallery .content {
    background-color: #fff;
    border: 3px solid #000000;
}

.GB_header {
    top: 10px;
    left: 0;
    margin: 0;
    z-index: 500;
    position: absolute;
    border-bottom: 2px solid #555;
    border-top: 2px solid #555;
}

.GB_header .inner {
    background-color: #333;
    font-family: Arial, Verdana, sans-serif;
    padding: 2px 20px 2px 20px;
}

.GB_header table {
    margin: 0;
    width: 97%;
    border-collapse: collapse;
}

.GB_header .caption {
    text-align: left;
    color: #000000;
    white-space: nowrap;
    font-size: 20px;
}

.GB_header .close {
    text-align: right;
}

.GB_header .close img {
    z-index: 500;
    cursor: pointer;
}

.GB_header .middle {
    white-space: nowrap;
    text-align: center;
}


#GB_middle {
    color: #000000;
}

#GB_middle img {
    cursor: pointer;
    vertical-align: middle;
}

#GB_middle .disabled {
    cursor: default;
}

#GB_middle .left {
    padding-right: 10px;
}

#GB_middle .right {
    padding-left: 10px;
}


.GB_Window .content {
    background-color: #fff;
    border: 3px solid #ccc;
    border-top: none;
}

.GB_Window .header {
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #999;
    border-left: 3px solid #ccc;
    border-right: 3px solid #ccc;
    margin: 0;

    height: 22px;
    font-size: 12px;
    padding: 3px 0;
    color: #333;
}

.GB_Window .caption {
    font-size: 12px;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    padding-right: 20px;
}

.GB_Window .close { text-align: right; }
.GB_Window .close span { 
    font-size: 12px;
    cursor: pointer; 
}
.GB_Window .close img {
    cursor: pointer;
    padding: 0 3px 0 0;
}

.GB_Window .on { border-bottom: 1px solid #333; }
.GB_Window .click { border-bottom: 1px solid red; }

/* Start of CMSMS style sheet '02.1 Gallery CMotion horizontal' */


/* CMOTION GALLERY */



/* Please check gallerystyle.css and motiongallery.js for double-/hard-codings! */



div.largeview {

 text-align: center;

}



#motioncontainer {

margin-top: 5px;

height: 70px; /* according to gallery height */

width: 99.99%;

}



#motioncontainer a img {

border: 0; /* Set image border color */

margin: 0; /* chage this if you want some air inbetween images*/

height: 60px;

width:auto;

}



/* change cursor when clicking on image */

/*#motioncontainer a:active img {

cursor: progress;

}*/



#statusdiv {

background-color: #fff;

color: #FFBF00;/*#8f8f8f;*/

font-size: 65%;

font-weight: bold;

border: 0px solid #afafaf;

padding: .1em;

width: 100px;

position: absolute; /* Stop Editing Gallery Styles */

top: -10px;

left: 0px;

visibility: hidden;

}



#motioncontainer a:hover {

color: red; /* Dummy definition to overcome IE bug */

}



/* Those are already set in the template using

the "style"-tag for both of the divs. It seems to

work only this way - if someone could tell me why,

I'll appreciate!  */

/*

div#motioncontainer {

position:relative;

overflow:hidden;

}

div#motiongallery {

position:absolute;

left:0;

top:0;

white-space: nowrap;

}*/



/* END CMOTION GALLERY */

/* End of '02.1 Gallery CMotion horizontal' */

Jos · Post by **Jos** » Tue Apr 03, 2012 3:12 pm

uhm.. nee die komen dan ook onder elkaar.

Als je dat verschillend wilt, dan moet je de <div class="img">...</div> binnen de {if} halen, en wel onder de {else}, want dat is de plek waar worden de foto's worden weergegeven.

Boven de {else} (de plek van de subgalerieën) moet je dan een nieuwe <div> om de code plaatsen, met een andere class naam. Die moet je uiteraard in je css toevoegen.

de class .img moet in de css dan wel de float:left behouden.

Jos · Post by **Jos** » Tue Apr 03, 2012 3:13 pm

album????

culdoc · Post by **culdoc** » Tue Apr 03, 2012 3:54 pm

OEPS.... verkeerde CSS genomen, degene hierboven wordt helemaal niet gebruikt...

Het is deze CSS:

Code: Select all

.gallery .img {
	height: 140px;
	/*width: 140px;*/
	float: left;
	margin: 6px;
	text-align: center;
}

.gallery .img a {
	display: inline-block;
	border: none;
	padding: 1px;
}

.gallery .img a:hover {
	border-color: #999;
}

.gallery img {
	border: none;
}

.gallery .pagenavigation {
	height: 50px;
}

.gallery .prevpage a, .gallery .prevpage em {
	display: block;
	width: 50px;
	height: 39px;
	float: left;
	margin: 0;
	text-indent: 0px;
        background: url(../../images/previous.png) transparent no-repeat 0 0;
}

.gallery .nextpage a, .gallery .nextpage em {
	display: block;
	width: 50px;
	height: 39px;
	float: left;
	margin: 0 6px 0 0;
	text-indent: -1000px;
	background: url(../../images/next.png) transparent no-repeat 0 0;
}


.gallery .pagenavigation a:hover {
	background-position: 0 -40px;
}

.gallery .prevpage em, .gallery .nextpage em {
	background-position: 0 -80px;
}

.gallery .pagelinks {
	float: right;
	border-right: 2px solid #666;
}

.gallery .pagelinks a, .gallery .pagelinks em {
	margin-top: 6px;
	padding: 0 6px;
	border-left: 2px solid #666;
	text-align: center;
	font: bold 11px verdana; color: #666;
}

.gallery .pagelinks em {
	color: #000;
}

.galleryclear {
	clear: both;
}


/* LYTEBOX */

#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }
	#lbOverlay.grey { background-color: #000000; }
	#lbOverlay.red { background-color: #330000; }
	#lbOverlay.green { background-color: #003300; }
	#lbOverlay.blue { background-color: #011D50; }
	#lbOverlay.gold { background-color: #666600; }

#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0; }
#lbMain a img { border: none; }

#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
	#lbOuterContainer.grey { border: 3px solid #888888; }
	#lbOuterContainer.red { border: 3px solid #DD0000; }
	#lbOuterContainer.green { border: 3px solid #00B000; }
	#lbOuterContainer.blue { border: 3px solid #5F89D8; }
	#lbOuterContainer.gold { border: 3px solid #B0B000; }

#lbDetailsContainer {	font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em;	overflow: auto; margin: 0 auto; }
	#lbDetailsContainer.grey { border: 3px solid #888888; border-top: none; }
	#lbDetailsContainer.red { border: 3px solid #DD0000; border-top: none; }
	#lbDetailsContainer.green { border: 3px solid #00B000; border-top: none; }
	#lbDetailsContainer.blue { border: 3px solid #5F89D8; border-top: none; }
	#lbDetailsContainer.gold { border: 3px solid #B0B000; border-top: none; }

#lbImageContainer, #lbIframeContainer { padding: 10px; }
#lbLoading {
	position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(../lytebox/images/loading.gif) center no-repeat;
}

#lbHoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#lbImageContainer>#lbHoverNav { left: 0; }
#lbHoverNav a { outline: none; }

#lbPrev { width: 49%; height: 100%; background: transparent url(../lytebox/images/blank.gif) no-repeat; display: block; left: 0; float: left; }
	#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(../lytebox/images/prev_grey.gif) left 15% no-repeat; }
	#lbPrev.red:hover, #lbPrev.red:visited:hover { background: url(../lytebox/images/prev_red.gif) left 15% no-repeat; }
	#lbPrev.green:hover, #lbPrev.green:visited:hover { background: url(../lytebox/images/prev_green.gif) left 15% no-repeat; }
	#lbPrev.blue:hover, #lbPrev.blue:visited:hover { background: url(../lytebox/images/prev_blue.gif) left 15% no-repeat; }
	#lbPrev.gold:hover, #lbPrev.gold:visited:hover { background: url(../lytebox/images/prev_gold.gif) left 15% no-repeat; }

#lbNext { width: 49%; height: 100%; background: transparent url(../lytebox/images/blank.gif) no-repeat; display: block; right: 0; float: right; }
	#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(../lytebox/images/next_grey.gif) right 15% no-repeat; }
	#lbNext.red:hover, #lbNext.red:visited:hover { background: url(../lytebox/images/next_red.gif) right 15% no-repeat; }
	#lbNext.green:hover, #lbNext.green:visited:hover { background: url(../lytebox/images/next_green.gif) right 15% no-repeat; }
	#lbNext.blue:hover, #lbNext.blue:visited:hover { background: url(../lytebox/images/next_blue.gif) right 15% no-repeat; }
	#lbNext.gold:hover, #lbNext.gold:visited:hover { background: url(../lytebox/images/next_gold.gif) right 15% no-repeat; }

#lbPrev2, #lbNext2 { text-decoration: none; font-weight: bold; }
	#lbPrev2.grey, #lbNext2.grey, #lbSpacer.grey { color: #333333; }
	#lbPrev2.red, #lbNext2.red, #lbSpacer.red { color: #620000; }
	#lbPrev2.green, #lbNext2.green, #lbSpacer.green { color: #003300; }
	#lbPrev2.blue, #lbNext2.blue, #lbSpacer.blue { color: #01379E; }
	#lbPrev2.gold, #lbNext2.gold, #lbSpacer.gold { color: #666600; }

#lbPrev2_Off, #lbNext2_Off { font-weight: bold; }
	#lbPrev2_Off.grey, #lbNext2_Off.grey { color: #CCCCCC; }
	#lbPrev2_Off.red, #lbNext2_Off.red { color: #FFCCCC; }
	#lbPrev2_Off.green, #lbNext2_Off.green { color: #82FF82; }
	#lbPrev2_Off.blue, #lbNext2_Off.blue { color: #B7CAEE; }
	#lbPrev2_Off.gold, #lbNext2_Off.gold { color: #E1E100; }

#lbDetailsData { padding: 0 10px; }
	#lbDetailsData.grey { color: #333333; }
	#lbDetailsData.red { color: #620000; }
	#lbDetailsData.green { color: #003300; }
	#lbDetailsData.blue { color: #01379E; }
	#lbDetailsData.gold { color: #666600; }

#lbDetails { width: 60%; float: left; text-align: left; }
#lbCaption { display: block; font-weight: bold; }
#lbNumberDisplay { float: left; display: block; padding-bottom: 1.0em; }
#lbNavDisplay { float: left; display: block; padding-bottom: 1.0em; }

#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
	#lbClose.grey { background: url(../lytebox/images/close_grey.png) no-repeat; }
	#lbClose.red { background: url(../lytebox/images/close_red.png) no-repeat; }
	#lbClose.green { background: url(../lytebox/images/close_green.png) no-repeat; }
	#lbClose.blue { background: url(../lytebox/images/close_blue.png) no-repeat; }
	#lbClose.gold { background: url(../lytebox/images/close_gold.png) no-repeat; }

#lbPlay { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
	#lbPlay.grey { background: url(../lytebox/images/play_grey.png) no-repeat; }
	#lbPlay.red { background: url(../lytebox/images/play_red.png) no-repeat; }
	#lbPlay.green { background: url(../lytebox/images/play_green.png) no-repeat; }
	#lbPlay.blue { background: url(../lytebox/images/play_blue.png) no-repeat; }
	#lbPlay.gold { background: url(../lytebox/images/play_gold.png) no-repeat; }

#lbPause { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
	#lbPause.grey { background: url(../lytebox/images/pause_grey.png) no-repeat; }
	#lbPause.red { background: url(../lytebox/images/pause_red.png) no-repeat; }
	#lbPause.green { background: url(../lytebox/images/pause_green.png) no-repeat; }
	#lbPause.blue { background: url(../lytebox/images/pause_blue.png) no-repeat; }
	#lbPause.gold { background: url(../lytebox/images/pause_gold.png) no-repeat; }

culdoc · Post by **culdoc** » Tue Apr 03, 2012 3:58 pm

Beste Jos, bedankt!!! Met jouw uitleg is het gelukt. (nadat ik het toepaste in de juiste CSS...)

CMS Made Simple Forums

Gallery - subgallerylijst met namen/tekst ipv thumbnails

Gallery - subgallerylijst met namen/tekst ipv thumbnails

Re: Gallery - subgallerylijst met namen/tekst ipv thumbnails

Re: Gallery - subgallerylijst met namen/tekst ipv thumbnails

Re: Gallery - subgallerylijst met namen/tekst ipv thumbnails

Re: Gallery - subgallerylijst met namen/tekst ipv thumbnails

Re: Gallery - subgallerylijst met namen/tekst ipv thumbnails

Re: Gallery - subgallerylijst met namen/tekst ipv thumbnails

Re: Gallery - subgallerylijst met namen/tekst ipv thumbnails

Re: Gallery - subgallerylijst met namen/tekst ipv thumbnails

Re: Gallery - subgallerylijst met namen/tekst ipv thumbnails