2014-07-24 9 views
0

요소를 검사 할 때 galleria가 썸네일 대신 풀 사이즈 이미지를 사용하고 있음을 나타냅니다. 갤러리아 문서에서갤러리아 썸네일 대신 풀 사이즈 이미지 사용

예 내 코드 데모 jsfiddle하는 링크 http://jsfiddle.net/zain_aligent/EAVtM/4/

가 어떻게 전체 대신 갤러리아 사용 썸네일 이미지를 만들 수있다

<div class="galleria"> 
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/812px-3D_Schildersdoek.JPG"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/220px-3D_Schildersdoek.JPG" alt=""/></a> 
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/800px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/300px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG" alt=""/></a> 
</div> 

입니다 http://galleria.io/docs/getting_started/quick_start/

<div class="galleria"> 
    <a href="/img/large1.jpg"><img src="/img/thumb1.jpg" data-title="My title" data-description="My description"></a> 
    <a href="/img/large2.jpg"><img src="/img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description"></a> 
</div> 

입니다 크기 이미지?

답변

1

요점은 데이터 - 큰 속성입니다. 이런 갤러리 항목을 정의하십시오.

A HREF = "ThumbImage.jpg"의 img SRC = "ThumbImage.jpg데이터 큰 ="LARGEIMAGE.jpg "

<div class="galleria"> 
    <a href="ThumbImage.jpg"> 
     <img src="ThumbImage.jpg" 
      data-big="LargeImage.jpg" 
      data-title="My title" 
      data-description="My description"/> 
    </a> 
    <a href="ThumbImage.jpg"> 
     <img src="ThumbImage.jpg" 
      data-big="LargeImage.jpg" 
      data-title="My title" 
      data-description="My description"/> 
    </a> 
</div> 

아래의 업데이트 된 버전을 사용해보십시오.

<!DOCTYPE html> 
<html> 

<head> 
    <link type="text/css" href="galleria/themes/classic/galleria.classic.css" media="screen" rel="stylesheet" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script src="galleria/galleria-1.3.6.min.js"></script> 
</head> 

<body> 


<div class="galleria"> 
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/220px-3D_Schildersdoek.JPG"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/220px-3D_Schildersdoek.JPG" 
      data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/812px-3D_Schildersdoek.JPG" 
      data-title="My title" 
      data-description="My description" 
      /> 
    </a> 
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/300px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/300px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG" 
      data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/800px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG" 
      data-title="Another title" 
      data-description="My <em>HTML</em> description" 
     /> 
    </a> 
</div>  



    <script type="text/javascript"> 
     $(document).ready(function() { 
      Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); 

      $('.galleria').galleria({ 
      width: 350, 
      height: 315, 
      thumbCrop: "height", 
      lightbox: true 
      }); 
      Galleria.run('.galleria'); 
     }); 
    </script> 

</body> 
</html> 
+0

가 Plunker http://plnkr.co/edit/oB5jF1ydxLmJg0J4wQw1?p=preview에서 재판 은 현지에서 시도했다. 문제는 이미지 resiz 되 인 css/html을 사용하여 ed. 요소를 검사하면 Chrome이라고 말하면됩니다. 태그 src는 http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/812px-3D_Schildersdoek.JPG가 아닙니다 http://upload.wikimedia.org/wikipedia/commons/thumb/ 2/2f/3D_Schildersdoek.JPG/220px-3D_Schildersdoek.JPG – zainengineer

+0

업데이트 된 버전보기. ** data-big ** 속성을 사용하면 갤러리에서 원본 축소판 이미지 (큰 이미지의 크기가 조절되지 않음)가 사용됩니다. 파이어 폭스에서 ** Check Element With Firebug **로 체크했다. – khan