Jquery plugin not working!
Hello Guys!
I have been trying to create a cool Image Slider using Jquery! I have created it's framework but I was starting with the basics in creating the plugins. My following code is not seems to be working at all! Can anyone suggest where I'm going wrong?
<html>
<head>
<title>Content Slider</title>
<script src="jquery-1.5.2.min.js"></script>
<script src="ajax.jquery.1.8.11.js"></script>
<script src="img.slider.plugin.js"></script>
<script>
jQuery.fn.imgSlider = function () {
var element = this;
var imgArray = [];
$(element+" img").each(function() {
var imgId = $(this).attr("id");
var imgDesc = $(t开发者_Python百科his).attr("desc");
var imgSrc = $(this).attr("src");
imgArray.push({
'id':imgId,
'desc':imgDesc,
'src':imgSrc
});
});
$.each(imgArray,function( i, v ){
element.append($( "<p> Image ID - " + v.id + " | Image Desc - " + v.desc + " | Image Source - " + v.src + "</p>" ));
});
}
$(document).ready(function () {
$('div.frame').imgSlider();
});
</script>
</head>
<body>
<div class="frame">
<img id="1" desc="This Image One!" src="bg-1.jpg" />
<img id="2" desc="This Image One!" src="bg-2.jpg" />
<img id="3" desc="This Image One!" src="bg-3.jpg" />
<img id="4" desc="This Image One!" src="bg-4.jpg" />
<img id="5" desc="This Image One!" src="bg-5.jpg" />
</div>
</body>
</html>
THANKS IN ADVANCE
the problem lies with var element = this; and $(element+" img")
this refers to the current jquery object. it is not a string to concatenate to.
use
$("img", element).each(function(){/*your code here*/})
for the second part.
Or more useful if you want to have multiple sliders in the page
element.each(function(){
$('img', this).each(function(){/*your code here*/});
})
加载中,请稍侯......
精彩评论