How to insert a slot into an image
My goal is to paste <span>
in <image>
, but I don't know how to do it. A similar effect is found at http://www.bulb.cz/cs/reference , but I don't want it on hover()
, but on click()
. I want to insert "data name" into <span>
, and then <span>
show on <image>
.
HTML:
<div class="Fotogalery">
<img src="images/Thumb/1.jpg" data-title="Zdar" />
<img src="images/Thumb/2.jpg" data-title="Ahoj" />
<img src="images/Thumb/3.jpg" data-title="Cau" />
<img src="images/Thumb/4.jpg" data-title="KUK" />
<img src="images/Thumb/5.jpg" data-title="ohh" />
</div>
CSS
.Foto{width: 25%;height:auto;float:left;box-sizing: border-box;}
.Gallery{position:relative;}
.Gallery span{position:absolute;z-index:999;}
JavaScript:
$(".Fotogalery img").addClass("Foto");
$(".Foto").wrap( "<div class='Gallery'></div>" );
$(".Foto").after("<span></span>");
$(".Foto").click(function() {
var a = $(this).data('title');
});
source to share
Try this: http://jsfiddle.net/sergdenisov/p72jnbLt/5/ :
JavaScript:
$('.Fotogalery img').addClass('Foto');
$('.Foto').wrap('<div class="Gallery"></div>');
$('.Foto').click(function () {
var a = $(this).data('title');
$(this).after('<span>' + a + '</span>');
});
CSS
.Fotogalery {
font-size: 0;
}
.Foto {
display: inline-block;
width: 100%;
}
.Gallery {
position: relative;
display: inline-block;
width: 25%;
}
.Gallery span {
position: absolute;
z-index: 1;
left: 0;
top: 0;
font-size: 16px;
}
source to share
If I understand your question correctly, you can use the following ('span') to select a range:
$(".Foto").click(function() {
var a = $(this).data('title');
$(this).next('span').html(a);
})
To have a range floating over the image, enter a span position:absolute
and a containerpostion:relative
source to share