Problem with Meteor Package "Flexslider".It's not showing images with carousel and thumbnail.If the package is not used showing images correctly


#1

album.html

album
{{> images}}
<div id="slider" class="flexslider">
    <ul class="slide">
    {{#each images}}
        <li>
            <img src="{{img_src}}" alt="{{img_alt}}">
        </li>
    {{/each}}
    </ul>
</div>
<div id="carousel" class="flexslider">
    <ul class="slide">
        {{#each images}}
            <li>
                <img src="{{img_src}}" alt="{{img_alt}}">
            </li>
        {{/each}}          
    </ul>
</div>
<div>
</div>

album.js

Images=new Mongo.Collection(“images”);

if(Meteor.isClient)
{
Template.images.helpers
({
images:function()
{
return Images.find({});

	}
});

Template.images.rendered = function(){

  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: true,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  }),

  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: true,
    sync: "#carousel",
    start: function(slider){
      $('body').removeClass('loading');}
  })
});

};

}//if cleint

startup.js
if(Meteor.isServer)
{

 Meteor.startup(function(){
if (Images.find().count() == 0){
	for (var i=1;i<23;i++){
		Images.insert(
			{
				img_src:"img_"+i+".jpg",
				img_alt:"image number "+i 
			}
		);	
	}// end of for insert images
	// count the images!
	console.log("startup.js says: "+Images.find().count());
}// end of if have no images

});
}