[tommes58]

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....

[Holger_N]

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)

Dieser Beitrag wurde von Holger_N bearbeitet: 23. April 2012 - 14:39

[Stefan_der_held]

Ist n bischel JS

<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>

[N1truX]

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:

<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

[tommes58]

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

<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

[Holger_N]

Also ich bin dann raus, ich bin wahrscheinlich zu blöd für die Bedienung der Seite.

[N1truX]

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.

[tommes58]

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!