더 큰 이미지의 구석에 작은 이미지를 배치하는 방법은 무엇입니까?

Question

안녕하세요. 내 div에는 여러 개의 큰 이미지가 있고 하나의 작은 돋보기 이미지가 있습니다.이 이미지는 모든 이미지 오른쪽 상단 모서리에 동적으로 표시됩니다. 내 큰 이미지를 클릭하면 전환됩니다. 그들의 크기는 다릅니다. 지금 나는 모든 이미지 높이와 너비를 얻으려고 노력하고 수동으로 작은 이미지 위치를 잡을 수 있습니다. 더 나은 방법이 있습니까?

작은 돋보기 이미지는 큰 이미지보다 큰 z- 색인을가집니다.

내 jQuery 코드 :

 $('img.small').fadeOut('fast', function() { 

     $('img.small').css('top',$(el).find('img.big:last').height()+60); // i want to change this 
     $('img.small').css('top',$(el).find('img.big:last').width()+60); // and this 

     $('img.small').fadeIn(); 
     }); 

내 CSS :

#myGallery { 
    width: 100%; 
    height: 300px; 
    } 



.small img{ 
position: absolute; 
left:150px; 
top:150px; 
z-index: 15000; 
width: 35px; 
height: 35px; 
} 

MY HTML :

<div id="myGallery" class="spacegallery"> 

<img class="small" src="small.jpg" alt="" /> 
<img class="big" src=images/bw1.jpg alt="" /> 
<img class="big" src=images/bw2.jpg alt="" /> 
<img class="big" src=images/bw3.jpg alt="" /> 

      </div> 

감사합니다!

Answer 1

, 너무 오래 사용자가 상대적으로까지 간만큼 날짜를 브라우저에서 사용하면 일부 마크 업 변경이 필요하지만 CSS 만 사용할 수 있습니다.

<div id="myGallery" class="spacegallery"> 
    <span class="imgWrap"> 
     <img class="big" src='http://davidrhysthomas.co.uk/img/dexter.png' alt=""/> 
    </span> 
    <span class="imgWrap"> 
     <img class="big" src='http://davidrhysthomas.co.uk/img/mandark.png' alt=""/> 
    </span> 
</div>​ 

그리고 CSS :

#myGallery { 
    width: 100%; 
    height: 300px; 
} 

.imgWrap { 
    float: left; 
    position: relative; 
} 

.imgWrap::after { 
    content: url(http://davidrhysthomas.co.uk/img/glass.png); 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: rgba(255,255,255,.3); 
    border-radius: 0.5em; 
}​ 

JS Fiddle demo.

경우에는, 그러나, 당신은 그때 나는 다음과 같은 제안 것, jQuery를 사용하는 것을 선호 것 : 자신의 게시 마크 업을 기반으로

var glass = $('<img />', { 
    src: 'http://davidrhysthomas.co.uk/img/glass.png', // host your own image though. Please. 
    class: 'glass' 
}).clone(); 

$('.big') 
    .wrap('<span></span>') 
    .addClass('wrap') 
    .parent() 
    .addClass('wrap') 
    .append(glass);​​​​ 

하고 JS Fiddle demo is here.

Answer 2

div 래퍼에 그림을 배치하지 않으면 동일한 방법으로 작업했을 것입니다. 래퍼를 배치 할 수 있다면 모든 래퍼에 돋보기 이미지를 넣고 래퍼 자체에 "큰"클래스가있는 경우 CSS를 통해 표시되도록 할 수 있습니다. 예를 들어 :

div.big { 
position: relative; 
} 
div.big img.magnifier { 
display: block; 
position: absolute; 
top: 0px; 
right: 0px; 
} 
div.small img.magnifier{ 
display: none; 
} 

을하고 HTML에서

<div class="small"> 
<img src="..." /> 
<img src="..." class="magnifier" /> 
</div> 
<div class="small"> 
<img src="..." /> 
<img src="..." class="magnifier" /> 
</div> 
<div class="big"> 
<img src="..." /> 
<img src="..." class="magnifier" /> 
</div> 

그리고 마지막으로, JS에서이 들어

$('img.magnifier').bind('click', function() { 
$(this).siblings('img').attr('src', '..your small picture...'); 
})