Image-loader layer

Hej

Jag vill skapa ett skript som poppar fram ett lager med ett bildspel.

Bildspelets skript har jag, och jag tror inte att det behöver tas upp - inte än isåfall, för jag tror att det funkar bra ändå.

Jag föreställer mig följande:

OnClick = "ImageLoader(3,bild);

3 => En variabel som heter maxStep
bild => En variabel som heter ImageName

ImageLoader

1. Preloader: Den ska vara mycket enkel, den laddar in bilderna i cache, baserat på antalet bilder (maxStep). Den laddar alltså ImageName + Step (1 t.o.m maxStep) + ".jpg"

2. LayerCreator: Skapar div-layers. Hur dessa layer ser ut, är förbestämt. Det som ska ske är att tre layers skapas:
Layer_bilderna: Den ska fylla iframen där ImageLoader körs. Storleken är 580x330 px.
Layer_counter: Ett litet lager, vars beskrivning och funktion jag kan återkomma med senare.
Layer_close: Detta lager innehåller en text och en bild med en länk. Länken går till nedanstående javascript "LayerHider", alltså för att stänga ner (dölja) lagret.

3. LayerHider: Döljer alla tre lagrena. Eftersom innehållet i iframen kommer att vara dolt, så måste man dölja lagren inifrån lagren.

Tack

Vilket javascript-problem har du? Låter mest som om du funderar på hur du ska lösa problemet.

Ja, det är ju egentligen så att jag behöver ha hjälp med att lösa det.

Jag behöver först o främst ett skript som laddar bilder, baserat på ett namn och ett nummer.

Preloadern laddar alltså en serie bilder baserat på namnet och numret som är antalet bilder i serien.

Sen behövde jag ju även ett skript som skapar ett layer, som är centrerat oavsett när jag klickar på skriptet.

Jag är inte så haj på javascript, men troligen skulle jag kunna lista ut hur man gör "layer_hide"-skriptet

(Image-preloader)

... och sedan ett litet script som skapar ett lager:

<div id="createLayerHere"></div>
<script type="text/javascript">
function makeCeneteredLayer(id,width,height,style){
	var x=parseInt(((document.all)?document.body.clientWidth:window.innerWidth)/2-width/2);
	var y=parseInt(((document.all)?document.body.clientHeight:window.innerHeight)/2-height/2);
	document.getElementById('createLayerHere').innerHTML+='<div id="'+id+'" style="position:absolute;top:'+y+'px;left:'+x+'px;width:'+width+'px;height:'+height+'px;'+style+'"></div>';
}
makeCeneteredLayer('mitt_id',500,100,"border:solid blue 1px;");
</script>

Funktionen har 4 parametrar: lagerid (skall vara unikt), bredd, höjd och ev. extra style-egenskaper.

(document.getElementByID-raden skall inte vara radbruten...)

Image preloadern:

Jo, jag känner både till den, och andra.
De är mycket prakiska, men det jag eftersöker (är det över huvudtaget möjligt), att preloadern endast behöver ett namn, och ett nummer, så att den sen gör en egen filserie enligt **namn + nummer + ".jpg"

Går det?**

Visst. Byt ut denna rad

var imagesSrc=["bild1.gif","flerBilder/bild2.gif"];

mot

var imagesSrc=new Array(); for(var i=0;i<5;i++){ imagesSrc[imagesSrc.length]="bildnamn"+(i+1)+".jpg"; }

Skapar bilder "bildnamn1.jpg" till "bildnamn5.jpg".

I. Angående makeCenteredLayer

1. Den är inte centrerad i höjdled. Layern skapas i ett dokument inne i en iframe, med scrollbar. Hur gör man så att den blir centrerad?

2. Hur gör man för att stänga lagret. Jag testade med

function hideCenteredLayer(){
	document.getElementById('createLayerHere').innerHTML='<div id="createLayerHere"></div>';
	}

Men det funkade inte

..............

II. Angående getElementsById

Sen undrar jag, document.getElementById.innerHTML trodde jag tittade efter HTML text inne i <div> taggen.
Men tydligen har du gjort en specialare som jag inte stött på innan.

Om jag har en div som ser ut så:

<div id=".." ... ..>1/3 <img src...></div>

Går det att bryta ut 1/3 och ersätta den med nåt annat inifrån ett jskript? Jag fick nämligen lösa det med en div inne i div:en för just 1/3,

men det blev inte snyggt.

.................

III. Angående preloadern

Mycket bra loader.
Men jag undrar hur man får bort alerten endast från imagesOnAllLoaded.

Variabeln tycks vara viktig att ha med, eller?
tillägg Jag tog bort:

eval(imagesOnAllLoaded);

Jag utgick från att eval ungefär står för "utför".

I 1) Vill du centrera lagret efter fönstrets(framens) storlek eller bodyns som kan vara större (eller mindre)?

I 2) Öppna läser jag som skapa. Detta gör du bara en gång. Sedan kan du enkelt gömma ett lager med document.getElementById("lager_id").style.visibility="hidden"; (och visa med document.getElementById("lager_id").style.visibility="visible";)

II) document.getElementById(...) reffererar till ett element (tag) och det kan vara vilket element som hellst, inte nödvändigtvis en <div>. Enklast är om du lägger 1/3 i en <span> (samma som div med skillnaden att span är ett inline-element, och skapar inte automatiskt radbrytningar).

III) Japp, så kan man göra :) Evaluate kör ett uttryck, helt rätt.

Hej o tack för ditt svar

I.

1) Ja, oavsett var jag befinner mig i sidan i höjdled, att så länge man ser länken och klickar på den så att lagret ska visas, så ska lagret vara centrerat efter fönstrets (framens) storlek.

2) Jo, det var precis det jag menar, att man skapar lagret. Min idé var att återställa div:en som den var från början. Skriptet som jag använde, alltså nedanstående fungerar 99%:

function hideCenteredLayer(){
document.getElementById('createLayerHere').innerHTML='<div id="createLayerHere"></div>';
}

Vad den förväntas göra är att den "resettar" värdena inne i div till vad de var innan.
Det funkar som sagt 99% - det som blir fel är när hide-koden körs, så känns det som om det skapas en tomrum som inte fanns där innan.
Se på detta exempel:

https://www.3d.stenebyskolan.se/haider/test/imglayer.htm

Du skriver att jag borde köra med visibility="hidden". (Eftersom div:en kommer att återanvändas så att den blir en bildbehållare, kommer jag inte att köra visibility="visible", utan istället makeCeneteredLayer(...);)
Det var det första jag kom att tänka på. Först trodde jag, att det inte skulle gå, eftersom makeCeneteredLayer() kanske inte kunde hitta div:en efter att jag lagt in värdet vis.="hidden".
Då kom jag på tanken som jag skrev ovan - att man bara kunde "resetta" div:en, så borde det ju funka. Men icke.
Ska jag köra med style:hidden-lösningen i alla fall?

tillägg: jag upptäckte, att om man skapar ett lager, döljer det, skapar det igen, så kommer flera div:ar att skapas ovanför varandra. Då är kanske div-resett lösningen ändå bäst. Men hur??

Klicka på alert-länken
https://www.3d.stenebyskolan.se/haider/test/imglayer.htm

OBS Det kan vara jag som fattat det hela fel. Nu i efterhand har jag upptäckt att när man trycker på alertern allra först, så står det inget.
Klickar man på ta bort, och sen på alertern så kommer div-taggen fram. Men div:en fanns ju redan innan i dokumentet.

II.
Okej, det var mycket användbart att veta att document.getElementById funkar till fler saker - det löste ett av mina problem.

Men kan du förklara kort hur det fungerar?
Jag känner till: document.getElementById('id-namn').innerHTML = ["nån text"];

Istället för "=" så använde du "+=" - vad innebär det, och finns det fler alternativ?
Dessutom vet jag inte om man måste använda klammer, alltså ["nån text"]

Oj... det var många frågor :) Men de flesta tror jag ger sig om vi tar en sak i taget.

I, 1) När du anger top/left-koordinater på ett element (som ligger i bodyn) är det bodyns (sidans) 0-värde som man utgår från (top-vänster hörn). Skall du således placera ett lager längre ner på sidan så att den hamnar mitt i fönstervyn så får du lägga till scroll-offseten. Funktionen blir då så här;

function makeCeneteredLayer(id,width,height,style){
	var x=parseInt(((document.all)?document.body.clientWidth:window.innerWidth)/2-width/2)+((document.all)?document.body.scrollLeft:pageXOffset);
	var y=parseInt(((document.all)?document.body.clientHeight:window.innerHeight)/2-height/2)+((document.all)?document.body.scrollTop:pageYOffset);
	document.getElementById('createLayerHere').innerHTML+='<div id="'+id+'" style=" position:absolute;top:'+y+'px;left:'+x+'px;width:'+width+'px;height:'+height+'px;'+style+'"></div>';
}

I , 2)

haider skrev:

function hideCenteredLayer(){
document.getElementById('createLayerHere').innerHTML='<div id="createLayerHere"></div>';
}

document.getElementById('createLayerHere') hänvisar alltså här till ett element som ser ut så här (vilket vi vet): <div id="createLayerHere"></div> det du sedan säger scriptmässigt är att innerHTML, d.v.s. innehållet i elementet skall vara <div id="createLayerHere"></div>. Resultatet blir alltså dubbelt: <div id="createLayerHere"><div id="createLayerHere"></div></div>. Du kan tömma elementet genom att sätta innehållet till "" Men det är helt onödigt, för du vet ju redan hur du byter innehåll i ett element - alltså kan du lika gärna byta innehåll direkt i lagret. Du behöve inte skapa nya hela tiden:

document.getElementById('lager_id').innerHTML="någonting häftigt";

Sedan har du fått visibility:visible/hidden om bakfoten. Detta "skapar" inte eller "tar bort" ett lager. Det gör bara att det döljs visuellt. Elementet finns fortfarande kvar med alla egenskaper och innehåll, vilket du kan ändra hur du vill, och när du sedan visar det igen (visibility:visible) så ser du resultatet. Alltså, det är sällan nödvändigt att ta bort ett lager eftersom du lika gärna kan modifiera det befintliga lika väl. Det gör det dessutom enklare att scripta.

haider skrev:

Istället för "=" så använde du "+=" - vad innebär det, och finns det fler alternativ?

variabel+=värde är en förkortning för variabel=variabel+värde

var foo=2;
foo+=4;
// foo är lika med 6
foo*=3;
// foo är lika med 18
foo-=2;
// foo är lika med 16
foo+=" är sexton";
// foo är lika med "16 är sexton"

Tack, nu har många fler saker klarnat.

Jag har en misstanke som jag vill bekräfta. Div-taggen som heter: <div id="createLayerHere"></div>, den ersätts väl inte med våran nya div, utan är snarare en behållare för den, eller hur?

angående visibility; du har övertygat mig.

Desutom fungerar centreraren KANON!

Jag väntar med att acceptera det slutliga svaret, för säkerhets skull, tills jag får höra bekräftelsen om min misstanke.

haider skrev:

Jag har en misstanke som jag vill bekräfta. Div-taggen som heter: <div id="createLayerHere"></div>, den ersätts väl inte med våran nya div, utan är snarare en behållare för den, eller hur?

Alldeles helt korrekt :)