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
});
}