Nu skulle begge dele være med i scriptet dog er der ikke flydende opacity på billeder i under div'en ... jeg må indrømme at det blev lidt tungere end jeg regnede med det ville være ... og har siddet og rodet lidt i det rod jeg lavede igår ... det burde være lidt bedre stillet op informations mæssigt ... (beklager igen at jeg undervurderede det ... og gik lidt for optimistisk igang - som du kan se kører fade funktionen ikke helt optimalt ved hurtig mouseover skifte...)
... jeg har gjort så man kan deaktivere popup en og bare udvide billedet istedet eller så man kan deaktivere onclick helt (forkortelse og fjernelse af kommentarer og script dele kan gøres når / hvis det virker godt nok ... jeg har nu filerne læggende som her:
hovedmappen:
minib1.jpg (hos mig 100x80 px billeder)
minib2.jpg
minib3.jpg
minib4.jpg
minib5.jpg
- /mellem/
- - b1.jpg (hos mig 350x300 px billeder)
- - b2.jpg
- - b3.jpg
- - b4.jpg
- - b5.jpg
- /big/
- - b1.jpg (hos mig 750x560 px billeder)
- - b2.jpg
- - b3.jpg
- - b4.jpg
- - b5.jpg
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
<style type="text/css">
#tgdiv{
width:750px;
height:560px;
position:relative;
border:1px solid #000;
}
#tgpic{
position:absolute;
top:50%;left:50%;
margin:-109px 0px 0px -145px;
}
</style>
<script type="text/javascript">
var tgpic; // Holder til forbindelse til elementet med id="tgpic"
var tgfadecur; // Holder til at checke på hvad billede der skiftes til
var tgpicpos=true;
/* Ved instilling til:
true:
- Billeder der skiftes til centreres via. position absolute og margin beregning i midten verticalt og horisontalt.
(husk position:absolute;top:50%;left:50%; i #tgpic css samt position:relative; i #tgdiv css )
... af hensyn til det første billede der vises skal man dog lige manuelt centrere med margin indstilling i #tgpic
(med f.eks. margin:-5px 0px 0px -10px; hvor -5 er ½ af start billedets højde og -10 er ½ af bredden)
false:
- Billedet placeres manuelt uden brug af auto centrering d.v.s. dynamiske placerings halløjsa deaktiveres */
var tgfader={o:100,w:0}; // object til at holde styr på opacity værdi og om opacity skal op eller ned
var tgpreload=["b2.jpg","b3.jpg","b4.jpg","b5.jpg"];
/* Skal være tom ( tgpreload=[]; ) - hvis der ikke skal preloades mellemstørrelse billeder... det anbefales
dog med preload... Eksempel på preload: tgpreload=["filnavn1.jpg","filnavn2.jpg"]; ... stier kan også defineres... */
tgpicstdmap="./mellem/"; // Sti til de mellemstore billeders mappe (det er trals at skrive stien hver gang i tgpreload)
tgpicbig="./big/"; // Sti til de store billeders mappe
tgpicthumblnk="mini"; // Det der skal fjernes fra thumbnail billeder for at få navnet på det mellem og store billeder
tgpicthumblink=true; // Opretter automatisk onmouseover on fade på billeder placeret i elementet med id="tgpics"
/* I tilfælde af en sådan billede fil her: <img src="minib1.jpg"> sættes onmouseover så automatisk til
- onmouseover="tgpicswch('b1.jpg');" den vælger så billedet tgpicstdmap samt b1.jpg til mellembilledet
og a href til det store billede som tgpicbig samt b1.jpg.
- onmouseover tildeles ikke, hvis en onmouseover er sat manuelt i forvejen (ingen overskrivning).
En indstilling af tgpicthumblink=false; deaktiverer automatisk fading af thumbnails og onmouseover tildeling */
/* En manuel tildeling af onmouse over kan laves sådan her:
- Ved definering af <img src="minib1.jpg" onmouseover="tgpicswch('b2.jpg',-1);">
oprettes der ikke et link til et stort billede fra det mellem store billede
- Ved defineringen <img src="minib1.jpg" onmouseover="tgpicswch('b2.jpg','./fseui/b3.jpg);"> bliver sidst nævnte brugt til at lave linket til det store billede og det første bruges til at lave det mellemstore billede...
- Ved definering af tgpicthumblink=true; uden at placere billederne i et element med id tgpics kan man også
bruge denne her: <img src="minib1.jpg" onmouseover="tgpicswch(this.src);"> ... men det sparer dog ikke meget
markup - det vil så give: stien i tgpicstdmap samt minib1.jpg - fratrukket tekst strengen angivet i
tgpicthumblnk... samt et link til det store billede med stien tgpicbig og minib1.jpg - fratrukket tekst
strengen angivet i tgpicthumblnk
- Ved definering af <img src="minib1.jpg" onmouseover="tgpicswch('minib75.jpg);"> bruges minib75.jpg til valg
af det mellem og store billede som bruges på samme måde som nævnt i ovenstående */
tgbigpicsok=false; // Valg om speciel popupfunktion skal bruges til at vise billeder med (true / false)
tgbigpicsexp=true; // Hvis ovenstående er falsk kan man nøjes med at skifte mellem billedet til et større ved klik
// ^ (true/false) ... hvis begge er false vises kun mellem størrelse billeder ...
window.onload=function(){
tgpic=document.getElementById("tgpic"); // Tildeling af global forbindelse
tgpic.onload=function(){
if(tgpicpos)tgpicpos0(); // Auto centrering - hvis aktiveret
};
if(tgpreload.length>0)tgprelos();
if(tgpicthumblink)tgpicthumbl();
}
/* ----------------------------------------------------------------------------------------------------------------------- */
function tgpicpos0(){ // bruges ved tgpicpos=true;
tgpic.style.marginLeft=tgpic.offsetWidth/2*-1+"px";
tgpic.style.marginTop=tgpic.offsetHeight/2*-1+"px";
}
/* ----------------------------------------------------------------------------------------------------------------------- */
function tgprelos(){ // preload funktion
tgprelosd=document.createElement("div"); // Div til preload
tgprelosd.style.display="none";document.body.appendChild(tgprelosd);
for(i=0;i<tgpreload.length;i++){ // Gennemløb af billeder med oprettelse af img og append af billeder til skjult div
tgpreimgs=document.createElement("img");
tgpreimgs.src=tgpicstdmap+tgpreload[i];
tgprelosd.appendChild(tgpreimgs);
}
}
/* ----------------------------------------------------------------------------------------------------------------------- */
function tgpicthumbl(){ // bruges ved auto onmouseover tildeling
if(tn=document.getElementById("tgpics")){ // check om element eksisterer, hvis ja så hent billeder i element og fortsæt
tnpics=tn.getElementsByTagName("img");
for(i=0;i<tnpics.length;i++){ // Tildeling af onmouseover
tnpics[i].onmouseover=function(){tgfadecur=this.src;tgfade(this.src,this.src,0); if(this.filters)this.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
this.style.MozOpacity = "1.00";
this.style.KhtmlOpacity = "1.00";
this.style.opacity = "1.00";};
tnpics[i].onmouseout=function(){if(this.filters)this.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
this.style.MozOpacity = "0.50";
this.style.KhtmlOpacity = "0.50";
this.style.opacity = "0.50";};
if(tnpics[i].filters)tnpics[i].style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
tnpics[i].style.MozOpacity = "0.50";
tnpics[i].style.KhtmlOpacity = "0.50";
tnpics[i].style.opacity = "0.50";
}
// tildel opkald til billedeskift og a href skifte
}
}
/* ----------------------------------------------------------------------------------------------------------------------- */
function tgpicswch(tmpimg,tmplink){ // funktion til skift af elementer og onclick popup
tmpimg=tmpimg.split("/");tmpimg=tmpimg[tmpimg.length-1].replace(tgpicthumblnk,"");
tgpic.src=tgpicstdmap+tmpimg;
if(tmplink!=-1){
if(tmplink==undefined)tmplink=tmpimg;
else tmplink=tmplink.split("/");tmplink=tmplink[tmplink.length-1].replace(tgpicthumblnk,"");
if(tgbigpicsok){tgpic.onclick=function(){tgpopit(tmplink);};tgpic.style.cursor="pointer";}
else if(tgbigpicsexp){tgpic.onclick=function(){tgchngit(tmplink);};tgpic.style.cursor="pointer";}
else{tgpic.onclick=function(){};tgpic.style.cursor="";}
}else tgpic.onclick=function(){};
tgfader.w=1; tgfadecur=tmpimg;
tgfade(tmpimg,0,0);
}
/* ----------------------------------------------------------------------------------------------------------------------- */
function tgpopit(tgpict){ // function til popup billede og centrering m.v.
tgpict=tgpicbig+tgpict;
popins=window.open("","popins","width=300,height=200,status=no,toolbar=no,location=no,directories=no,resizable=no,menubar=no");
popins.document.write('<html><head><title>Din titel</title><script type="text/javascript" language="javascript">function resizepopit(){pich=document.getElementById("pictpopit").offsetHeight+32;picw=document.getElementById("pictpopit").offsetWidth+6;if(pich>screen.availHeight)pich=screen.availHeight;if(picw>screen.availWidth)picw=screen.availWidth;window.resizeTo(picw,pich);window.moveTo((screen.availWidth-picw)/2,(screen.availHeight-pich)/2)}<\/script><style type="text/css">html,body{margin:0px;padding:0px;border:0px;}</style></head><body><img id="pictpopit" src="'+tgpict+'" onLoad="resizepopit();" onclick="window.close();"></body></html>');
}
function tgchngit(tgpict){ // function til skift af det store billede
tgpict=tgpicbig+tgpict;
tgpic.src=tgpict;
}
/* ----------------------------------------------------------------------------------------------------------------------- */
function tgfade(p,tmplink,m){ // function til fade op og ned af nyt billede og under billeder
if(tgfadecur==p){
if(m==0)i=tgpic;
tgfader.o=(tgfader.w==0)?tgfader.o-10:tgfader.o+10;
if(((tgfader.o>0)&&(tgfader.w==0))||((tgfader.o<100)&&(tgfader.w==1))){
if(i.filters)i.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+tgfader.o+")";
i.style.MozOpacity = tgfader.o/100;
i.style.KhtmlOpacity = tgfader.o/100;
i.style.opacity = tgfader.o/100;
setTimeout("tgfade('"+p+"','"+tmplink+"','"+m+"');", 100);
}else if((p!="")&&(tmplink!=0)){
tgpicswch(p,tmplink);
}else tgfader.w=0;
}
}
/* ----------------------------------------------------------------------------------------------------------------------- */
</script>
</head><body>
<div id="tgdiv"><img src="./mellem/b1.jpg" id="tgpic" onclick="tgpopit(this.src);"></div>
<div id="tgpics"><img src="minib1.jpg"><img src="minib2.jpg"><img src="minib3.jpg"><img src="minib4.jpg"><img src="minib5.jpg"></div>
</body></html>
