man benötigt dazu das highslide-javascript....
letztlich ist die galerie eine kombination aus higslide und anderem code
***Link zur Vorschau entfernt***
die page hat eine praktikantin von uns gemacht (unter meiner aufsicht)
lediglich das scripten hab ich ihr komplett abgenommen.
die einzigen nachteile liegen in den bildern, weil man die in 3 grössen benötigt und evtl im preloading, weil es so eine weile dauert bis die bilder alle runtergeladen sind
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>
<title>Jessy´s Praktikum</title>
<link rel="stylesheet" type="text/css" href="jesstyle.css" />
<script type="text/javascript" src="functions.js" /></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<script type="text/javascript" src="highslide/highslide.js"></script>
<!--[if lte IE 6]>
<style type="text/css">
img, div, a{
behavior: url(iepngfix.htc);
}
</style>
<![endif]-->
<script type="text/javascript">
<!--
var TIMER;
var richtung;
var thumbz = new Array();
var bilder = new Array();
var texte = new Array();
var count = 0;
function preload(){
clearTimeout(TIMER);
bilder[0] = new Image();
bilder[0].src = "images/empfang1.jpg";
bilder[1] = new Image();
bilder[1].src = "images/empfang2.jpg";
bilder[2] = new Image();
bilder[2].src = "images/bildx.jpg";
bilder[3] = new Image();
bilder[3].src = "images/bildx.jpg";
bilder[4] = new Image();
bilder[4].src = "images/bildx.jpg";
bilder[5] = new Image();
bilder[5].src = "images/bildx.jpg";
bilder[6] = new Image();
bilder[6].src = "images/bildx.jpg";
bilder[7] = new Image();
bilder[7].src = "images/bildx.jpg";
bilder[8] = new Image();
bilder[8].src = "images/bildx.jpg";
bilder[9] = new Image();
bilder[9].src = "images/bildx.jpg";
bilder[10] = new Image();
bilder[10].src = "images/bildx.jpg";
bilder[11] = new Image();
bilder[11].src = "images/bildx.jpg";
bilder[12] = new Image();
bilder[12].src = "images/bildx.jpg";
bilder[13] = new Image();
bilder[13].src = "images/bildx.jpg";
bilder[14] = new Image();
bilder[14].src = "images/bildx.jpg";
bilder[15] = new Image();
bilder[15].src = "images/bildx.jpg";
bilder[16] = new Image();
bilder[16].src = "images/bildx.jpg";
bilder[17] = new Image();
bilder[17].src = "images/bildx.jpg";
bilder[18] = new Image();
bilder[18].src = "images/bildx.jpg";
bilder[19] = new Image();
bilder[19].src = "imagesbildx.jpg";
bilder[20] = new Image();
bilder[20].src = "images/bildx.jpg";
<!-- hier kommen die thumbnails hinein für die mittlere vorschau -->
thumbz[0] = new Image();
thumbz[0].src = "images/bildx_thumb.jpg";
thumbz[1] = new Image();
thumbz[1].src = "images/bildx_thumb.jpg";
thumbz[2] = new Image();
thumbz[2].src = "images/bildx_thumb.jpg";
thumbz[3] = new Image();
thumbz[3].src = "images/bildx_thumb.jpg";
thumbz[4] = new Image();
thumbz[4].src = "images/bildx_thumb.jpg";
thumbz[5] = new Image();
thumbz[5].src = "images/bildx_thumb.jpg";
thumbz[6] = new Image();
thumbz[6].src = "images/bildx_thumb.jpg";
thumbz[7] = new Image();
thumbz[7].src = "images/bildx_thumb.jpg";
thumbz[8] = new Image();
thumbz[8].src = "images/bildx_thumb.jpg";
thumbz[9] = new Image();
thumbz[9].src = "images/bildx_thumb.jpg";
thumbz[10] = new Image();
thumbz[10].src = "images/bildx_thumb.jpg";
thumbz[11] = new Image();
thumbz[11].src = "images/bildx_thumb.jpg";
thumbz[12] = new Image();
thumbz[12].src = "images/bildx_thumb.jpg";
thumbz[13] = new Image();
thumbz[13].src = "images/bildx_thumb.jpg";
thumbz[14] = new Image();
thumbz[14].src = "images/bildx_thumb.jpg";
thumbz[15] = new Image();
thumbz[15].src = "images/bildx_thumb.jpg";
thumbz[16] = new Image();
thumbz[16].src = "images/bildx_thumb.jpg";
thumbz[17] = new Image();
thumbz[17].src = "images/bildx_thumb.jpg";
thumbz[18] = new Image();
thumbz[18].src = "images/bildx_thumb.jpg";
thumbz[19] = new Image();
thumbz[19].src = "images/bildx_thumb.jpg";
thumbz[20] = new Image();
thumbz[20].src = "images/bildx_thumb.jpg";
<!-- hier kommen die texte zu den einzelnen bildern rein-->
texte[0] = "Ein Bild vom Empfang";
texte[1] = "Empfangsbereich";
texte[2] = "Hier is nen text";
texte[3] = "Hier is nen text";
texte[4] = "Hier is nen text";
texte[5] = "Hier is nen text";
texte[6] = "Hier is nen text";
texte[7] = "Hier is nen text";
texte[8] = "Hier is nen text";
texte[9] = "Hier is nen text";
texte[10] = "Ich in der 3.Praktikumswoche";
texte[11] = "Hier is nen text";
texte[12] = "Hier is nen text";
texte[13] = "Hier is nen text";
texte[14] = "Hier is nen text";
texte[15] = "Hier is nen text";
texte[16] = "Hier is nen text";
texte[17] = "Hier is nen text";
texte[18] = "Hier is nen text";
texte[19] = "Hier is nen text";
texte[20] = "Hier is nen text";
}
function nextPic(){
var target = document.getElementById("thumbwrap");
var leftpos = parseInt(target.style.left);
if(leftpos > -800){
target.style.left = (leftpos - (6*57)) + "px";
}
}
function backPic(){
var target = document.getElementById("thumbwrap");
var leftpos = parseInt(target.style.left);
if(leftpos < 0){
target.style.left = (leftpos + (6*57)) + "px";
}
}
function thumbToPic(index){
count= index;
document.getElementById("thumb1").href=bilder[count].src;
document.getElementById("slidecaption").innerHTML=texte[count];
blendimage('blenddiv','blendimage', thumbz[count].src, 400);
}
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
function shiftOpacity(id, millisec) {
//if an element is invisible, make it visible, else make it ivisible
if(document.getElementById(id).style.opacity == 0) {
opacity(id, 0, 100, millisec);
} else {
opacity(id, 100, 0, millisec);
}
}
function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function blendimage(divid, imageid, imagefile, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
//set the current image as background
document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
//make image transparent
changeOpac(0, imageid);
//make new image
document.getElementById(imageid).src = imagefile;
//fade in image
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}
window.onload = preload;
//-->
</script>
</head>
<body>
<div id="outerwrap">
<div id="topmenu">
<ul>
<li><a href="index.html"><span>Startseite</span></a></li>
<li><a href="kontakt.html"><span>Kontakt</span></a></li>
</ul>
<span class="clearer"></span>
</div><!-- topmenu ende -->
<div id="menuwrap">
<div id="header" class="zindex2">
<a href="praktikum.html" onmouseover="changeZ('header',4);" onmouseout="changeZ('header',2);"></a>
</div>
<div id="school" class="zindex3">
<div id="blumelinks"></div><!-- blumelinks ende -->
<a href="school.html" onmouseover="changeZ('school',4);" onmouseout="changeZ('school',3);"></a>
</div>
<div id="logo" class="zindex1"></div>
<div id="gallery" class="zindex3">
<a href="gallery.html" onmouseover="changeZ('gallery',4);" onmouseout="changeZ('gallery',3);"></a>
</div>
<div id="aboutme" class="zindex2">
<a href="aboutme.html" onmouseover="changeZ('aboutme',4);" onmouseout="changeZ('aboutme',2);"></a>
</div>
</div><!-- menuwrap ende -->
<div id="contentwrap">
<div id="subnavi" style="visibility:hidden;">
<ul>
<li><a href="#"><img id="daten" src="Bilder/daten.png" onmouseover="changePic('daten', 'Bilder/daten_mo.png');" onmouseout="changePic('daten', 'Bilder/daten.png');" /></a></li>
<li><a href="#"><img id="fotos" src="Bilder/Fotos.png" onmouseover="changePic('fotos', 'Bilder/fotos_mo.png');" onmouseout="changePic('fotos', 'Bilder/Fotos.png');" /></a></li>
</ul>
</div><!-- subnavi ende -->
<div id="contenttop"></div><!-- contenttop ende -->
<div id="contentmid">
<div id="content">
<h1>Meine Bilder</h1>
<div id="controlwrap">
<div id="backlink" onclick="backPic();"></div>
<div id="preview">
<div id="thumbwrap" style="position:relative; left:0px;">
<img class="slidethumb" src="images/empfang1_mini.jpg" onmouseover="thumbToPic('0')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg" onmouseover="thumbToPic('1')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg" onmouseover="thumbToPic('2')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg" onmouseover="thumbToPic('3')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('4')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('5')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('6')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('7')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('8')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('9')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('10')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('11')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('12')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('13')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('14')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('15')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('16')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('17')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('18')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('19')" alt="" title="" />
<img class="slidethumb" src="images/bildx_mini.jpg"onmouseover="thumbToPic('20')" alt="" title="" />
</div>
</div>
<div id="forwardlink" onclick="nextPic()"></div>
</div>
<div class="slidepixdiv" style="background-image: url(images/gallery1.jpg); background-repeat: no-repeat; width: 365px; height: 274px; margin-top:110px;" id="blenddiv">
<a id="thumb1" href="images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
<img class="slidepix" style="width: 365px; height: 274px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blendimage" src="images/thumbnail.jpg" alt="" title="zum Vergrössern anklicken" />
</a>
<div class="highslide-caption" id="slidecaption"></div>
</div>
<div class="slidepix" >
<img class="slidepix" src="media/texts/photos_about/02aft.jpg" style="width: 200px; height: 150px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blendimage" alt="" />
</div>
</div><!-- content ende -->
</div><!-- contentmid ende -->
<div id="contentbottom"></div><!-- contentbottom ende -->
</div><!-- contentwrap ende -->
</div><!-- outerwrap ende-->
</body>
</html>css-code:
HTML
*{
margin:0;
padding:0;
}
body{
font-family:tahoma;
font-size:12px;
}
.clearer{
clear:both;
}
img{
border:0;
}
#outerwrap{
background: #d0007a url(Bilder/hintergrund_01.png) repeat-x;
width:852px;
margin:0 auto;
overflow:hidden;
}
ul{
list-style-type:none;
}
#topmenu{
width:230px;
margin-top:14px;
margin-left:435px;
overflow:hidden;
width:240px;
}
#topmenu ul li{
display:inline;
}
#topmenu ul li a{
width:101px;
height:16px;
display:inline;
background-image:url(Bilder/linkbtn.png);
background-repeat:no-repeat;
background-position:-103px 0;
color:#ffffff;
text-decoration:none;
text-align:center;
margin-left:19px;
float:left;
font-family:tahoma;
font-size:12px;
}
#topmenu ul li a:hover{
background-position: 0 0;
}
#topmenu ul li a span{
position:relative;
}
#menuwrap{
width:581px;
margin:0 auto;
margin-top:56px;
}
#header{
width:455px;
height:82px;
position:relative;
margin-left:63px;
}
#header a{
width:455px;
height:82px;
display:block;
background: url(Bilder/mein_praktikum.png) no-repeat;
}
#header a:hover{
width:460px;
height:82px;
background: url(Bilder/Praktikum_webarts.png) no-repeat;
}
#school{
width:75px;
height:184px;
position:relative;
margin-top:-15px;
margin-left:1px;
}
#blumelinks{
position:relative;
background:url(Bilder/blume_links.png);
width:117px;
height:78px;
left:-117px;
}
#school a{
width:75px;
height:184px;
display:block;
background: url(Bilder/my_school.png) no-repeat;
margin-top:-78px
}
#school a:hover{
width:75px;
height:184px;
background: url(Bilder/Meine_Schule.png) no-repeat;
}
#logo{
width:429px;
height:153px;
background: url(Bilder/rosa_blumen.png) no-repeat;
position:relative;
margin-top:-170px;
margin-left:76px;
}
#gallery{
width:75px;
height:184px;
position:relative;
margin-top:-167px;
margin-left:505px;
}
#gallery a{
width:75px;
height:184px;
display:block;
background: url(Bilder/bilder_galerie.png) no-repeat;
}
#gallery a:hover{
width:75px;
height:184px;
background: url(Bilder/Homepage_Bildergalerie.png) no-repeat;
}
#aboutme{
width:455px;
height:82px;
position:relative;
margin-top:-17px;
margin-left:63px;
}
#aboutme a{
width:455px;
height:82px;
display:block;
background: url(Bilder/ueber_MICH-.png) no-repeat;
}
#aboutme a:hover{
width:455px;
height:82px;
background: url(Bilder/daten_uebermich_mouseover.png) no-repeat;
}
#contentwrap{
width:455px;
margin:0 auto ;
margin-top:-14px;
}
#contenttop{
display:block;
width:454px;
height:11px;
background: url(Bilder/content_top_bg.png);
}
#contentmid{
background: url(Bilder/content_mid_bg.png) repeat-y;
width:454px
}
#content{
width:360px;
margin:0 auto;
padding:25px 47px;
}
#contentbottom{
background: url(Bilder/content_bottom_bg.png);
width:454px;
height:12px;
margin-bottom:20px;
}
h1{
color:#9B3F10;
font-family:tahoma;
font-size:25px;
margin-bottom:22px;
}
.zindex0{
z-index:0;
}
.zindex1{
z-index:1;
}
.zindex2{
z-index:2;
}
.zindex3{
z-index:3;
}
.zindex4{
z-index:4;
}
#subnavi{
position:relative;
top:16px;
left:2px;
}
#subnavi ul li{
display:inline;
margin-right:12px;
}
.slidethumb{
height:60px;
width:53px;
}
.slidepixwrap{
height:240px;
width:320px;
}
#preview{
width:338px;
height:60px;
overflow:hidden;
z-index:2;
position:relative;
border:1px solid black;
margin-bottom:25px;
float:left;
}
#thumbwrap{
width:1197px;
height:60px;
position:relative;
z-index:0;
}
#backlink{
height:62px;
width:15px;
background:blue;
float:left;
}
#forwardlink{
height:62px;
width:15px;
background:blue;
float:right;
}
#controlwrap{
width:370px;
margin-left:-3px;
}