Ergebnis 1 bis 6 von 6
Like Tree1Likes
  • 1 Post By miniA4kuser

Thema: Problem mit Array, DIV und Text zu Array-Bild einblenden

  1. #1
    tommes58 ist offline Grünschnabel
    registriert
    08-05-2012
    Beiträge
    3

    Problem mit Array, DIV und Text zu Array-Bild einblenden

    Hallo Foren-Gemeinde,

    vielleicht könnt ihr mit bei meinem Problem helfen. Die Webseite ist fast fertig, nur noch eine Kleinigkeit ist zu lösen. Ein kurzer Überblick: Die Webseite beinhaltet mehrere nebeneinander angeordnete DIV Container. Jedes DIV enthält Projektbilder. Diese Bilder sind in einem Array abgelegt und werden per Klick in einer Schleife nachgeladen. Nun soll eine Bildbeschreibung zu dem passenden Bild mit eingeblendet werden, und zwar ein bestimmter Text zu einem bestimmten Bild.

    HTML Code sieht so aus:

    HTML-Code:
    				<div class='picture'><img src="IMG/00/titel.png"></div>
    				<div class='white'></div>
                    
    				<div class='picture linkopacity'><img src="IMG/01/01.png" class="bildname" id="projekt_01" /><div id="Beschreibung_01" class="beschreibungsdiv"> </div></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>
                    
    				<div class='picture linkopacity'><img src="IMG/03/01.png" class="bildname" id="projekt_03" /></div>
    				<div class='white'></div>
    
     ...

    Der Javascript Code dazu:

    Code:
    <script type="text/javascript" language="javascript">
    //Projektbilder zum Array
    var Bilder = new Object;
    Bilder['01'] = Array("01.png", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "09.jpg", "10.jpg", "11.jpg","12.jpg", "13.jpg", "14.jpg");
    Bilder['02'] = Array("01.png", "02.jpg", "03.jpg");
    Bilder['03'] = Array("01.png", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg");
    
    var Beschreibung = new Object;
    Beschreibung['01'] = Array("Bild 1 Text", "Bild 2 Text", "Bild 3 Text");
    Beschreibung['02'] = Array("Bild 1 Text", "Bild 2 Text", "Bild 3 Text");
    
    var i = 0;
    
     jQuery(document).ready(function() {
    	 jQuery('.bildname').each(function(){
    		i = 0;
    		 jQuery(this).click(function(){
    			var tmp =  jQuery(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;
    			}
    			 jQuery(this).attr('src', 'IMG/' + vz + '/' + bilderarray_nutzen[i]);
    			 jQuery('#beschreibung_'+vz).html(Beschreibung[vz]);
    		});
    	});
    });
    
    
    </script>
    Leider funktioniert es nicht so wie es sollte. Das Beschreibungs DIV liegt genau über dem Projekt DIV und soll über JS Funktion den entsprechenden Text aus dem Array erhalten. Jedoch klappt es nicht, und leider weiß ich nicht warum. Dazu muss ich sagen, dass ich diesen Code nicht alleine konstruiert habe. Der Ersteller kann mir leider nicht sagen, woran es liegt. Deshalb wende ich mich vertrauensvoll an euch.

    Würde mich freuen, wenn jemand einen Tipp hat =)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Problem mit Array, DIV und Text zu Array-Bild einblenden

    IDs sind case-sensitiv. #beschreibung_01 != #Beschreibung_01

  3. #3
    tommes58 ist offline Grünschnabel
    registriert
    08-05-2012
    Beiträge
    3

    AW: Problem mit Array, DIV und Text zu Array-Bild einblenden

    Ach, wie blöd. Leider geht es nach Änderung immer noch nicht, vielleicht sollte ich den Text einfach ins Bild legen. Trotzdem Danke für´s anschauen

  4. #4
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Problem mit Array, DIV und Text zu Array-Bild einblenden

    Du musst ja auch nicht nur das richtige Element ansprechen, sondern die einzufügenden Daten auch aus der richtigen Quelle lesen:
    Code:
     jQuery(document).ready(function() {
    	 jQuery('.bildname').each(function(){
    		i = 0;
    		 jQuery(this).click(function(){
    			console.log('click on image ' + i);
    			var tmp =  jQuery(this).attr('id').split('_');
    			var vz  = tmp[1];
    			var bilderarray_nutzen = Bilder[tmp[1]];
    			var beschreibungarray_nutzen = beschreibung[tmp[1]];
    			i++;
    			if(i>=bilderarray_nutzen.length)
    			{
    				i = 0;
    			}
    			else if(i<0)
    			{
    				i = bilderarray_nutzen.length-1;
    			}
    			 jQuery(this).attr('src', 'IMG/' + vz + '/' + bilderarray_nutzen[i]);
    			 jQuery('#beschreibung_'+vz).html(beschreibungarray_nutzen[i]);
    		});
    	});
    });
    Auch die Fehlerkonsole hätte die Aufschluss geben können.
    tommes58 likes this.
    Hoffe ich konnte helfen

  5. #5
    tommes58 ist offline Grünschnabel
    registriert
    08-05-2012
    Beiträge
    3

    AW: Problem mit Array, DIV und Text zu Array-Bild einblenden

    Great =) Danke, es läuft. So macht es erst Sinn, ich stehe mit Javascript echt noch am Anfang, aber beim Blick auf die Funktion wird es mir nun klarer, super Ding!!

  6. #6
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Problem mit Array, DIV und Text zu Array-Bild einblenden

    Gern geschehn
    Hoffe ich konnte helfen

Ähnliche Themen

  1. array ist erst nach alert(array.length) aktuell
    Von Flinch im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 12-01-2011, 15:01
  2. Text in Bild einblenden
    Von Kapitän Forelle im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 17-05-2010, 23:14
  3. php-Array nach Javascript-Array Problem
    Von dtrixer im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 16-03-2010, 18:18
  4. bild in array
    Von Lioba im Forum JavaScript
    Antworten: 22
    Letzter Beitrag: 15-02-2007, 10:44
  5. text im bild (array)
    Von ilja im Forum Serverseitige Programmierung
    Antworten: 1
    Letzter Beitrag: 03-03-2006, 15:11

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •