Bonjour à tous
Je suis un jeune développeur encore en apprentissage et on me demande de mettre une légende aux différentes images du slideshow.
Pour cela j'aimerais les afficher en même temps que les images en jquery.
Cela fait deux jours que je cherche étant novice en jquery javascript votre aide sera la bienvenue
Merci par avance et voici mon code:
le html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionnal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/StyleMonPlugins2.css" />
<script type="text/javascript" src="js/jquery.slideshow.js"></script>
<script type="text/javascript">
var data ={'imgs':[
'images/Koala.jpg',
'images/Lighthouse.jpg',
'images/Desert.jpg',
'images/Tulips.jpg',
'images/Penguins.jpg'
]};
$(document).ready(function(){
$('#galerieImg').galerieImage(data);
});
</script>
</head>
<body>
<div id="galerieImg"></div>
<div id="commentaire"></div>
</body>
</html>
le css:
div.galerieImg{
cursor:pointer;
font-family:Arial;
font-size:12px;
height:768px;
width:1024px;
position: absolute;
top:50px;
left:50px;
}
div.galerieImg span.slideshow-link{
background-color:#FFF;
border:1px #CCCCCC solid;
cursor:pointer;
left:3px;
line-height:22px;
margin:3px;
padding:2px 6px;
position:relative;
text-align:center;
top:3px;
vertical-align:top;
}
div.galerieImg span.selected {
font-weight: bold;
border:1px #000000 solid;
background-color:#B5DED0;
}
#commentaire
{
display:block-inline;
width:100%;
position: absolute;
top:818px;
left:50px;
}
et le jquery le .js
(function($) {
$.fn.galerieImage = function(args) {
// Variables
var defaults = {
imgs:[]
};
var options = $.extend(defaults, args);
var nbreImage = data.imgs.length;
var element = this;
var numSlide = 0;
// Fonctions
var rotation = function() {
$(element).css('background-image','url(' + options['imgs'][numSlide] + ')');
$('.selected').removeClass('selected');
$('#slideshow-' + numSlide).addClass('selected');
numSlide++;
};
// Main
$(element).addClass('galerieImg');
for(var i = 0; i < nbreImage; i++){
$(element).append('<span id="slideshow-' + i + '" class="slideshow-link">' + (i + 1) + '</span>');
}
rotation();
$("div.galerieImg").delegate("span.slideshow-link", "click", function(pEvent){
numSlide = parseInt($(pEvent.target).text()) - 1;
$('.selected').removeClass('selected');
$(pEvent.target).addClass('selected');
$(element).css('background-image','url(' + options['imgs'][numSlide] + ')');
});
return $(this);
};
})(jQuery);