Bild kann nicht angezeigt werden, wenn die Bild Onclick

Question

Funktionalität ist: Wenn der Benutzer zum Hauptmenü Seite navigiert, wird eine Liste von Bild angezeigt werden. Wenn der Benutzer im Hauptmenü auf ein bestimmtes Bild im Container klickt, wird ein zweites Bild in Form eines Popup-Anzeigebildes angezeigt. Zuletzt kann der Benutzer auf das zweite Bild klicken und das dritte Bild wird angezeigt.

Alle Bilder sind in verschiedenen Arrays gruppiert, alle Bilder sind verlinkt; Bedeutung, ImageArrayA [0] = ImageArrayB [0] = ImageArrayC [0].

Was getan wurde:

Ich habe 3 Sätze von Array von Bildquelle:

1.) Alle Bilder Quelle Array 2.) Secondary Image Source Array (Pop-up-Display) 3.) Dritte Bildquelle Array

Ich habe alle Bilder von Array (Alle Bilder Quelle), und fügen Sie an einer bestimmten Stelle sagen: <div class="Container"> <div id= "list" class="innerScroll"></div></div>. Die Bilder werden in alphabetischer Reihenfolge angezeigt.

Zweitens habe ich einen onclick in Bezug auf die und das zweite Array an das erste Array gemacht, daher, wenn der Benutzer auf das primäre Bild im Hauptmenü klickt, wird das entsprechende zweite Bild angezeigt.

Schließlich habe ich versucht, die gleiche Methode zum Aufdecken des dritten Bildes als das des zweiten Bildes zu tun.

var BrandNameArray = ['http://lorempizza.com/380/240', 
 
    'http://dummyimage.com/250/ffffff/000000', 
 
    'http://lorempixel.com/g/400/200/', 
 
    'http://lorempixel.com/g/400/200/sports/' 
 
]; 
 

 
var SecondImage = ['http://lorempizza.com/380/240', 
 
    'http://dummyimage.com/250/ffffff/000000', 
 
    'http://lorempixel.com/g/400/200/', 
 
    'http://lorempixel.com/g/400/200/sports/' 
 
]; 
 

 
var ThirdImage = ['http://lorempizza.com/380/240', 
 
    'http://dummyimage.com/250/ffffff/000000', 
 
    'http://lorempixel.com/g/400/200/', 
 
    'http://lorempixel.com/g/400/200/sports/' 
 
]; 
 

 
var container = document.getElementById('list'); 
 
var docFrag = document.createDocumentFragment(); 
 

 
var x = 0; 
 
BrandNameArray.forEach(function(url, index, originalArray) { 
 
    var img = document.createElement('img'); 
 
    img.id = "Logo-" + x; 
 
    img.src = url; 
 
    docFrag.appendChild(img); 
 

 
    var selectedOffer = SecondImage[index]; 
 
    //Choose Brand with popUp 
 
    img.onclick = function() { 
 
    $('#SecondImage').fadeIn({ 
 
     duration: slideDuration, 
 
     queue: false 
 
    }); 
 
    $("#Description").attr('src', selectedOffer).show(); 
 
    }; 
 
    selectedOffer.onclick = function() { 
 
    console.log("index" + index); 
 
    var PhotoFrame = ThirdImage[index]; 
 
    console.log("PhotoFrame" + PhotoFrame); 
 
    $("#Chosen_ThirdImage").attr('src', PhotoFrame).show(); 
 
    }; 
 
    x++; 
 
}); 
 
container.appendChild(docFrag);

.Container { 
 
    position: absolute; 
 
    top: 300px; 
 
    left: 300px; 
 
    height: 600px; 
 
    width: 1260px; 
 
} 
 
.innerScroll { 
 
    position: relative; 
 
    width: 1250px; 
 
    height: 600px; 
 
    font-size: 25px; 
 
    color: #8d8989 !important; 
 
    overflow-y: scroll; 
 
}

<div id="FirstImage" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=3; top:0px; left:0px;"> 
 
    <!--Container to display all alphabetically sorted images--> 
 
    <div class="Container"> 
 
    <div id="list" class="innerScroll"></div> 
 
    </div> 
 
</div> 
 

 
<div id="SecondImage" class="menu" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; top:0px; left:0px; z-index=10;"> 
 

 
    <img id="Description" style="position:absolute; top:124px; left:534px; z-index=99;"> 
 
</div> 
 

 
<div id="ThirdImage" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=14; top:0px; left:0px; "> 
 

 
    <!--Photoframe that is selected from brand chosen--> 
 
    <img id="Chosen_ThirdImage" style=" position:absolute; width:1920px; height:1080px; top:0px; left:0px;" /> 
 
</div>

Ausgabe:

ich es geschafft haben, das zweite Bild zu erhalten, richtig klickt auf das erste Bild, wenn der Benutzer angezeigt werden, jedoch, wenn der Benutzer klickt auf die zweite Bild. Das dritte Bild kann nicht geladen und angezeigt werden.

Bedeutung: Wenn der Benutzer auf imageA [0] klickt, bekomme ich imageB [0] und auch imageC [0] und wenn ich auf imageA [3] klicke, bekomme ich imageB [3] und imageC [ 3].

Ich möchte fragen, was habe ich falsch gemacht. bitte helfen, danke.

Answer 1

selectedOffer dass Sie versuchen, einen Ereignishandler erscheint hinzufügen, um nur ein String zu sein, nicht ein Element im DOM:

var selectedOffer = SecondImage[index]; 

von

var SecondImage = ['ht_p://lorempizza.com/380/240', 
    'ht_p://dummyimage.com/250/ffffff/000000',... 

dh die Zeichenfolge 'http://dummyimage.com/250/ffffff/000000'

Das erste Bild, das Sie beim Klicken zuweisen, ist ein Element, das Sie erstellt haben mit:

var img = document.createElement('img'); 
    ... 
    docFrag.appendChild(img); 

Sie benötigen #SecondImage klickbare

Answer 2

Nun Ihre Frage nicht direkt zu beantworten, aber ich kann vorschlagen, wie ich über die Schaffung der oben Schnittstelle gehen würde.

Lets sagen, dass die Bilder die IDs mit dem imgid als Präfix haben und dann ihre Seriennr oder irgendeine eindeutige ID dort ist.

dann die Pop-Bilder absolute urls oder einfach nur die name innerhalb der data Attribute nämlich data-first und data-second bzw. füge ich werde.
In diesem Beispiel werde ich die vollständigen absoluten URLs angeben.

<div class="containerofimg">  
    <img src="xyz/img/xyz.jpg" id="imgid234" data-first="http://lorempixel.com/600/300/sports/FirstImageA" data-second="http://lorempixel.com/600/300/sports/SecondImageA" /> 
    <img src="xyz/img/abc.jpg" id="imgid235" data-first="http://lorempixel.com/600/300/sports/FirstImageB" data-second="http://lorempixel.com/600/300/sports/SecondImageB"/> 
    <img src="xyz/img/pqr.jpg" id="imgid236" data-first="http://lorempixel.com/600/300/sports/FirstImageC" data-second="http://lorempixel.com/600/300/sports/SecondImageC"/> 
</div> 

Dann werde ich die jQuery .data() oder .attr() verwenden, um die ersten und zweiten Overlay-Bilder zu packen, und sie im Inneren des modal anzuzeigen.

Wie in diesem Bild gezeigt Demo.