• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

1. Lehrjahr Lehrling braucht Hilfe! Lightbox 2

J

J-Ro

Neues Mitglied
Erst mal, hallo zusammen!

Ich bin langsam am verzweifeln. Seit einigen Tagen versuche ich Lightbox 2 auf einer Seite einzubauen. Bisher leider vergeblich...
Kann mir jemand ein konkrretes Bsp. machen wo ich hier in meinem Code die entsprechenden Tags einfügen muss?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>G. Schelker</title>
<style type="text/css">
<!--
body,td,th {
font-family: Calibri;
font-size: 14px;
color: #FFF;
}
body {
background-image: url(bilder/bg2.png);
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000;
}
a:link {
color: #093;
}
#navi {
position:absolute;
width:538px;
height:797px;
z-index:1;
left: 629px;
top: 92px;
visibility: visible;
}
#apDiv1 {
position:absolute;
width:537px;
height:886px;
z-index:2;
visibility: visible;
left: 216px;
top: 9px;
}
#content {
position:absolute;
z-index:2;
visibility: visible;
width: 591px;
height: 705px;
left: 18px;
top: 155px;
}
#content {
position:absolute;
width:478px;
height:231px;
z-index:2;
left: 61px;
top: 465px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args)) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>

<body onload="MM_preloadImages('bilder/bg2.png','../navigation/navi_neu/home_h.png','../navigation/navi_neu/produkte_h.png','../navigation/navi_neu/betrieb_h.png','../navigation/navi_neu/kontakt_h.png','../navigation/navi_neu/g.schelker_h.png','../bilder/nadelholz.png','../navigation/navi_neu/gallerie_h.png')">
<xxcenter>
<div id="navi">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','home','',1)" onmouseover="MM_nbGroup('over','home','../navigation/navi_neu/home_h.png','',1)" onmouseout="MM_nbGroup('out')"><img src="../navigation/navi_neu/home.png" alt="" name="home" border="0" id="home" onload="" /></a></td>
</tr>
<tr>
<td><a href="produkte.html" target="_top" onclick="MM_nbGroup('down','group1','produkte','',1)" onmouseover="MM_nbGroup('over','produkte','../navigation/navi_neu/produkte_h.png','',1)" onmouseout="MM_nbGroup('out')"><img src="../navigation/navi_neu/produkte.png" alt="" name="produkte" border="0" id="produkte" onload="" /></a></td>
</tr>
<tr>
<td><a href="laubholz.html" target="_top" onClick="MM_nbGroup('down','group1','laubholz','',1)" onMouseOver="MM_nbGroup('over','laubholz','','',1)" onMouseOut="MM_nbGroup('out')"><img name="laubholz" src="../navigation/navi_neu/submenu_laub.png" border="0" alt="" onLoad="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','nadelholz','',1)" onMouseOver="MM_nbGroup('over','nadelholz','','',1)" onMouseOut="MM_nbGroup('out')"><img name="nadelholz" src="../navigation/navi_neu/submenu_nadel.png" border="0" alt="" onLoad="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','betonschalung','',1)" onMouseOver="MM_nbGroup('over','betonschalung','','',1)" onMouseOut="MM_nbGroup('out')"><img name="betonschalung" src="../navigation/navi_neu/submenu_beton.png" border="0" alt="" onLoad="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','sperrholz','',1)" onMouseOver="MM_nbGroup('over','sperrholz','','',1)" onMouseOut="MM_nbGroup('out')"><img name="sperrholz" src="../navigation/navi_neu/submenu_sperr.png" border="0" alt="" onLoad="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','rust','',1)" onMouseOver="MM_nbGroup('over','rust','','',1)" onMouseOut="MM_nbGroup('out')"><img name="rust" src="../navigation/navi_neu/submenu_rust.png" border="0" alt="" onLoad="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','dienstleistungen','',1)" onMouseOver="MM_nbGroup('over','dienstleistungen','','',1)" onMouseOut="MM_nbGroup('out')"><img name="dienstleistungen" src="../navigation/navi_neu/submenu_dienstleistungen.png" border="0" alt="" onLoad="" /></a></td>
</tr>
<tr>
<td><a href="betrieb.html" target="_top" onClick="MM_nbGroup('down','group1','betrieb','',1)" onMouseOver="MM_nbGroup('over','betrieb','../navigation/navi_neu/betrieb_h.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="betrieb" src="../navigation/navi_neu/betrieb.png" border="0" alt="" onLoad="" /></a></td>
</tr>
<tr>
<td><a href="#" target="_top" onClick="MM_nbGroup('down','group1','gallerie','',1)" onMouseOver="MM_nbGroup('over','gallerie','../navigation/navi_neu/gallerie_h.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="gallerie" src="../navigation/navi_neu/gallerie.png" border="0" alt="" onLoad="" /></a></td>
</tr>
<tr>
<td><a href="kontakt.html" target="_top" onClick="MM_nbGroup('down','group1','kontakt','',1)" onMouseOver="MM_nbGroup('over','kontakt','../navigation/navi_neu/kontakt_h.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="kontakt" src="../navigation/navi_neu/kontakt.png" border="0" alt="" onLoad="" /></a></td>
</tr>
<tr>
<td><a href="g.schelker.html" target="_top" onClick="MM_nbGroup('down','group1','gschelker','',1)" onMouseOver="MM_nbGroup('over','gschelker','../navigation/navi_neu/g.schelker_h.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="gschelker" src="../navigation/navi_neu/g.schelker.png" border="0" alt="" onLoad="" /></a></td>
</tr>
</table>
</div>
<div id="content"> HIER MÖCHTE ICH DIE THUMBNAILS ANZEIGEN LASSEN</div>
<img src="../bilder/nadelholz.png" width="1280" height="886" />
<xx/center>
</body>
</html>

Ist dies überhaupt möglich wie ich mir das vorstelle?
Benütige dringend Hilfe, da mir auch in meiner Firma niemand wirklich weiterhelfen konnte. :-(

----THX---
 
Werbung:
Vorerst liest du dir bitte den 2. Link in meiner Signatur durch :) nachdem wir uns das HTML in schöner Forkm ansehen können, können wir dir auch leichter helfen ;)
 
HTML: 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>G. Schelker</title>
<style type="text/css">
<!--
body,td,th {
    font-family: Calibri;
    font-size: 14px;
    color: #FFF;
}
body {
    background-image: url(bilder/bg2.png);
    background-repeat: no-repeat;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #000;
}
a:link {
    color: #093;
}
#navi {
    position:absolute;
    width:538px;
    height:797px;
    z-index:1;
    left: 629px;
    top: 92px;
    visibility: visible;
}
#apDiv1 {
    position:absolute;
    width:537px;
    height:886px;
    z-index:2;
    visibility: visible;
    left: 216px;
    top: 9px;
}
#content {
    position:absolute;
    z-index:2;
    visibility: visible;
    width: 591px;
    height: 705px;
    left: 18px;
    top: 155px;
}
#content {
    position:absolute;
    width:478px;
    height:231px;
    z-index:2;
    left: 61px;
    top: 465px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</head>

<body onload="MM_preloadImages('bilder/bg2.png','../navigation/navi_neu/home_h.png','../navigation/navi_neu/produkte_h.png','../navigation/navi_neu/betrieb_h.png','../navigation/navi_neu/kontakt_h.png','../navigation/navi_neu/g.schelker_h.png','../bilder/nadelholz.png','../navigation/navi_neu/gallerie_h.png')">
<xxcenter>
<div id="navi">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','home','',1)" onmouseover="MM_nbGroup('over','home','../navigation/navi_neu/home_h.png','',1)" onmouseout="MM_nbGroup('out')"><img src="../navigation/navi_neu/home.png" alt="" name="home" border="0" id="home" onload="" /></a></td>
    </tr>
    <tr>
      <td><a href="produkte.html" target="_top" onclick="MM_nbGroup('down','group1','produkte','',1)" onmouseover="MM_nbGroup('over','produkte','../navigation/navi_neu/produkte_h.png','',1)" onmouseout="MM_nbGroup('out')"><img src="../navigation/navi_neu/produkte.png" alt="" name="produkte" border="0" id="produkte" onload="" /></a></td>
    </tr>
    <tr>
      <td><a href="laubholz.html" target="_top" onClick="MM_nbGroup('down','group1','laubholz','',1)" onMouseOver="MM_nbGroup('over','laubholz','','',1)" onMouseOut="MM_nbGroup('out')"><img name="laubholz" src="../navigation/navi_neu/submenu_laub.png" border="0" alt="" onLoad="" /></a></td>
    </tr>
    <tr>
      <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','nadelholz','',1)" onMouseOver="MM_nbGroup('over','nadelholz','','',1)" onMouseOut="MM_nbGroup('out')"><img name="nadelholz" src="../navigation/navi_neu/submenu_nadel.png" border="0" alt="" onLoad="" /></a></td>
    </tr>
    <tr>
      <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','betonschalung','',1)" onMouseOver="MM_nbGroup('over','betonschalung','','',1)" onMouseOut="MM_nbGroup('out')"><img name="betonschalung" src="../navigation/navi_neu/submenu_beton.png" border="0" alt="" onLoad="" /></a></td>
    </tr>
    <tr>
      <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','sperrholz','',1)" onMouseOver="MM_nbGroup('over','sperrholz','','',1)" onMouseOut="MM_nbGroup('out')"><img name="sperrholz" src="../navigation/navi_neu/submenu_sperr.png" border="0" alt="" onLoad="" /></a></td>
    </tr>
    <tr>
      <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','rust','',1)" onMouseOver="MM_nbGroup('over','rust','','',1)" onMouseOut="MM_nbGroup('out')"><img name="rust" src="../navigation/navi_neu/submenu_rust.png" border="0" alt="" onLoad="" /></a></td>
    </tr>
    <tr>
      <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','dienstleistungen','',1)" onMouseOver="MM_nbGroup('over','dienstleistungen','','',1)" onMouseOut="MM_nbGroup('out')"><img name="dienstleistungen" src="../navigation/navi_neu/submenu_dienstleistungen.png" border="0" alt="" onLoad="" /></a></td>
    </tr>
    <tr>
      <td><a href="betrieb.html" target="_top" onClick="MM_nbGroup('down','group1','betrieb','',1)" onMouseOver="MM_nbGroup('over','betrieb','../navigation/navi_neu/betrieb_h.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="betrieb" src="../navigation/navi_neu/betrieb.png" border="0" alt="" onLoad="" /></a></td>
    </tr>
    <tr>
      <td><a href="#" target="_top" onClick="MM_nbGroup('down','group1','gallerie','',1)" onMouseOver="MM_nbGroup('over','gallerie','../navigation/navi_neu/gallerie_h.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="gallerie" src="../navigation/navi_neu/gallerie.png" border="0" alt="" onLoad="" /></a></td>
    </tr>
    <tr>
      <td><a href="kontakt.html" target="_top" onClick="MM_nbGroup('down','group1','kontakt','',1)" onMouseOver="MM_nbGroup('over','kontakt','../navigation/navi_neu/kontakt_h.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="kontakt" src="../navigation/navi_neu/kontakt.png" border="0" alt="" onLoad="" /></a></td>
    </tr>
    <tr>
      <td><a href="g.schelker.html" target="_top" onClick="MM_nbGroup('down','group1','gschelker','',1)" onMouseOver="MM_nbGroup('over','gschelker','../navigation/navi_neu/g.schelker_h.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="gschelker" src="../navigation/navi_neu/g.schelker.png" border="0" alt="" onLoad="" /></a></td>
    </tr>
  </table>
</div>
<div id="content">HIER MÖCHTE ICH DIE LIGHTBOX ANZEIGEN</div>
<img src="../bilder/nadelholz.png" width="1280" height="886" />
<xx/center>
</body>
</html>
 
Werbung:
Eigentlich lädt man die JS dateien einfach in den Code rein. Hast ja die Source kopiert und eingefügt. naja. Jedenfalls. Wann soll die Lightbox aufgehen? Eigentlich musst du dir nur das hier ansehen um zu verstehen wie du die Lightbox einbindest:
Lightbox 2
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben