You need to put the following html markup in your html document where you want to have slider
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- template -->
<div class="ms-facebook-template">
    <!-- masterslider -->
    <div class="master-slider ms-skin-default" id="masterslider">
            <div class="ms-slide" id="slide1">
                <img src="masterslider/blank.gif" data-src="{{image}}" alt="{{title}}">         
                <img class="ms-thumb" src="{{thumb}}" alt="{{title}}">
                <p class="ms-layer" style="background:rgba(255,255,255,0.5); padding: 20px;" data-offset-x="50" data-offset-y="50" data-origin="bl">
                    {{name}}<br>
                    by:{{owner-name}}
                </p>
            </div>
    </div>
    <!-- end of masterslider -->
</div>
<!-- end of template -->         
            
You need to put the following scripts just before the < ⁄ body>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">      
 
    var slider = new MasterSlider();
    slider.setup('masterslider' , {
        width:900,
        height:600,
        space:5,
        fillMode:'fit',
        preload:1,
        view:'basic'
    });
     
    slider.control('arrows');  
    slider.control('thumblist' , {autohide:false, dir:'h',arrows:false,align:'bottom',width:127,height:137,fillMode:'fill',margin:1,space:1,hideUnder:400});
    slider.control('bullets');
     
    new MSFacebookGallery(slider , {username:'[facebook username]', albumId:'[albume id here]', type:'[album or photostream]', thumbSize:'320', imgSize:'orginal', count:20});
     
</script>
            
You need to import the following files
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Base MasterSlider style sheet -->
<link rel="stylesheet" href="../masterslider/style/masterslider.css" />
 
<!-- Master Slider Skin -->
<link href="../masterslider/skins/default/style.css" rel='stylesheet' type='text/css'>
 
<script src="../masterslider/jquery.min.js"></script>
<script src="../masterslider/jquery.easing.min.js"></script>
 
<!-- Master Slider -->
<script src="../masterslider/masterslider.min.js"></script>