Zeiger

K

Kalito

Erfahrenes Mitglied
Hallo,

gibt es im JS eine Art Zeiger? Ich hatte gelesen, das es sowas nicht gibt.

Was habe ich vor:

Ein User kann kann sich aus einer Auswahl ein Bild auswählen (durch Klick auf das Bild).

Jetzt möchte ich aber in einem weiteren DIV quasi seine Auswahl von Bilder verkleinert darstellen, ohne diese aber zu laden, da es sich ja um mehrere 1000 Bilder handelt :)

Ich dachte da so an eine Referenz oder so. So nach dem Motto: Zeige das Bild an, was gerade gechecked wurde

Wie gehe ich da am besten ran?
 
Ehm, wie wäre es damit, dass du quasi mit einen serverseitigen Sprache wie PHP ein Bild generierst, was alle anderen Bilder verkleinert, zusammen speichert und dann an den Klient gibt? Ich verstehe aber auch generell nicht, was du jetzt genau vor hast. Wie willst du bitte eine Übersicht mit tausend Bildern schaffen? Bildgröße vier mal vier Pixel?
 
Ich baue einen Konfigurator. Dabei kann der User zwischen 4 Produktreihen ein Modell aussuchen. Dann kann er sich eine Farbe aussuchen, usw. Allem in allem kommen halt an die 1000 Bilder zusammen. Wenn jetzt der User die Seite aufruft, werden alle Bilder auf einmal geladen (sind auch alle nur so 20kb groß) und mittels JS werden halt die verschiedenen div sichtbar oder unsichtbar gemacht. Ich will halt nur nicht die Bilder zweimal ladem, sondern will es halt über eine Referenz machen
 
Ich weiß nicht, was du mit Zeiger meinst, aber du kannst einfach beim Klick auf die Auswahl das Bild in einem anderen DIV anzeigen. Du kannst ja auf die Eigenschaften (src etc.) des geklickten Elementes zugreifen.
 
und wie mache ich das mit js, das in dem div auf das src von nem anderen div zugreift, ohne das Bild ein zweites Mal zu laden?
 
Wenn das Bild auf die gleiche Resource verweist, dann wird sie in keinem Fall ein zweites Mal geladen. Wenn doch, dann solltest du deinen Navigator wechseln.
 
Also wenn ich das richtig verstehe:
HTML: 
<div id="eins">
<img src="bild1.jpg"/>
<img src="bild2.jpg"/>
<img src="bild3.jpg"/>
<img src="bild4.jpg"/>
<img src="bild5.jpg"/>
<img src="bild6.jpg"/>
</div>
<div id="zwei">
<img src="bild1.jpg"/>
<img src="bild2.jpg"/>
<img src="bild3.jpg"/>
<img src="bild4.jpg"/>
<img src="bild5.jpg"/>
<img src="bild6.jpg"/>
</div>

lädt nicht länger, als wenn ich nur ein <div> referenzieren würde?
 
Ja (in der Regel). Das ist auch Seiten übergreifend der Fall. Wenn du auf einer anderen Unterseite nochmal bild1.jpg benutzt, wird es nicht wieder heruntergeladen.
Sowohl der Browser als auch der Webserver können aber explizit so eingestellt sein, dass sie jedes Bild zweimal herunterladen würden.

Aber das Wort "referenzieren" macht in dem Zusammenhang keinen Sinn.
 
ok,

so hatte ich mir das vorgestellt: fensterfan.de/test.php
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" xml:lang="de" lang="de">
<head>
 <script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script type="text/javascript">
kkjs.event.onWindowLoad(function(){
	var label = document.getElementsByTagName("label");
	Array.prototype.forEach.call(label, function(label){
		var htmlFor = document.getElementById(label.htmlFor);
		if (htmlFor && htmlFor.nodeName == "INPUT" || htmlFor.nodeName == "TEXTAREA"){
			var img = label.getElementsByTagName("img");
			Array.prototype.forEach.call(img, function(img){
				kkjs.event.add(img, "click", function(ev){
					switch (htmlFor.type){
						case "radio":
						case "checkbox":
							htmlFor.checked = !htmlFor.checked;
						default:
							try {
								htmlFor.focus();
							} catch(e){ }
					}
					ev.preventDefault();
				});
			});
		}
	});
});

}//Ende checkRadio
</script>
</head>
<body>
<div>
<div>
<h1>Produktreihe</h1>
    <label for="primus" onclick="CheckRadio('primus');">
        <img src="produktreihe/Primus.jpg"  alt="primus" />
    </label>
    <input type="radio" name="produktreihe" id="primus" style="display: none;" />

    <label for="vario" onclick="CheckRadio('vario');">
    <img src="produktreihe/Vario.jpg" id="bild_vario" alt="Vario" style="border-style: none;"/>
    </label>
    <input type="radio" name="produktreihe" id="vario" style="display: none;" />

    <label for="select" onclick="CheckRadio('select');">
    <img src="produktreihe/Select.jpg" alt="Select" style="border-style: none;"/>
    </label>
    <input type="radio" name="produktreihe" id="select" style="display: none;" />

    <label for="express" onclick="CheckRadio('express');">
    <img src="produktreihe/Express.jpg" alt="Express" style="border-style: none;"/>
    </label>
    <input type="radio" name="produktreihe" id="express" style="display: none;" />

</div> <!-- Ende Produktreihe -->
</div>
<div>
<h1>Ihre Wahl</h1>
    <div style="display: none;" id="auswahl_primus"><img src="produktreihe/Primus.jpg"  alt="primus" /> </div>
    <div style="display: none;" id="auswahl_vario"><img src="produktreihe/Vario.jpg" id="bild_vario" alt="Vario" style="border-style: none;"/>   </div>
    <div style="display: none;" id="auswahl_select"><img src="produktreihe/Select.jpg" alt="Select" style="border-style: none;"/>  </div>
    <div style="display: none;" id="auswahl_express"><img src="produktreihe/Express.jpg" alt="Express" style="border-style: none;"/> </div>
</div>
</body>
</html>

das ist jetzt nur ein Bsp-Code mit statischen Elementen, wo ich folgenden JS-Code nehmen würde:
Code: 
function CheckRadio(id) {
    if (id == "primus") {
        document.getElementById(auswahl_primus').style.display = 'block';
        document.getElementById('auswahll_vario').style.display = 'none';
        document.getElementById('auswahl_select').style.display = 'none';
        document.getElementById('auswahl_express').style.display = 'none';
    }

...
}//Ende checkRadio

Da ich aber die Anzahl der Produkte nicht kenne, nutze ich hierfür php und lkasse über eine Schleife ein Verzeichnis auslesen und alle Bilder werden angezeigt. Den Namen des Bildes würde ich ohne anhang als Variable in als ID verwenden (hier wäre es primus, vario, select und express)

Nur habe ich jetzt keinen Plan, wie ich den JS so dynamisch hinbekomme
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück