CMS Made Simple Forums

Hallo CMSMS'rs

Ik gebruik voor een site de gallery module met het sjabloon Fancybox.
Veel foto'suit diverse jaartallen.
In het 1e overzicht laat deze niet de jaartallen zien die bij titel en omschrijving wel zijn ingevuld. Pas bij het aanklikken van een foto worden deze wel zichtbaar.
Hoe zou ik dit kunnen oplossen?

Wellicht heb je een link naar de website waar het om gaat?

En kun je even het Gallery template posten dat wordt gebruikt? Met name het 'html' gedeelte daarvan.

hierbij de code


<div class="gallery">
{if !empty($gallerytitle)}<h3>{$gallerytitle}</h3>{/if}
{if !empty($gallerycomment)}<div class="gallerycomment">{$gallerycomment}</div>{/if}

<div class="pagenavigation">
{if $pages > 1}
<div class="prevpage">{$prevpage}</div>
<div class="nextpage">{$nextpage}</div>
{/if}
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
{if $pages > 1}<div class="pagelinks">{$pagelinks}</div>{/if}
</div>


{foreach from=$images item=image}
<div class="img">
{if $image->isdir}
<a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a><br />
{$image->titlename}
{else}
<a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
{/if}
</div>
{/foreach}
<div class="galleryclear">&nbsp;</div>
</div>

en de CSS

.gallery .img {
height: 180px;
/*width: 180px; Adjust as you see fit */
float: left;
margin: 10px;
text-align: center;
}

.gallery .img a {
display: inline-block;
border: 2px solid #ddd;
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: -1000px;
background: url(../../images/previous.png) transparent no-repeat 0 0;
overflow: hidden;
}

.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;
overflow: hidden;
}

.gallery .parentlink a {
display: block;
width: 50px;
height: 39px;
float: left;
text-indent: -1000px;
background: url(../../images/uppage.png) transparent no-repeat 0 0;
overflow: hidden;
}

.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;
}


/* FANCYBOX - version 1.3.4 */

#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
cursor: pointer;
overflow: hidden;
z-index: 1104;
display: none;
}

#fancybox-loading div {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 480px;
background-image: url('../fancybox/fancybox.png');
}

#fancybox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1100;
display: none;
}

#fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: none;
}

#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
padding: 20px;
z-index: 1101;
outline: none;
display: none;
}

#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #000;
}

#fancybox-content {
width: 0;
height: 0;
padding: 0;
outline: none;
position: relative;
overflow: hidden;
z-index: 1102;
border: 0px solid #000;
}

#fancybox-hide-sel-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 1101;
}

#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('../fancybox/fancybox.png') -40px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}

#fancybox-error {
color: #444;
font: normal 12px/20px Arial;
padding: 14px;
margin: 0;
}

#fancybox-img {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
outline: none;
line-height: 0;
vertical-align: top;
}

#fancybox-frame {
width: 100%;
height: 100%;
border: none;
display: block;
}

#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('../fancybox/blank.gif');
z-index: 1102;
display: none;
}

#fancybox-left {
left: 0px;
}

#fancybox-right {
right: 0px;
}

#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
left: -9999px;
width: 30px;
height: 30px;
margin-top: -15px;
cursor: pointer;
z-index: 1102;
display: block;
}

#fancybox-left-ico {
background-image: url('../fancybox/fancybox.png');
background-position: -40px -30px;
}

#fancybox-right-ico {
background-image: url('../fancybox/fancybox.png');
background-position: -40px -60px;
}

#fancybox-left:hover, #fancybox-right:hover {
visibility: visible; /* IE6 */
}

#fancybox-left:hover span {
left: 20px;
}

#fancybox-right:hover span {
left: auto;
right: 20px;
}

.fancybox-bg {
position: absolute;
padding: 0;
margin: 0;
border: 0;
width: 20px;
height: 20px;
z-index: 1001;
}

#fancybox-bg-n {
top: -20px;
left: 0;
width: 100%;
background-image: url('../fancybox/fancybox-x.png');
}

#fancybox-bg-ne {
top: -20px;
right: -20px;
background-image: url('../fancybox/fancybox.png');
background-position: -40px -162px;
}

#fancybox-bg-e {
top: 0;
right: -20px;
height: 100%;
background-image: url('../fancybox/fancybox-y.png');
background-position: -20px 0px;
}

#fancybox-bg-se {
bottom: -20px;
right: -20px;
background-image: url('../fancybox/fancybox.png');
background-position: -40px -182px;
}

#fancybox-bg-s {
bottom: -20px;
left: 0;
width: 100%;
background-image: url('../fancybox/fancybox-x.png');
background-position: 0px -20px;
}

#fancybox-bg-sw {
bottom: -20px;
left: -20px;
background-image: url('../fancybox/fancybox.png');
background-position: -40px -142px;
}

#fancybox-bg-w {
top: 0;
left: -20px;
height: 100%;
background-image: url('../fancybox/fancybox-y.png');
}

#fancybox-bg-nw {
top: -20px;
left: -20px;
background-image: url('../fancybox/fancybox.png');
background-position: -40px -122px;
}

#fancybox-title {
font-family: Helvetica;
font-size: 12px;
z-index: 1102;
}

.fancybox-title-inside {
padding-bottom: 10px;
text-align: center;
color: #333;
background: #fff;
position: relative;
}

.fancybox-title-outside {
padding-top: 10px;
color: #fff;
}

.fancybox-title-over {
position: absolute;
bottom: 0;
left: 0;
color: #FFF;
text-align: left;
}

#fancybox-title-over {
padding: 10px;
background-image: url('../fancybox/fancy_title_over.png');
display: block;
}

.fancybox-title-float {
position: absolute;
left: 0;
bottom: -20px;
height: 32px;
}

#fancybox-title-float-wrap {
border: none;
border-collapse: collapse;
width: auto;
}

#fancybox-title-float-wrap td {
border: none;
white-space: nowrap;
}

#fancybox-title-float-left {
padding: 0 0 0 15px;
background: url('../fancybox/fancybox.png') -40px -90px no-repeat;
}

#fancybox-title-float-main {
color: #FFF;
line-height: 29px;
font-weight: bold;
padding: 0 0 3px 0;
background: url('../fancybox/fancybox-x.png') 0px -40px;
}

#fancybox-title-float-right {
padding: 0 0 0 15px;
background: url('../fancybox/fancybox.png') -55px -90px no-repeat;
}

/* IE7, IE8 */
.fancybox-ie .fancybox-bg { background: transparent !important; }

Bijvoorbeeld:
En dan een beetje stylen natuurlijk.

Dank voor de code.
Moet ik deze specifiek in de bestaande code toevoegen of in plaats van?

Gr Bartje

De code van Velden vervangen voor het gelijke deel uit je eigen code. Misschien nog even een check waar de verschillen zitten.

Dank voor de hulp.
Achteraf denk je dan, ik had even beter moet zoeken
Fijn dit forum.