클래스 .photoBackground와 ID 가있는 html div가 #photo있습니다. id는 모든 배경 이미지 옵션, 높이 너비 등이있는 ID입니다. 배경 이미지 자체는 in div 속성에 style="background-image:url(link.jpg)"있습니다. 이것은 #photo2약간 다른 설정이 필요하기 때문에 를 사용하는 1을 제외하고 모든 div가 똑같은 갤러리 입니다. 어쨌든 스타일 속성에서 URL을 가져와야합니다. 어떻게하나요?
HTML :
<div id="lightbox_shadow_container">
<a id="lightbox-shadow"></a>
<div id="lightboxCancelCross_container">
<svg class="lightboxCancelCross" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="35px" height="35px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g id="cross">
<g>
<polygon points="612,36.004 576.521,0.603 306,270.608 35.478,0.603 0,36.004 270.522,306.011 0,575.997 35.478,611.397
306,341.411 576.521,611.397 612,575.997 341.459,306.011 "/>
</g>
</g>
</g>
</svg>
</div>
<div id="lightbox_caption_container">
<a id="lightbox"></a>
<div class="photoCaptionEffect">
<p class="photoCaptionBig" style="
"></p>
</div>
</div>
</div>
<div class="photoBackground" id="photo" style="background-image: url(Styling-Content/galleriBilleder/image11.JPG);">jQuery :
$(document).ready(function() {
$('.photoBackground').on('click',function () {
var idIClickedOn = '#' + $(this).attr('id'); //this will give you the actual id of the element
var image = $(idIClickedOn ).css('background-image');
// remove "url(" and ")" to get the url
image = image.replace('url(','').replace(')','');
$("#lightbox").css('background-image','url(' + image + ')');
var captionOG = $(this).find('p.photoCaption'); $(".photoCaptionBig").text($(captionOG).text().replace(captionOG, "photoCaptionBig"));
$('#lightbox_shadow_container').show();
$('#lightbox-shadow').show();
$('#lightbox').show();
});
$('#lightbox-shadow').click(function() {
$('#lightbox').hide();
$('#lightbox-shadow').hide();
$('#lightbox_shadow_container').hide();
$('#lightbox').css("background-color", "");
});
$(".lightboxCancelCross").click(function(){
$("#lightbox-shadow").trigger("click");
});
});스타일 속성에서 URL을 가져와야합니다.
사용 시도 .css("backgroundImage"), String.prototype.replace()함께RegExp /url\(|\)/g
var url = $("div").css("backgroundImage").replace(/url\(|\)/g, "");
console.log(url)div {
width:100px;
height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div style="background-image:url(http://lorempixel.com/100/100/cats)"></div>요구 사항의 전체 가치를 사용하는 경우 .css("backgroundImage"), .replace()필요하지를; 추가 $(this)로var idIClickedOn = '#' + $(this).attr('id')
$(document).ready(function() {
$('.photoBackground').on('click',function () {
// var idIClickedOn = '#' + $(this).attr('id'); //this will give you the actual id of the element
var image = $(this ).css('background-image');
// remove "url(" and ")" to get the url
// image = image.replace('url(','').replace(')','');
$("#lightbox").css('background-image', image).show();
// var captionOG = $(this).find('p.photoCaption'); $(".photoCaptionBig").text($(captionOG).text().replace(captionOG, "photoCaptionBig"));
// $('#lightbox_shadow_container').show();
// $('#lightbox-shadow').show();
// $('#lightbox').show();
});
/*
$('#lightbox-shadow').click(function() {
$('#lightbox').hide();
$('#lightbox-shadow').hide();
$('#lightbox_shadow_container').hide();
$('#lightbox').css("background-color", "");
});
$(".lightboxCancelCross").click(function(){
$("#lightbox-shadow").trigger("click");
});
*/
});#lightbox {
display:none;
}
#lightbox, .photoBackground {
width:100px;
height:100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="photoBackground" id="photo" style="background-image: url(http://lorempixel.com/100/100/cats);"></div>
<div id="lightbox"></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다