2016-04-13 2 views
1

私はマテリアライズデザインを使用しています。別の画像をクリックした後、別の画像を開きたいイメージトリガーをクリックjqueryの他のイメージ

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> 

スクリーンショット:
enter image description here

小さな画像はクリックできないはずです。ユーザーが小さな画像をクリックすると大きな画像トリガー、小さな画像の場所。

+0

イメージを最初に削除します。 –

答えて

0

アンカータグのリンクを削除しました。

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'); 
     }); 

あなたがアンカータグのリンクで画像を取っている場合、それは最初の画像にリダイレクトされます。アンカータグリンクを削除します。

関連する問題