0
J'ai des liens, et je veux afficher une image lorsque je passe la souris sur les liens. Je veux obtenir quelque chose de similaire à ceci: http://www.bootsnipp.com/snippets/featured/bootstrap-lightboxafficher l'image sur hover en utilisant jquery
Mais au lieu de clic, je veux que cela se produise sur le vol stationnaire de l'hyperlien. Voici mon code que j'ai essayé. Quelqu'un peut-il m'aider à le corriger.
code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<link href="bootstrap.min.css" rel="stylesheet" />
<script src="jquery-2.1.0.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
#lightbox .modal-content {
display: inline-block;
text-align: center;
}
#lightbox .close {
opacity: 1;
color: rgb(255, 255, 255);
background-color: rgb(25, 25, 25);
padding: 5px 8px;
border-radius: 30px;
border: 2px solid rgb(255, 255, 255);
position: absolute;
top: -15px;
right: -55px;
z-index:1032;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
var $lightbox = $('#lightbox');
$('[data-target="#lightbox"]').hover(function() {
var $img = $(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};
$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', '');
$lightbox.find('img').css(css);
});
$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');
$lightbox.find('.modal-dialog').css({ 'width': $img.width() });
$lightbox.find('.close').removeClass('hidden');
});
});
</script>
<a href="#" data-toggle="modal" data-target="#lightbox">
Hover here<img src="editedpics/5_china.jpg" style="display:none" />
</a>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">x</button>
<div class="modal-content">
<div class="modal-body">
<img src="" alt="" />
</div>
</div>
</div>
</div>
</body>
</html>
Veuillez coller votre code dans jsbin ou jsfiddle. – aisin
Quel est le problème avec votre code? Comme il l'a dit un JSFiddle serait bon – nilsi