I'm pulling my hair out of this one.
I have developed a few jquery plugins, but of course the all fail when multiples of them.
So to use, 'this' prior to each element call is needed, but I can't get it to work.
eg: var Items = $(this+" ul li").size(); will not work.
Hope someone can point me in the right direction!
Markup and function here:
<!-- START OF CHANGER -->
<script type="text/javascript" src="/structure/js/scripts/changer/changer.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".changer").changer({
Delay:
4000,
Speed:
500
})
});
</script>
<div class="changer">
<ul>
<li><img src="/structure/images/debug/image1.png" /></li>
<li><img src="/structure/images/debug/image2.png" /></li>
<li><p>Textual</p></li>
<li><img src="/structure/images/debug/image3.png" /></li>
</ul>
</div>
<!-- END OF CHANGER -->
(function($){
$.fn.changer = function(options) {
$.fn.changer.defaults = {
Delay:
4000,
Speed:
500,
Animation:
"SlideUp"
}
var option = $.extend({}, $.fn.changer.defaults, options);
return this.each(function() {
var Height = $(this).height();
var Item = 1;
var Items = $(this+" ul li").size();
$(".changer ul li").css("top", Height);
$(".changer ul li").each(function(index, object) {
index = (index*1)+1;
$(object).attr("id", "changer_"+index)
});
play = setInterval(function(){
$(".changer ul li").animate({top: Height}, 500 );
$("#changer_"+Item).animate({top: "0px"}, 500 );
if ( Item >= Items ) {
Item=1;
}
else
{
Item++;
}
}, 2000);
});
}
})(jQuery);