Lightbox 2
Windassel
- multimedia (audio & video)
Hi,
ich schaue mir gerade ein Video an wo mit lightbox2 gearbeitet wird.
Und in der html datei schaut das ja so aus:
<a href="Bilder/4.jpg-groß.JPG">
<img src="Bilder/4.jpg-klein.JPG" alt="" border="0" width="500" height="300">
</a>
ist es richtig, dass ich bei a href genau den gleichen link angebe wie bei img src? denn in dem video war das nicht so. Das Bild bei a href war größer dargestellt, als das bei img src. Aber wie kann ich das denn machen?
مرحبا
<a href="Bilder/4.jpg-groß.JPG">
<img src="Bilder/4.jpg-klein.JPG"
ist es richtig, dass ich bei a href genau den gleichen link angebe wie bei img src?
Inwiefern sind beide gleich?
mfg
مرحبا
<a href="Bilder/4.jpg-groß.JPG"> <img src="Bilder/4.jpg-klein.JPG"
ist es richtig, dass ich bei a href genau den gleichen link angebe wie bei img src?
Inwiefern sind beide gleich?
mfg
Das Problem hat sich schon gelöst. Ich hatte es mir eigentlich so gedacht, dass das Bild bei img src kleiner ist als das bei a href. Also das bei a href ist etwas größe, sodass man, wenn man dann auf das Bild drauf klickt, es auch größer erscheint. Hab jetzt einfach nur die Größe verändert. Wie kann ich denn jetzt diese ganzen Bilder auf meine Seite einbinden? Funktioniert irgendwie nicht...
So sieht die ganze lightbox aus. Nur ich möchte die gerne in meinen content auf meiner homepage einbauen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><!-- Head Anfang -->
<title>Klassenfahrt</title>
<meta name="author" content="Marius M">
<meta name="editor" content="html-editor phase 5">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head>
<body> <!-- Body Anfang -->
<a href="Bilder/4.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/4.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/5.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/5.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/6.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/6.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/4.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/bild2.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/Header.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/Header.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/header3.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/header3.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P1.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P1.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P10.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P10.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P12.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P12.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P11.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P11.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P13.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P13.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P2.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P2.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P3.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P3.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P5.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P5.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P6.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P6.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P7.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P7.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P8.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P8.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P9.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P9.JPG" alt="" border="0" width="500" height="300">
</a>
</body>
</html>
Und meiner Seite inkl. der lightbox sieht dann so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><!-- Head Anfang -->
<title>Klassenfahrt</title>
<meta name="author" content="Marius M">
<meta name="editor" content="html-editor phase 5">
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head><!-- Head Ende -->
<body> <!-- Body Anfang -->
<div align="center">
<div id="root_site"> <!-- Die Tabelle -->
<ul id="navigation_main_container"> <!-- Navigation Anfang -->
<li><a href="Indecks.html">Home</a></li>
<li><a href="Tag1.html">Tag 1</a></li>
<li><a href="Tag2.html">Tag 2</a></li>
<li><a href="Tag3.html">Tag 3</a></li>
<li><a href="Tag4.html">Tag 4</a></li>
<li><a href="Tag5.html">Tag 5</a></li>
<li><a href="Bilder.html">Bilder </a></li>
</ul> <!-- Navigation Ende -->
<div id="content_main_container"> <!-- Hauptteil Anfang -->
<div id="content_table_main_container">
<a href="Bilder/4.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/4.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/5.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/5.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/6.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/6.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/4.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/bild2.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/Header.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/Header.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/header3.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/header3.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P1.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P1.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P10.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P10.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P12.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P12.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P11.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P11.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P13.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P13.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P2.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P2.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P3.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P3.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P5.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P5.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P6.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P6.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P7.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P7.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P8.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P8.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P9.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P9.JPG" alt="" border="0" width="500" height="300">
</a>
</div>
</div> <!-- Hauptteil Ende -->
<div id="footer_main_container"> <!-- Footer Anfang -->
Content Copyright© 2013 by Marius M and Maik Mikus. <a style="text-decoration: none;" href="Impressum.html"><font color="#FFFFFF">Impressum</font></a>
</div> <!-- Footer Ende -->
</div>
</div>
</body> <!-- Body Ende -->
</html>
Hat wer eine Idee? :/
So, hat funktioniert :)
مرحبا
So, hat funktioniert :)
Für's Archiv: Wo hat's gehakt?
mfg
مرحبا
So, hat funktioniert :)
Für's Archiv: Wo hat's gehakt?
mfg
eigentlich nirgends. den quellcode den ich vorhin gepostet hat, hat geklappt.
hier nochmal der qullcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><!-- Head Anfang -->
<title>Klassenfahrt</title>
<meta name="author" content="Marius M">
<meta name="editor" content="html-editor phase 5">
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head><!-- Head Ende -->
<body> <!-- Body Anfang -->
<div align="center">
<div id="root_site"> <!-- Die Tabelle -->
<ul id="navigation_main_container"> <!-- Navigation Anfang -->
<li><a href="Indecks.html">Home</a></li>
<li><a href="Tag1.html">Tag 1</a></li>
<li><a href="Tag2.html">Tag 2</a></li>
<li><a href="Tag3.html">Tag 3</a></li>
<li><a href="Tag4.html">Tag 4</a></li>
<li><a href="Tag5.html">Tag 5</a></li>
<li><a href="Bilder.html">Bilder </a></li>
</ul> <!-- Navigation Ende -->
<div id="content_main_container"> <!-- Hauptteil Anfang -->
<div id="content_table_main_container">
<a href="Bilder/4.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/4.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/5.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/5.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/6.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/6.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/4.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/bild2.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/Header.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/Header.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/header3.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/header3.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P1.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P1.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P10.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P10.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P12.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P12.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P11.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P11.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P13.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P13.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P2.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P2.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P3.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P3.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P5.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P5.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P6.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P6.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P7.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P7.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P8.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P8.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P9.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P9.JPG" alt="" border="0" width="500" height="300">
</a>
</div>
</div> <!-- Hauptteil Ende -->
<div id="footer_main_container"> <!-- Footer Anfang -->
Content Copyright© 2013 by Marius M and Maik Mikus. <a style="text-decoration: none;" href="Impressum.html"><font color="#FFFFFF">Impressum</font></a>
</div> <!-- Footer Ende -->
</div>
</div>
</body> <!-- Body Ende -->
</html>
Hi,
ich wollte jetzt kein neues topic aufmachen. von daher stell ich mal meine frage hier.
In meiner Navigation sind folgende Punkte aufgelistet: Home Skifahrt DieHerberge An-und Abfahrt Bilder
die 1. 4 punkte von links aus gesehen sind alle gleich groß. Also meine seite verändert sich, sondern nur die Wörter die ich da jeweils reingeschrieben habe. Nur wenn ich jetzt auf Bilder klicke, dann vergrößert sich alles minimal. Und das möchte ich eigentlich nicht.
Die CSS datei:
body
{
background-color: #FFFFFF;
background-position: center;
background-position: top;
}
/*Hauptseite*/
#root_site
{
height: auto;
width: 860px;
margin-top: 40px;
}
#header_main_container
{
height: 200px;
width: 100%;
background-color: #61b4cf;
}
ul#navigation_main_container
{
padding: 0px;
margin: 0px;
background-color: #024e68;
border-radius: 10px 10px 10px 10px;
}
ul#navigation_main_container
{
width: 100%;
display:table;
}
ul#navigation_main_container li /*Spalten*/
{
display: table-cell;
padding: 5px;
}
ul#navigation_main_container a /*Schrift*/
{
color: white;
font-size: 24px;
text-decoration: none;
}
ul#navigation_main_container a:hover /*Rollover-effekt*/
{
color: #06799f;
}
#content_main_container
{
background: #06799f;
width: 100%;
overflow: auto;
border-radius: 10px 10px 10px 10px;
}
#content_table_main_container
{
border: solid 0px;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 100px;
border-radius: 10px 10px 10px 10px;
font-size: 24px;
width: 80%;
}
#footer_main_container
{
background: #024e68;
width: 100%;
height: 50px;
color: #FFF;
border-radius: 10px 10px 10px 10px;
}
Die Bilder-Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><!-- Head Anfang -->
<title>Klassenfahrt</title>
<meta name="author" content="Marius M">
<meta name="editor" content="html-editor phase 5">
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head><!-- Head Ende -->
<body> <!-- Body Anfang -->
<div align="center">
<div id="root_site"> <!-- Die Tabelle -->
<ul id="navigation_main_container"> <!-- Navigation Anfang -->
<li><a href="Indecks.html">Home</a></li>
<li><a href="Tag1.html">Skifahrt</a></li>
<li><a href="Tag2.html">Die Herberge</a></li>
<li><a href="Tag3.html">An- und Abfahrt</a></li>
<li><a href="Tag4.html">Sonstige Aktivitaeten</a></li>
<li><a href="Bilder.html">Bilder </a></li>
</ul> <!-- Navigation Ende -->
<div id="content_main_container"> <!-- Hauptteil Anfang -->
<div id="content_table_main_container">
<a href="Bilder/4.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/4.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/5.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/5.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/6.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/6.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/4.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/bild2.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/Header.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/Header.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/header3.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/header3.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P1.jpg.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P1.jpg.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P10.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P10.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P12.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P12.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P11.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P11.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P13.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P13.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P2.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P2.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P3.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P3.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P5.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P5.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P6.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P6.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P7.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P7.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P8.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P8.JPG" alt="" border="0" width="500" height="300">
</a>
<a href="Bilder/P9.JPG" rel="lightbox[Obernberg]">
<img src="Bilder/P9.JPG" alt="" border="0" width="500" height="300">
</a>
</div>
</div> <!-- Hauptteil Ende -->
<div id="footer_main_container"> <!-- Footer Anfang -->
Content Copyright© 2013 by Marius Mann and Maik Mikus. <a style="text-decoration: none;" href="Impressum.html"><font color="#FFFFFF">Impressum</font></a>
</div> <!-- Footer Ende -->
</div>
</div>
</body> <!-- Body Ende -->
</html>
<ul id="navigation_main_container"> <!-- Navigation Anfang -->
<li><a href="Indecks.html">Home</a></li>
<li><a href="Tag1.html">Tag 1</a></li>
<li><a href="Tag2.html">Tag 2</a></li>
<li><a href="Tag3.html">Tag 3</a></li>
<li><a href="Tag4.html">Tag 4</a></li>
<li><a href="Tag5.html">Tag 5</a></li>
<li><a href="Bilder.html">Bilder </a></li>
</ul> <!-- Navigation Ende -->
Das ist mir vorhin auch passiert, als ich ein impressum erstellt habe. Ab einer gewissen wörterzahl, so ist es mir zumindestens vorgekommen, vergrößert sich die Seite ein wenig. Was kann ich dagegen unternehmen? :/
Hi,
Die CSS datei:
body
{
background-color: #FFFFFF;
background-position: center;
background-position: top;
}
}
da unten nur noch:
overflow-y:scroll;
anfügen. Und es klappt perfekt :)