Klicken Sie auf das Bild, um ein anderes Bild in jquery auszulösen

Question

Ich verwende Materialise Design. Ich möchte ein anderes Bild öffnen, nachdem ich auf ein anderes Bild geklickt habe.

Code:

<img id="prod-big-image" 
    class="materialboxed" style="width:100%;" 
    src="<catalog:ProductImageUrl 
    pictureId="${product.productPictureMappings[0].pictureId}" productName="${product.name}" 
    useCase="descriptionPageBig"/>" 
          alt="buy ${product.name}" title="${product.name}"> 
<div class="center-align"> 
    <c:forEach items="${product.productPictureMappings}" var="pic" varStatus="loopStatus"> 
     <a href="<catalog:ProductImageUrl pictureId="${pic.pictureId}" 
      productName="${product.name}" useCase="zoom"/>"> 
      <img class="abc" class="prod-zoom-img" 
       data-bigimgurl="<catalog:ProductImageUrl pictureId="${pic.pictureId}" productName="${product.name}" useCase="descriptionPageBig"/>" 
       width="60" src="<catalog:ProductImageUrl pictureId="${pic.pictureId}" productName="${product.name}" useCase="modal-giftbox"/>" 
       alt="view ${product.name}" title="${product.name}"> 
     </a> 
    </c:forEach> 
</div> 

Screen Shot:

Kleine Bilder sollten nicht angeklickt werden. Wenn der Benutzer auf kleine Bilder klickt, dann wird ein großes Bild ausgelöst, Platz für kleine Bilder.

Answer 1

Ich habe eine Antwort, Anker Tag Link entfernen.

Code:

<img id="prod-big-image" class="materialboxed n" style="width:100%;" src="<catalog:ProductImageUrl pictureId="${product.productPictureMappings[0].pictureId}" productName="${product.name}" useCase="descriptionPageBig"/>" 
          alt="buy ${product.name}" title="${product.name}"> 
         <div class="center-align"> 
          <c:forEach items="${product.productPictureMappings}" var="pic" varStatus="loopStatus"> 
           <a href="#"> 
            <img class="prod-zoom-img materialboxed abc" data-bigimgurl="<catalog:ProductImageUrl pictureId="${pic.pictureId}" productName="${product.name}" useCase="descriptionPageBig"/>" 
             width="60" src="<catalog:ProductImageUrl pictureId="${pic.pictureId}" productName="${product.name}" useCase="modal-giftbox"/>" alt="view ${product.name}" title="${product.name}"/> 
           </a> 
          </c:forEach> 
         </div> 

JQUERY:

$('.abc').click(function(){   
      $('.n').trigger('click'); 
     }); 

Wenn Sie einnehmen Bild mit Ankertag Link dann wird es zuerst in ein umzuleiten. Dann Entfernen Sie den Anker-Tag-Link.