Tekst schrijven boven thumbnails

[Paul32]

Hallo allemaal,

Ik heb een code voor een foto gallery met thumbnails, nou zou ik graag boven elke thumbnail een titel willen schrijven of het nu in of buiten het frame is maakt me niet veel uit. Is dit mogelijk?

Origineel:


Voorbeeld van wat ik wil:

<!-- JPEGbay.com GALLERY START -->
<div clear="all"></div>
<div id="jb-gallery5048456" style="width:960px;display:table; text-align:left; margin: 0 auto; color:#444444">
<div id="jb-title5048456" style="font-size:large; padding:10px 15px; text-align:left; background:#FFFFFF; border:1px solid #444444;border-width: 0 0 1px 0;">Item Photos</div>
<div id="jb-images5048456" style="padding:10px 20px 20px 10px; zoom: 1; position:relative; background:#FFFFFF; font-size:0;">
<div style="float:left; width:456px;height:354px; min-width:400px"></div>
<a id="jb-link1" href="http://jpegbay.com/gallery/005048456-.html#1" target="_blank"><img class="jb-preview" style="opacity:1; filter:alpha(opacity=100);" src="http://img2.jpegbay.com/gallery/005048456/1_m.jpg"><img class="jb-thumb" src="http://img2.jpegbay.com/gallery/005048456/1_t.jpg"></a>
<a id="jb-link2" href="http://jpegbay.com/gallery/005048456-.html#2" target="_blank"><img class="jb-preview" src="http://img2.jpegbay.com/gallery/005048456/2_m.jpg"><img class="jb-thumb" src="http://img2.jpegbay.com/gallery/005048456/2_t.jpg"></a>
<a id="jb-link3" href="http://jpegbay.com/gallery/005048456-.html#3" target="_blank"><img class="jb-preview" src="http://img2.jpegbay.com/gallery/005048456/3_m.jpg"><img class="jb-thumb" src="http://img2.jpegbay.com/gallery/005048456/3_t.jpg"></a>
<a id="jb-link4" href="http://jpegbay.com/gallery/005048456-.html#4" target="_blank"><img class="jb-preview" src="http://img2.jpegbay.com/gallery/005048456/4_m.jpg"><img class="jb-thumb" src="http://img2.jpegbay.com/gallery/005048456/4_t.jpg"></a>
<a id="jb-link5" href="http://jpegbay.com/gallery/005048456-.html#5" target="_blank"><img class="jb-preview" src="http://img2.jpegbay.com/gallery/005048456/5_m.jpg"><img class="jb-thumb" src="http://img2.jpegbay.com/gallery/005048456/5_t.jpg"></a>
<a id="jb-link6" href="http://jpegbay.com/gallery/005048456-.html#6" target="_blank"><img class="jb-preview" src="http://img2.jpegbay.com/gallery/005048456/6_m.jpg"><img class="jb-thumb" src="http://img2.jpegbay.com/gallery/005048456/6_t.jpg"></a>
<a id="jb-link7" href="http://jpegbay.com/gallery/005048456-.html#7" target="_blank"><img class="jb-preview" src="http://img2.jpegbay.com/gallery/005048456/7_m.jpg"><img class="jb-thumb" src="http://img2.jpegbay.com/gallery/005048456/7_t.jpg"></a>
<a id="jb-link8" href="http://jpegbay.com/gallery/005048456-.html#8" target="_blank"><img class="jb-preview" src="http://img2.jpegbay.com/gallery/005048456/8_m.jpg"><img class="jb-thumb" src="http://img2.jpegbay.com/gallery/005048456/8_t.jpg"></a>
<a id="jb-link9" href="http://jpegbay.com/gallery/005048456-.html#9" target="_blank"><img class="jb-preview" src="http://img2.jpegbay.com/gallery/005048456/9_m.jpg"><img class="jb-thumb" src="http://img2.jpegbay.com/gallery/005048456/9_t.jpg"></a>
<a id="jb-link10" href="http://jpegbay.com/gallery/005048456-.html#10" target="_blank"><img class="jb-preview" src="http://img2.jpegbay.com/gallery/005048456/10_m.jpg"><img class="jb-thumb" src="http://img2.jpegbay.com/gallery/005048456/10_t.jpg"></a>
<a id="jb-link11" href="http://jpegbay.com/gallery/005048456-.html#11" target="_blank"><img class="jb-preview" src="http://img2.jpegbay.com/gallery/005048456/11_m.jpg"><img class="jb-thumb" src="http://img2.jpegbay.com/gallery/005048456/11_t.jpg"></a>
<a id="jb-link1" href="http://jpegbay.com/gallery/005048456-.html#1" target="_blank"><img class="jb-preview jb-preview1" src="http://img2.jpegbay.com/gallery/005048456/1_m.jpg"></a>
<br clear="all">
<img src="http://jpegbay.com/gallery/005048456-.html#1" style="width:1px;height:1px;visibility:hidden">
</div>
<div id="jb-footer5048456" style="font-size:small; padding:5px 15px; text-align:left; background:#FFFFFF; border:1px solid #444444;border-width: 1px 0 0 0;">
<a target="_blank" title="JPEGbay.com - free eBay image gallery" href="http://jpegbay.com"><img style="border:none; float:right" src="http://jpegbay.com/static/jpegbay/gallery_icon.png"></a>click to enlarge</div>
<style type="text/css"><!--
#jb-images5048456 a {text-decoration:none;}
#jb-images5048456 img {background:#FFFFFF;border:7px solid #444444;border-radius:10px;}
#jb-images5048456 img.jb-thumb {width:128px; height:96px; margin:8px 0 0 10px;}
#jb-images5048456 a:hover img.jb-thumb {padding:6px; border:1px solid #444444;}
#jb-images5048456 a img.jb-preview {width:384px; height:288px; margin:0; position:absolute; top:37px; left:41px;opacity:0; filter:alpha(opacity=0); transition:opacity 0.7s ease-in;}
#jb-images5048456 a:hover img.jb-preview {opacity:1; filter:alpha(opacity=100); transition:opacity 0.7s ease-out;}
#jb-images5048456 a:hover img.jb-preview1 {padding:6px; border:1px solid #444444;}
--></style>
</div>
<!-- JPEGbay.com GALLERY END -->

 

[botsenbytes]

Beste Paul32,

Ik zal je aanraden om alles in aparte <div></div>-containers te plaatsen of alles tussen <ul> en <li> tags. In beide gevallen moet je in de CSS wel goed instellen zodat alles netjes naast en boven elkaar komt.
Zoek in Google eens op 'zerogrid'. Je vind dan een responsive grid systeem die gemakkelijk te gebruiken is met een klein beetje kennis van CSS. Let wel; je hebt dan alleen nog het grid. De grootte van de afbeeldingen, tekst en kleuren moet je dan zelf nog doen.

Met vriendelijke groet,
Christiaan Huizinga
www.botsenbytes.nl