zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder aus image gallery mit Bildüberschrift - nur wie?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.11.2008, 17:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2007
Beiträge: 22
fossy befindet sich auf einem aufstrebenden Ast
Standard 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>
der html code dazu lautet:

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>
nun hätte ich eben gern noch den namen des bildes am liebsten unterhalt des kleine bildes (thumbnail). wie bekomme ich das hin? die datenfelder stammen aus dem programm mit welchem ich arbeite. hinter dem feld z.b. <#TABLE Feld=O_Bild10> verbirgt sich z.b. der generierte html code <img src="objektbilder/47469099_5.jpg"width="553" height="400" alt="Bahnhofstraße">.

hoffe ihr versteht was ich meine.
danke und gruß

mathias
Angehängte Grafiken
Dateityp: jpg gallerie.jpg (57,4 KB, 4x aufgerufen)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:38 Uhr.