WinFuture-Forum.de: Bild mit Klick ändern: Mehrere Bilder aus Array in DIV Container nache - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Bild mit Klick ändern: Mehrere Bilder aus Array in DIV Container nache


#1 Mitglied ist offline   tommes58 

  • Gruppe: Mitglieder
  • Beiträge: 3
  • Beigetreten: 23. April 12
  • Reputation: 0

geschrieben 23. April 2012 - 10:30

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

Anzeige



#2 Mitglied ist offline   Holger_N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.111
  • Beigetreten: 11. September 10
  • Reputation: 458
  • Geschlecht:Männlich

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)

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

#3 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.289
  • Beigetreten: 08. April 06
  • Reputation: 885
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 23. April 2012 - 18:14

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>


0

#4 Mitglied ist offline   N1truX 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.823
  • Beigetreten: 06. Juli 06
  • Reputation: 2
  • Geschlecht:Männlich
  • Wohnort:Berlin
  • Interessen:Bei WF vorbeischauen, Webprogrammierung, mit Freunden treffen oder irgendwas anderes...

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:

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

#5 Mitglied ist offline   tommes58 

  • Gruppe: Mitglieder
  • Beiträge: 3
  • Beigetreten: 23. April 12
  • Reputation: 0

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

<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

0

#6 Mitglied ist offline   Holger_N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.111
  • Beigetreten: 11. September 10
  • Reputation: 458
  • Geschlecht:Männlich

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

#7 Mitglied ist offline   N1truX 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.823
  • Beigetreten: 06. Juli 06
  • Reputation: 2
  • Geschlecht:Männlich
  • Wohnort:Berlin
  • Interessen:Bei WF vorbeischauen, Webprogrammierung, mit Freunden treffen oder irgendwas anderes...

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

#8 Mitglied ist offline   tommes58 

  • Gruppe: Mitglieder
  • Beiträge: 3
  • Beigetreten: 23. April 12
  • Reputation: 0

geschrieben 08. Mai 2012 - 18:23

Beitrag anzeigenZitat (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!
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0