Magnific-popup : <img src="...">에서 이미지 URL을받는 방법?

Question

이미지 URL을 img 태그의 'src'속성에서 가져 오기 위해 magnific-popup을 강요 할 수 있습니까? 이렇게하면 태그로 img를 래핑 할 필요가 없습니다. 아래 코드를 시도했지만 작동하지 않습니다. 반환 된 오류는 '정의되지 않음'URL입니다.

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('div.gallery').magnificPopup({delegate: 'img'.attr('src') , type: 'image', gallery:{enabled:true} 
    }); 
    }); 
</script> 

어쨌든 'a'태그가없는 'img'로만 할 수있는 옵션이 있습니까? 감사합니다.

Answer 1

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('div.gallery').magnificPopup({delegate: 'img' , type: 'image', gallery:{enabled:true}, 

    callbacks: { 
      elementParse: function() { this.item.src = this.item.el.attr('src'); } 
    } 

    }); 
    }); 
</script> 

elementParse는 http://dimsemenov.com/plugins/magnific-popup/documentation.html#api

Answer 2

허용 된 대답은 하나, 나를 위해 작동하지 않았다. Data-mfp-src 속성을 사용하여 href의 값 (여기에 언급 된대로 : http://dimsemenov.com/plugins/magnific-popup/documentation.html#content-types)보다 우선합니다.

수동으로 (이미지의 src를 복제하는) 속성을 추가하는 대신 magnificopop 호출 전에 모든 이미지의 data-mfp-src 속성에 src 값을 복사했습니다. 이런 식으로 뭔가가 :

var popupImages = $('div.withPopups img'); 
popupImages.each(function(){ 
    $(this).attr('data-mfp-src', $(this).attr('src')); 
}); 
popupImages.magnificPopup({type: 'image'}); 

Answer 3

실제로 근무 한 적이없는, 내가하는 방법을 발견했다. 이제 그림을 클릭 할 때 스크립트가 증가하고 갤러리를 만듭니다.

magnificPopup 1.1.0와

<script type="text/javascript"> 
    $(document).ready(function() { 
       $('#text').magnificPopup({ 
        delegate: 'img', 
        type: 'image', 
        gallery: { 
         enabled: true 
        }, 
        callbacks: { 
         elementParse: function(qw) { 
          qw.src = qw.el.attr('src'); 
         } 
        } 


       }); 
      }); 
</script> 

Answer 4

지금 당신은 당신이 작동하려면 다음과 같이해야한다.

$(document).ready(function() { 
     $('.myClass').magnificPopup({ 
      type: 'image', 
      callbacks: { 
       elementParse: function(item) { 
        item.src = item.el.attr('src'); 
       } 
      } 
     }); 
    });