Publish using the HTML App

Avaibable publishing methods:

Export as HTML

The slider created by the html app can be exported as HTML, CSS, JS files and images.

1
Copy the CSS, JS and image files into your server.
2
Include the CSS and JS files, also the Google fonts and a script into your website's head, just as you see it in the index.html file.
3
Paste the html code of the slider, where you would like to have it. 
<head>
.... your codes ....
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway%3A400&subset=latin" media="screen, print" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="css/nextend-frontend.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="css/nextend-backend.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="css/n2-ss-1.css" media="screen, print" />
<script type="text/javascript" src="js/nextend-frontend.js"></script>
<script type="text/javascript" src="js/smartslider-frontend.js"></script>
<script type="text/javascript" src="js/n2-ss-1.js"></script>
<script type="text/javascript" src="js/smartslider-simple-type-frontend.js"></script>
<script type="text/javascript">(function($){
$(document).ready(function() {
new NextendSmartSliderSimple(n2
....
})(n2);
</script>
</head>
<body>
....your code....
<!-- Nextend Smart Slider 3 #1 - BEGIN -->
<div class="n2-ss-align">
....
</div>
<!-- Nextend Smart Slider 3 #1 - END -->
....your code....
</body>

Publish as HTML

The slider will be published in your site right away. You can reach it using an URL like this: http://yoursite.com/sliderbackend/sliders/4/ where the 4 is the slider id and the sliderbackend is the folder name where you installed the Smart Slider 3 HTML app.

Publish using PHP code

This method requires a little bit of coding.

The HTMl app has a start,php which needs to be called in your theme's/template's file, where you want to have the slider. You could include the file like this:

require_once(dirname(__FILE__) . '/ss3/start.php');

just make sure that you are using the correct path for the start.php file. You should also call this function:

<?php N2Native::beforeOutputStart(); ?>

which you can do right after the require_once calling. You will also have to add this code right before your closing body tag:

<?php N2Native::beforeClosingBody(); ?>

Once the everything is called, you can start publishing your sliders using this simple PHP code:

<?php N2SmartSlider(1); ?>

Where 1 is your slider id.

Here is an example:

<?php
require_once(dirname(__FILE__) . "/ss3/start.php");
N2Native::beforeOutputStart();
?>
<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width" />
  <title>My awesome site</title>
  </head>
  <body>
  <h1>Heading</h1>
  <p>This is a test paragraph</p>
  <?php
  N2SmartSlider(1);
  ?>
  <p>This is a test paragraph</p>
  <?php
  N2SmartSlider(2);
  ?>
  <h2>Heading</h2>
  <p>This is a test paragraph</p>
  <?php N2Native::beforeClosingBody(); ?>
  </body>
</html>

Related Articles