Setting up FlexSlider on your server.
Step 1: Download Flexslider from its website.http://www.woothemes.com/flexslider/
Step 2: Extract the flexslider tar file (woothemes-FlexSlider-version-2.2.2-0-gce5441b.zip) on your Linux server. Prefer to keep flexslider under a common path.
Step 4: Create sub directories
Step 5: Change to the base directory
$ cd /var/www/html/sen/training
$ cat > lib/get_img_files.php
<?php
$tot_digits=strlen((string) $tot_files);
$file_midix="?";
$pattern=$file_prefix . $file_midix . $file_suffix;
while (--$tot_digits > 0)
{
$file_midix .= "?";
$pattern .= "," . $file_prefix . $file_midix . $file_suffix;
}
// eg. $images = glob($thumbsPath.'*.{jpg,jpeg,png,gif}', GLOB_BRACE);
//
$images = glob($path . "/{" . $pattern . "}", GLOB_BRACE);
?>
<Ctrl-D>
$ ln -s /var/www/html/sen/jquery/woothemes-FlexSlider-7ecc526/ ./flexslider
Step 10: Create a softlink to themes/slide_container.php. This would help you to try different layout for your page without disturbing your original work. Once a new container is ready you can just change the softlink to point to the new container.php.
$ ln -s themes/slide_container.php ./
With this we finish the setup of FlexSlider. The base directory shall now contain the following files and directories.
$ pwd
/var/www/html/sen/training/
$ ls -l
total 12
lrwxrwxrwx 1 root root 54 Jul 29 11:49 flexslider -> /var/www/html/sen/jquery/woothemes-FlexSlider-7ecc526/
drwxr-xr-x 2 root root 4096 Jul 29 12:07 lib
drwxr-xr-x 2 root root 4096 Jul 29 12:07 material
lrwxrwxrwx 1 root root 26 Jul 29 12:20 slide_container.php -> themes/slide_container.php
drwxr-xr-x 2 root root 4096 Jul 29 11:56 themes
The themes directory contain:
$ ls -l themes/*
-rw-r--r-- 1 root root 1736 Jul 29 11:56 themes/slide_container.php
-rw-r--r-- 1 root root 241 Jul 29 11:53 themes/slides.css
The lib directory contains:
$ ls -l lib
total 4
-rw-r--r-- 1 root root 206 Jul 29 13:29 get_img_files.php
Setting up a PPT slide
Step 1: Open your PPT in MS Power Point and save as JPEG format
Step 2: Upload the folder created by Power Point to the "material" directory on your server. You may use WinSCP tool to upload the folder. If there are spaces in the folder name then delete or replace them with hypen or underscore character.
Step 3: Create a PHP script for the newly uploaded presentation slide. Let's name the file as chapter01.php. The content of this file shall be as follows:
Step 1: Download Flexslider from its website.http://www.woothemes.com/flexslider/
Step 2: Extract the flexslider tar file (woothemes-FlexSlider-version-2.2.2-0-gce5441b.zip) on your Linux server. Prefer to keep flexslider under a common path.
$ cd /var/www/html/sen/jquery/
$ unzip woothemes-FlexSlider-version-2.2.2-0-gce5441b.zip
This would a directory name woothemes-FlexSlider-ce5441b
Step 3: Create a directory under which you would host the presentation.
$ mkdir /var/www/html/sen/training
Step 4: Create sub directories
$ mkdir /var/www/html/sen/training/{themes,lib,material}
Step 5: Change to the base directory
$ cd /var/www/html/sen/training
Step 6: Create the file slides.css under themes directory
$ cat > themes/slides.css
* {
margin: 0;
padding: 0;
}
html {
background: #222 ;
}
body {
_width: 80%;
color: #888;
margin: 20px auto 0;
max-width: 60%;
text-align: center;
text-shadow: 0 -2px 1px #000;
-webkit-font-smoothing: antialiased;
}
<Ctrl-D>
margin: 0;
padding: 0;
}
html {
background: #222 ;
}
body {
_width: 80%;
color: #888;
margin: 20px auto 0;
max-width: 60%;
text-align: center;
text-shadow: 0 -2px 1px #000;
-webkit-font-smoothing: antialiased;
}
<Ctrl-D>
Step 7: Now we setup the html page view to show the slides. Create a file slide_container.php under the themes directory.
$ cat > themes/slide_container.php
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="flexslider/flexslider.css">
<link rel="stylesheet" href="themes/slides.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="flexslider/jquery.flexslider.js"></script>
<script>
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</head>
<body>
<div id="slider" class="flexslider">
<ul class="slides">
<?php foreach ($images as $img) { ?>
<li><img src="<?php echo $img;?>" /></li>
<?php } ?>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<?php foreach ($images as $img) { ?>
<li><img src="<?php echo $img;?>" /></li>
<?php } ?>
</ul>
</div>
</body>
</html>
<Ctrl-D>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="flexslider/flexslider.css">
<link rel="stylesheet" href="themes/slides.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="flexslider/jquery.flexslider.js"></script>
<script>
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</head>
<body>
<div id="slider" class="flexslider">
<ul class="slides">
<?php foreach ($images as $img) { ?>
<li><img src="<?php echo $img;?>" /></li>
<?php } ?>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<?php foreach ($images as $img) { ?>
<li><img src="<?php echo $img;?>" /></li>
<?php } ?>
</ul>
</div>
</body>
</html>
<Ctrl-D>
Step 8: The PPT slide image files would be placed under the "material" directory. Create the file get_img_files.php under lib directory.
$ cat > lib/get_img_files.php
<?php
$tot_digits=strlen((string) $tot_files);
$file_midix="?";
$pattern=$file_prefix . $file_midix . $file_suffix;
while (--$tot_digits > 0)
{
$file_midix .= "?";
$pattern .= "," . $file_prefix . $file_midix . $file_suffix;
}
// eg. $images = glob($thumbsPath.'*.{jpg,jpeg,png,gif}', GLOB_BRACE);
//
$images = glob($path . "/{" . $pattern . "}", GLOB_BRACE);
?>
<Ctrl-D>
Step 9: Create a softlink to the Flexslider directory. This would help easily change to new version of FlexSlider in future.
Step 10: Create a softlink to themes/slide_container.php. This would help you to try different layout for your page without disturbing your original work. Once a new container is ready you can just change the softlink to point to the new container.php.
$ ln -s themes/slide_container.php ./
$ pwd
/var/www/html/sen/training/
$ ls -l
total 12
lrwxrwxrwx 1 root root 54 Jul 29 11:49 flexslider -> /var/www/html/sen/jquery/woothemes-FlexSlider-7ecc526/
drwxr-xr-x 2 root root 4096 Jul 29 12:07 lib
drwxr-xr-x 2 root root 4096 Jul 29 12:07 material
lrwxrwxrwx 1 root root 26 Jul 29 12:20 slide_container.php -> themes/slide_container.php
drwxr-xr-x 2 root root 4096 Jul 29 11:56 themes
The themes directory contain:
$ ls -l themes/*
-rw-r--r-- 1 root root 1736 Jul 29 11:56 themes/slide_container.php
-rw-r--r-- 1 root root 241 Jul 29 11:53 themes/slides.css
The lib directory contains:
$ ls -l lib
total 4
-rw-r--r-- 1 root root 206 Jul 29 13:29 get_img_files.php
Setting up a PPT slide
Step 1: Open your PPT in MS Power Point and save as JPEG format
Step 2: Upload the folder created by Power Point to the "material" directory on your server. You may use WinSCP tool to upload the folder. If there are spaces in the folder name then delete or replace them with hypen or underscore character.
$ ls -l material/
total 4
drwxr-xr-x 2 root root 4096 Jul 29 13:37 Networking-01-Introduction
total 4
drwxr-xr-x 2 root root 4096 Jul 29 13:37 Networking-01-Introduction
Step 3: Create a PHP script for the newly uploaded presentation slide. Let's name the file as chapter01.php. The content of this file shall be as follows:
<?php
$path="material/Networking-01-Introduction";
$file_prefix="Slide";
$file_suffix=".JPG";
$tot_files=38;
include "lib/get_img_files.php";
include "slide_container.php";
?>
$path="material/Networking-01-Introduction";
$file_prefix="Slide";
$file_suffix=".JPG";
$tot_files=38;
include "lib/get_img_files.php";
include "slide_container.php";
?>
The content marked in yellow needs your input. The $path should match the directory name of your slide, whereas the $tot_files need to match the number of image files present in that directory.
Now your slide is ready to be viewed using a web browser. Open the URL to the php file you created in step 3 above. The below snaps are from the URL http://172.19.1.224/sen/training/chapter01.php
