• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder Source setzen

CKC Morgy

Neues Mitglied
Hallo
ich habe ein kleines Problem mit den Attributen meiner Bilder.
Im header meiner html setze ich dieses Script

<script language="JavaScript">
<!--
onload = function(){
var bildurl1="www.url.de/bild1.jpg";
var bildurl2="www.url.de/bild2.jpg";
var bildurl3="www.url.de/bild3.jpg";
document.getElementById('Bildgross').setAttribute('src',bildurl1)
document.getElementById('Bild1').setAttribute('src',bildurl1)
document.getElementById('Bild2').setAttribute('src',bildurl2)
document.getElementById('Bild3').setAttribute('src',bildurl3)
}

und setze dann eine kleine Gallery mit einem grossen und 3 kleinen Vorschaubildern:

<img id="Bildgross" alt="Wenn Sie diesen Text lesen können, installieren Sie bitte das Java Plugin für Ihren Browser." style="border: 1px solid #000000;box-shadow: 5px 5px 10px lightblue; border-radius:10px" margin-buttom:15px;="" name="swap" height="240" width="300">

<img id="Bild1" ;="" alt="" style="margin-right: 1px;" onmousedown="change(1)" height="78" width="95">
<img id="Bild2" ;="" alt="" style="margin-right: 1px;" onmousedown="change(2)" height="78" width="95">
<img id="Bild3" ;="" alt="" style="margin-right: 1px;" onmousedown="change(3)" height="78" width="95">

mit onmousedown rufe ich noch folgende Funktion auf

<script type="text/javascript">
function change(number){
switch(number){
case 1:
document.getElementById('Bildgross').src = "www.url.de/bild1.jpg";
break;
case 2:
document.getElementById('Bildgross').src = "www.url.de/bild2.jpg";
break;
case 3:
document.getElementById('Bildgross').src = "www.url.de/bild3.jpg";
break;
}
}
</script>

Soweit klappt alles. Ich will aber in der Change function nicht
document.getElementById('Bildgross').src = "www.url.de/bild1.jpg";
stehen haben, sondern
document.getElementById('Bildgross').src = "bildurl1";
sodass ich bei neuen Bildern nicht immer den kompletten Code zweimal bearbeiten muss, sondern nur die URLs im header.
Aber egal, ob ich
document.getElementById('Bildgross').src = "bildurl1";
oder
document.getElementById('Bildgross').src = 'bildurl1';
oder
document.getElementById('Bildgross').src = bildurl1;
schreibe, es geht nie.

Auch ein neues Objekt mit
<img src="bildurl1" alt="">
würde ich mir wünschen, aber genau dasselbe Problem. Mit
<img src="www.url.de/bild1.jpg" alt="">
geht es natürlich wunderbar.
Wie muss / kann ich diese Variable schreiben, dass ich sie später als Quelle verwenden kann?
Ich habe zwar bereits gegoogelt wie blöde, aber es will irgendwie nie klappen.
Gruss
Björn
 
Zuletzt bearbeitet:
Werbung:
Ich würde das mit einem Array machen, dann brauchst Du nur dieses zu editieren und der Rest geht von allein. Außerdem sparst Du den Switch:
Code:
var bildurls = ["www.url.de/bild1.jpg", "www.url.de/bild2.jpg", "www.url.de/bild3.jpg"];
onload = function(){
     document.getElementById('wrBildgross').innerHTML = '<img id="Bildgross" src="' + bildurls[0] + '">';
     document.getElementById('Bild1').src = bildurls[0];
     document.getElementById('Bild2').src = bildurls[1];
     document.getElementById('Bild3').src = bildurls[2];
}

HTML:
<div id="wrBildgross" style="border: 1px solid #000000;box-shadow: 5px 5px 10px lightblue; border-radius:10px; margin-bottom:15px; width: 300px; height: 240px">
Wenn Sie diesen Text lesen können, aktivieren Sie bitte Javascript in Ihrem Browser
</div>


<img id="Bild1" ;="" alt="" style="margin-right: 1px;" onmousedown="change(0)" height="78" width="95">
<img id="Bild2" ;="" alt="" style="margin-right: 1px;" onmousedown="change(1)" height="78" width="95">
<img id="Bild3" ;="" alt="" style="margin-right: 1px;" onmousedown="change(2)" height="78" width="95">

Code:
function change(idx){
     document.getElementById('Bildgross').src = bildurls[idx];
}
Hoffe, ich habe richtig verstanden, was Du vorhattest.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Wunderbar, klappt.
Musste zwar das Image in der Onload Funktion formatieren sonst wars in Originalgrösse, aber passt.
Danke vielmals *top*
 
Wenn ich jetzt auf das grosse Bild klicke, würde ich mir wünschen, dass eine Bildergallerie kommt und der Hintergrund abgedunkelt wird. Kennt man ja ^^
Kennt mir da jemand n gutes Tutorial?
Ich find irgendwie nur kostenpflichtige Programme (Lightbox) oder billige, die im neuen Fenster geöffnet werden
 
Wo hast Du das denn her, dass die Lightbox-Plugins kostenpflichtig sind?! Ich kenne fast nur kostenlose, außer iLightbox, was ich selber verwende.
 
Werbung:
OK vllt hab ich da was falsch verstanden ^^

Aber jetzt is da wieder n Problem
Wenn man auf das grosse Bild klickt, soll die Lightbox kommen.
Also include ich die Skripte

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="lightbox35.js"></script>

und mach aus

<span id="wrBildgross" style=" margin-buttom:15px;" height="240" width="300">
Wenn Sie diesen Text lesen können, aktivieren Sie bitte Javascript in Ihrem Browser
</span>

das hier

<a href=document.getElementById('Bildgross').src class="lightbox35">

<span id="wrBildgross" style=" margin-buttom:15px;" height="240" width="300">
Wenn Sie diesen Text lesen können, aktivieren Sie bitte Javascript in Ihrem Browser
</span>

</a>

Aber wenn ich auf das grosse Bild klicke, kommt ne Fehlermeldung "Datei nicht gefunden".
Auch href=document.getElementById('wrBildgross').src, auch mit Anführungszeichen kein Erfolg.
Kann ich die href anpassen, oder wäre ein onclick Handler sinnvoller?
 
Nein, dies hier kann nicht funktionieren:
Code:
href=document.getElementById('Bildgross').src
Du benutzt in HTML einen Javascript-Ausdruck. Javascript funktioniert jedoch nur innerhalb von Script-Tags.
Du musst das href-Attribut in deinem Javascript ändern, so:
Code:
var bildurls = ["www.url.de/bild1.jpg", "www.url.de/bild2.jpg", "www.url.de/bild3.jpg"];
onload = function(){
     document.getElementById('wrBildgross').innerHTML = '<img id="Bildgross" src="' + bildurls[0] + '">';
     document.getElementById('aLightbox').href = bildurls[0];
     document.getElementById('Bild1').src = bildurls[0];
     document.getElementById('Bild2').src = bildurls[1];
     document.getElementById('Bild3').src = bildurls[2];
}
function change(idx){
     document.getElementById('Bildgross').src = bildurls[idx];
     document.getElementById('aLightbox').href = bildurls[idx];
}
HTML:
<a id="aLightbox" class="lightbox35">
<span id="wrBildgross" style=" margin-buttom:15px;" height="240" width="300">
Wenn Sie diesen Text lesen können, aktivieren Sie bitte Javascript in Ihrem Browser
</span>
</a>
PS: Was ist denn das für eine Lightbox, ich kann sie gar nicht finden?
 
Zuletzt bearbeitet von einem Moderator:
Ganz ehrlich?
Ich habs von der Page hier kopiert

http://vilsoni.info/demo/show/image_light_box.htm

weil es relativ einfach aussah.
Danke für den Tipp, funktioniert 1a.
Jetzt muss ich nur noch schauen, dass ich ne bessere Lightbox bekomm, die hier kann weder links/rechts noch Beenden durch "ESC"-Taste.
Aber fürn Anfang super ^^
Wenn jemand Tipps hat welche Lightbox genauso einfach zu verwenden ist immer her damit bitte ^^

EDIT:
Wobei es auf der Homepage vom Link ja wunderbar funktioniert.
Was mir aber auffällt ist, dass bei dem Link die URL gleich bleibt, bei mir öffnet sich aber die URL des Bildes. Also ist was an der Lightbox falsch eingestellt?
 
Zuletzt bearbeitet:
Werbung:
Links/rechts kann die anscheinend schon, nur in deiner Anwendung funktioniert das nicht, weil Du nur ein href-Tag mit class="lightboxX35" hast. Es würde funktionieren, wenn Du die Lightbox auf deine Thumbnails anwenden würdest.
Wenn Du das nicht willst, brauchst Du eine Lightbox mit Javascript-API, z. B. Slimbox 2. Die kann man auch mit Escape schließen. Dann ist es aber nicht mehr ganz so einfach. Aber auch nicht sooo schwierig, das Array mit den Bildern hast Du ja schon.
 
Zuletzt bearbeitet von einem Moderator:
Anstatt der Lightbox will ich jetzt erstmal einen Zoom beim hover über das span tag erzeugen.
Also setze ich im header in <style> </style>

#div1_name div2_name div3_name table body tr td span: hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(4.0, 4.0);
-moz-transform: scale(4.0, 4.0);
-webkit-transform: scale(4.0, 4.0);
-o-transform: scale(4.0, 4.0);
-ms-transform: scale(4.0, 4.0);
}

Die Zoomfunktion hab ich kopiert, geb ich zu. Sollte ja auch kein Problem sein.
Aber ich bekomm keinen Effekt.
auch #span:hover macht nix, genauso wenig wie #Bildgross:hover oder #wrBildgross:hover.

Wie kann ich das grosse Bild ansprechen, dass es mit hover vergrössert wird?



Ach ja wie man sieht, hab ich das span tag in 3 verschachtelten divs und einer Tabelle untergebracht
 
Werbung:
Außerdem ist es wegen des Qualitätsverlustes nicht zu empfehlen, Bilder stark zu vergrößern. Besser das Original in groß ablegen und mit CSS verkleinern. Dann beim Hover auf die Originalgröße setzen.
 
Die Ursprungsbilder sind alle 1600x1200 und werden ja mit

<img id="Bild1" ;="" alt="" style="margin-right: 1px;" onmousedown="change(0)" height="78" width="95">

verkleinert dargestellt, ein zoom sollte also möglich sein, sogar aufs 16fache ohne Qualitätsverlust.
Und wie sprech ich jetzt mein span genau an?
 
Ahso, dann nehme ich alles zurück!
Am besten den span so anlegen, dass er seine Größe an das Bild anpasst:
Code:
<span id="wrBildgross" style="display: inline-block">
und das Bild vergrößern:
Code:
#wrBildgross: hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(4.0, 4.0);
-moz-transform: scale(4.0, 4.0);
-webkit-transform: scale(4.0, 4.0);
-o-transform: scale(4.0, 4.0);
-ms-transform: scale(4.0, 4.0);
}
PS: Als ich es teste, sehe ich, dass sich der Span beim Transform leider nicht in der Größe anpasst. Es funktioniert aber, wenn man das Hover auf den Span anwendet; die Vergrößerung wird dann auf das Bild vererbt.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Danke Sempervivum.
Leider geht es nicht, es passiert gar nichts wenn ich mit der Maus drübergeh.

Ich poste mal den header, vllt is da was falsch

<head>

<title>Meine Homepage</title>

<style scoped="">
h1 {margin:2px; color: blue; font-size: 20pt; font-weight: bold;}
h2 {margin:2px; color: red; font-size: 20pt; font-weight: bold;}
p {margin:1px; color: black; font-size: 12pt; }
</style>

#Bildgross: hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(4.0, 4.0);
-moz-transform: scale(4.0, 4.0);
-webkit-transform: scale(4.0, 4.0);
-o-transform: scale(4.0, 4.0);
-ms-transform: scale(4.0, 4.0);
}

<script language="JavaScript">
<!--
var bildurls = [
"http://www.bildurl.de",
.....];
var bilderanzahl =5;
onload = function(){
document.getElementById('wrBildgross').innerHTML = '<img id="Bildgross" src="' + bildurls[0] + '" style = "border: 1px solid #000000;box-shadow: 5px 5px 10px lightblue; border-radius:10px; margin-buttom:15px;" height="240" width="300">';
document.getElementById('Bild1').src = bildurls[0];
.....
for (var i = 6; i >= bilderanzahl+1; i--){
document.getElementById('Bild' + i).style.display = 'none';
}
}
//-->
</script>

<script type="text/javascript">
function change(idx){
document.getElementById('Bildgross').setAttribute('src',bildurls[idx]);
}
</script>

</head>

Ich hab das #Bildgross: hover { auch schon IM style gehabt, ging auch nicht, weiss jetzt aber nicht wo s richtig ist, denke mal aber ausserhalb vom style oder?
 
Nein, die Hover-Anweisung muss unbedingt in das Style, weil es CSS ist. Ich habe es getestet und es funktioníerte bei mir. Lies mal mein "PS" in meinem vorigen Posting.
 
PS: Die Schleife wird so nicht funktionieren. Warum legst Du sie nicht einfach so an:
Code:
for (var i = 0; i < bildurls.length; i++){
Dann wird die Anzahl der Bilder automatisch berechnet. Allerdings sehe ich den Sinn auch nicht: Wenn die Bilder unsichtbar sind, kann man sie doch gar nicht klicken?
 
Werbung:
PPS: Ich musste das scoped="" im style-Tag löschen, damit es funktioniert. Außerdem hast Du hier noch einen Fehler: margin-buttom:15px;
Außerdem brauchst Du den Rahmen nur einmal zu definieren, entweder im span- oder im img-Tag.
 
Es geht darum, mehrere Seiten zu Erstellen, die gleich / ähnlich sind, sich allerdings in der Bilderanzahl (und URL) unterscheiden.
Darum hab ich die Variable angelegt, um festzulegen, dass nur die ersten 3 Bilder z.B. sichtbar sind.
Funktioniert aber wieder Erwarten ganz gut ^^

Ich möcht den kompletten Quellcode aus Datenschutzgründen hier nicht posten, aber kann ich ihn Dir als PM schicken?
 
Zurück
Oben