Hallo liebes Forum,
ich bin schon lange am recherchieren und komme nun nicht ganz weiter. Ich denke, dass mein Vorhaben nicht so anspruchsvoll ist, dennoch benötige ich kompetente Hilfe.
Ich habe eine Webseite dir nur aus Bildern besteht.
Diese Bilder sind horizontal nebeneinander angeordnet und jeweils separat in einem DIV Container.
Jeder DIV Container beinhaltet ein Projekt.
Bei Klick auf ein Projekt, sollen dann weitere Bilder des Projektes nachgeladen bzw. gezeigt werden.
Das sieht so aus:
<div class='picture linkopacity'><img src="IMG/01/01.png"></div>
<div class='white'></div>
<div class='picture linkopacity'><img src="IMG/02/01.png"></div>
<div class='white'></div>
<div class='picture linkopacity'><img src="IMG/03/01.png"></div>
<div class='white'></div>
usw.
Mit dieser Funktion ändere ich aber nur den Inhalt eines Containers, welche Parameter muss ich hinzufügen damit die anderen DIV Container auch einen Bilderwechsel mit der selben Funktion erhalten?
****************************
<script type="text/javascript" language="javascript">
var Dir = "img/";
var Bilder = Array("1.jpg", "2.jpg", "3.jpg", "4.jpg");
var i = 0;
function wechsel(Nr, k)
{
if(k == '+')
{
i++;
}
else
{
i--;
}
if(i>=Bilder.length)
{
i = 0;
}
else if(i<0)
{
i = Bilder.length-1;
}
window.document.images[Nr].src = Dir + Bilder[i];
}
</script>
<img src="img/1.jpg" name="bildname" onClick="wechsel('bildname', '+')" />
***************************
Stehe bisschen auf dem Schlauch....
Seite 1 von 1
Bild mit Klick ändern: Mehrere Bilder aus Array in DIV Container nache
Anzeige
#2
geschrieben 23. April 2012 - 14:38
Ist PHP möglich? Dann würde ich in der URL eine Variable mitgeben in deren Abhängigkeit die entsprechenden Bilder geladen werden.
(JavaScript ist nicht so mein Ding)
(JavaScript ist nicht so mein Ding)
Dieser Beitrag wurde von Holger_N bearbeitet: 23. April 2012 - 14:39
Bauernregel: Regnets mächtig im April, passiert irgendwas, was sich auf April reimt.
#3
geschrieben 23. April 2012 - 18:14
Ist n bischel JS
und dann (bitte logisch denken und Angaben anpassen...)
<script type="text/javascript"> function anzeigen(das){ for(i=1;i<=6;i++) { document.getElementById(i).style.display='none';} document.getElementById(das).style.display='block';} </script>
und dann (bitte logisch denken und Angaben anpassen...)
<!-- Klick-Links mit Bildern --> <a href="#" onclick="anzeigen('1')"><img src="IMG/FOTOS/KLEIN/p_neu01k.gif" alt=""></a> <a href="#" onclick="anzeigen('2')"><img src="IMG/FOTOS/KLEIN/p_neu02k.gif" alt=""></a> <a href="#" onclick="anzeigen('3')"><img src="IMG/FOTOS/KLEIN/p_neu03k.gif" alt=""></a> <a href="#" onclick="anzeigen('4')"><img src="IMG/FOTOS/KLEIN/p_neu04k.gif" alt=""></a> <a href="#" onclick="anzeigen('5')"><img src="IMG/FOTOS/KLEIN/p_neu05k.gif" alt=""></a> <a href="#" onclick="anzeigen('6')"><img src="IMG/FOTOS/KLEIN/p_neu06k.gif" alt=""></a> <!-- DIV der geändert werden soll --> <div id="1" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu01g.jpg" alt=""></div> <div id="2" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu02g.jpg" alt=""></div> <div id="3" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu03g.jpg" alt=""></div> <div id="4" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu04g.jpg" alt=""></div> <div id="5" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu05g.jpg" alt=""></div> <div id="6" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu06g.jpg" alt=""></div>
#4
geschrieben 25. April 2012 - 10:27
Aber bitte als ID für die Felder keine reinen Zahlen verwenden oder IDs die mit zahlen beginnen. Das ist kein valides HTML.
Sprich etwa so in js:
und HTML so:
PS: Abgesehen hielte ich hier Holger_N´s Vorschlag auch für sinnvoller. Oder zumindest eine Lösung via Ajax.
Sprich etwa so in js:
<script type="text/javascript"> function anzeigen(das){ for(i=1;i<=6;i++) { document.getElementById('img'+i).style.display='none'; } document.getElementById(das).style.display='block'; } </script>
und HTML so:
<!-- Klick-Links mit Bildern --> <a href="#" onclick="anzeigen('1')"><img src="IMG/FOTOS/KLEIN/p_neu01k.gif" alt=""></a> <a href="#" onclick="anzeigen('2')"><img src="IMG/FOTOS/KLEIN/p_neu02k.gif" alt=""></a> <a href="#" onclick="anzeigen('3')"><img src="IMG/FOTOS/KLEIN/p_neu03k.gif" alt=""></a> <a href="#" onclick="anzeigen('4')"><img src="IMG/FOTOS/KLEIN/p_neu04k.gif" alt=""></a> <a href="#" onclick="anzeigen('5')"><img src="IMG/FOTOS/KLEIN/p_neu05k.gif" alt=""></a> <a href="#" onclick="anzeigen('6')"><img src="IMG/FOTOS/KLEIN/p_neu06k.gif" alt=""></a> <!-- DIV der geändert werden soll --> <div id="img1" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu01g.jpg" alt=""></div> <div id="img2" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu02g.jpg" alt=""></div> <div id="img3" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu03g.jpg" alt=""></div> <div id="img4" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu04g.jpg" alt=""></div> <div id="img5" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu05g.jpg" alt=""></div> <div id="img6" style="display:none; position: absolute; top: -402px; left: 424px;"><img src="IMG/FOTOS/NORMAL/p_neu06g.jpg" alt=""></div>
PS: Abgesehen hielte ich hier Holger_N´s Vorschlag auch für sinnvoller. Oder zumindest eine Lösung via Ajax.
Dieser Beitrag wurde von N1truX bearbeitet: 25. April 2012 - 10:34
PC: AMD FX-8150 | Sapphire Radeon HD 5770 @OC-Bios | GA-990XA-UD3 - 4x4 GB DDR3-2133 | OCZ Agility II 128 GiB SSD (OS) & 10 TB-Storage-Server | Win7 Professional x64
NB: Sony Vaio VPCYB16 - AMD Fusion E-350 - 1x4 GiB Kingston DDR3-1333 - 64 GiB Super*Talent SSD
NB: Sony Vaio VPCYB16 - AMD Fusion E-350 - 1x4 GiB Kingston DDR3-1333 - 64 GiB Super*Talent SSD
#5
geschrieben 06. Mai 2012 - 18:34
Hallo und vielen Dank für eure Hilfe!
Mit PHP wollte ich das eigentlich nicht lösen, ich habe jetzt mit Hilfe dies erzeugt:
HTML
Javascript:
Funktioniert sehr gut, Webseite
Was denkt ihr darüber?
Ist es möglich, für jedes der Bilder einen separaten Text unterhalb der Bilder einblenden zu lassen, eine Art Bildbeschreibung sozusagen?
Vielen Dank für die Hilfe =)
Mit PHP wollte ich das eigentlich nicht lösen, ich habe jetzt mit Hilfe dies erzeugt:
HTML
<div class='picture linkopacity'><img src="IMG/01/01.png" class="bildname" id="projekt_01" /></div> <div class='white'></div> <div class='picture linkopacity'><img src="IMG/02/01.png" class="bildname" id="projekt_02" /></div> <div class='white'></div>
Javascript:
var Bilder = new Object; Bilder['01'] = Array("01.jpg", "02.jpg", "03.jpg"); Bilder['02'] = Array("01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"); Bilder['03'] = Array("01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg"); Bilder['04'] = Array("01.jpg", "02.jpg"); var i = 0; $(document).ready(function() { $('.bildname').each(function(){ i = 0; $(this).click(function(){ var tmp = $(this).attr('id').split('_'); var vz = tmp[1]; i++; var bilderarray_nutzen = Bilder[tmp[1]]; if(i>=bilderarray_nutzen.length) { i = 0; } else if(i<0) { i = bilderarray_nutzen.length-1; } $(this).attr('src', 'IMG/' + vz + '/' + bilderarray_nutzen[i]); }); }); });
Funktioniert sehr gut, Webseite
Was denkt ihr darüber?
Ist es möglich, für jedes der Bilder einen separaten Text unterhalb der Bilder einblenden zu lassen, eine Art Bildbeschreibung sozusagen?
Vielen Dank für die Hilfe =)
Dieser Beitrag wurde von tommes58 bearbeitet: 06. Mai 2012 - 18:35
#6
geschrieben 06. Mai 2012 - 20:37
Also ich bin dann raus, ich bin wahrscheinlich zu blöd für die Bedienung der Seite.
Bauernregel: Regnets mächtig im April, passiert irgendwas, was sich auf April reimt.
#7
geschrieben 07. Mai 2012 - 06:26
Also so interessant ich diese Art der Bedienung auch finde, bleibe ich bei dem Prinzip:
Form follows Function follows Content
Ich kann auf der Seite einfach keinen Sinn entdecken. Ein paar thematisch gruppierte Bilder, ohne zu wissen was der Autor der Seite von mir will... Abgesehen davon funktioniert der Impressum-Link nicht - gefährlich in DE.
Form follows Function follows Content
Ich kann auf der Seite einfach keinen Sinn entdecken. Ein paar thematisch gruppierte Bilder, ohne zu wissen was der Autor der Seite von mir will... Abgesehen davon funktioniert der Impressum-Link nicht - gefährlich in DE.
PC: AMD FX-8150 | Sapphire Radeon HD 5770 @OC-Bios | GA-990XA-UD3 - 4x4 GB DDR3-2133 | OCZ Agility II 128 GiB SSD (OS) & 10 TB-Storage-Server | Win7 Professional x64
NB: Sony Vaio VPCYB16 - AMD Fusion E-350 - 1x4 GiB Kingston DDR3-1333 - 64 GiB Super*Talent SSD
NB: Sony Vaio VPCYB16 - AMD Fusion E-350 - 1x4 GiB Kingston DDR3-1333 - 64 GiB Super*Talent SSD
#8
geschrieben 08. Mai 2012 - 18:23
Zitat (N1truX: 07. Mai 2012 - 06:26)
Ich kann auf der Seite einfach keinen Sinn entdecken. Ein paar thematisch gruppierte Bilder, ohne zu wissen was der Autor der Seite von mir will... Abgesehen davon funktioniert der Impressum-Link nicht - gefährlich in DE.
Deswegen soll ja der Text noch mit eingeblendet werden, damit der Nutzer weiß, worum es geht. Vielleicht mache ich das doch mit PHP..hmmm. Trotzdem, Danke für eure Zeit Jungs!
Thema verteilen:
Seite 1 von 1