|
|||
Bilder aus image gallery mit Bildüberschrift - nur wie?
hi leute,
ich habe eine bilder gallery mittels css und javascript aus der bilder automatisch erzeugt werden sollen. nun bekomme ich nach dem erzeugen nur die bilder als thumbs in zwei reihen angezeigt - max. 12 miniaturbilder und halt das große bild. allerdings bekomme ich eben nur die bilder ohne die dazugehörigen namen angezeigt. anbei mal ein beispiel wie es aussieht. die namen dort sind dort nur mittels eines div containers eingetragen. mein css/js teil sieht folgendermaßen aus: Code:
<style media="screen,projection" type="text/css"> /* general styling for this example */ * { margin: 0; padding: 0; } body { padding: 0px; } /* begin gallery styling */ #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 60px; left: 20px; display: none; } #jgal { list-style: none; width: 520px; } #jgal li { opacity: .5; float:left; display: block; height:60px; width:60px; overflow:hidden; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { height:60px; width:auto; } #jgal li.active img { display: block; width:500px; height:400px;} #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } </style> <!--[if lt IE 8]> <style media="screen,projection" type="text/css"> #jgal li { filter: alpha(opacity=50); } #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } </style> <![endif]--> <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> <script type="text/javascript"> var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); </script> HTML-Code:
<ul id="gallery"> <li><#TABLE Feld=O_Bild1></li> <li><#TABLE Feld=O_Bild2></li> <li><#TABLE Feld=O_Bild3></li> <li><#TABLE Feld=O_Bild4></li> <li><#TABLE Feld=O_Bild5></li> <li><#TABLE Feld=O_Bild6></li> <li><#TABLE Feld=O_Bild7></li> <li><#TABLE Feld=O_Bild8></li> <li><#TABLE Feld=O_Bild9></li> <li><#TABLE Feld=O_Bild10></li> <li><#TABLE Feld=O_Bild11></li> <li><#TABLE Feld=O_Bild12></li> </ul> hoffe ihr versteht was ich meine. danke und gruß mathias |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bilder Gallery mit CSS | tommy34 | CSS | 0 | 11.06.2011 17:05 |
Problem mit einer css image gallery | tevin | CSS | 4 | 15.02.2010 16:11 |
Wie bekomme ich so eine Image Gallery hin? | fossy | Javascript & Ajax | 5 | 24.10.2008 16:16 |
Imagemap Zugriff bei einer Gallery | Sarah14 | Javascript & Ajax | 3 | 12.11.2007 15:06 |