Blades

IntroductionAdd CSSHTML structureAdd JavascriptAdd more slidesChange the imagesAdvanced settings

Introduction

In this tutorial we are going to show you how to create an awesome banner rotator with some cool  animations like the example below. All you have to do, to make that work is to  copy and paste a few code lines into your jb-website builder and opimise the final result than by drag and drop. 

Step 1 - Setting up the environment

To make sure everything looks as it's supposed to you need to add CSS to your page.
  • Copy this code:

    <link rel="stylesheet" href="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/blades/css/blades.css" type="text/css"/>

  • Load the HTML include tool (if you don't know how to do it here's a short video)
  • Paste the code
  • Save the page
  • Proceed to the next step

Step 2 - Defining the HTML structure of the banner

Again, we are making this very easy  for you, you just need to:
  • Copy the highlighted code below
  • Add a new HTML include - let us call this HTML-Container-2, we will need it later one more time.
  • Paste the code
  • Save the page
  • Preview your page
  • You may have to position the HTML include by drag and drop

<div id="cj-banner">
        <ul>
                <!--FIRST BANNER ITEM-->
            <li title="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/blades/images/1.jpg">
                   
                 </li>
                <!-- END BANNER ITEM -->
<!--MORE BANNER ITEMS HERE-->
        </ul>
 </div>

Step 3 - Adding javascript

The hard work of animating the banner items is carried out with the help of Javascript. But don't panic, as we said you don't have to write a single line of code, just copy and paste it. You have to be extra careful though because the jb website builder uses Javascript too so you can crash the page if you don't follow these steps exactly. These scripts were tested by us so if you follow the instructions you'll be fine.

Warning! Don't insert any scripts in the page before completing the first 2 steps (adding the CSS and the HTML structure to your page). Insert the code to a Javascript include (see icon below) not HTML or PHP include! 

 When you met these requirements (You have CSS and HTML on your page and you know which tool is the  JS include ) you can  proceed
  • Copy the code below
  • Load the Javascript include tool
  • Paste the code
  • Save the page
  • Proceed to the next step

<script src="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/blades/js/jquery.blades-banner.js" type="text/javascript"></script>
<script type="text/javascript">
/* ********************* */
/* BEGIN BANNER SETTINGS */
/* ********************* */
var settings = {
/* The image width */
width: 1000, 
/* The image height */
height: 600,
/* The amount of columns to use for the square grid */ 
cols: 6,
/* The amount of rows to use for the square grid */ 
rows: 3, 
/* Choose to autoplay the banner, true/false */
autoPlay: true,
/* Choose to randomize the slide order, true/false */
randomizeSlides: false,
/* The "break apart" square padding */
thumbSpacing: 10,
/* The delay between slide transitions in milliseconds if autopay is set to true */
slideDelay: 4000,
/* Choose to use arrow buttons, true/false */ 
useArrows: true,
/* The padding for the arrow buttons in relation to the bottom right and bottom left corners of the banner */ 
arrowPadding: 5, 
/* Options are "whiteFlash", "basicFade", "whiteFlashRandom", "basicFadeRandom", "colorsRandom" */
transitionType: "whiteFlashRandom",
/* For slides that are hyperlinked, options are "parent" (same window) and "blank" (new window) */
linkTarget: "blank"
};
/* ************************ */
/* BEGIN DEVELOPER SETTINGS */
/* ************************ */
jQuery(window).load(function() {
jQuery.blades(settings);
settings = null;
});
</script>

Step 4 - Adding more slides to the banner

Surely you noticed that the banner contains only one image. To add more images follow these steps:
  • Copy the code below.
  • Open HTML-Container-2 - we created this befor in step 2
  • Find the <!--MORE BANNER ITEMS HERE--> line
  • Replace it with the copied code
  • Save the page


                <!-- BANNER ITEM-->

            <li title="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/blades/images/1.jpg"></li>

                <!-- END BANNER ITEM -->
<!--MORE BANNER ITEMS HERE-->
        

Get image path

Finding the images URL

With the help of the System image gallery and the property window you can easily add , resize, repozition images to your page with a few clicks, but there might be situations when you need to know the path to your uploaded images. let us show you how to do that:
  • Load the Image tool - Video
  • Load the desired image to your page - Video
  • Right click on the image
  • Select the Open image in new tab option from the list 
  • Go to the newly opened tab
  • Copy the path from the address bar
  • That's it!

Step 5 - Adding your own images

If you did everything right by now you have a functional banner rotator. The only problem with it is that the same image is displayed in every banner. Now we are going to show you how to add your own images to the banner.

  • First of all you need to add your own images to System Image Gallery and find out their URL (Getting Image path is very easy click here to see how that works)
  • Find the following line in the code

    http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/blades/images/1.jpg

  • Replace that line with the URL of your image
  • Repeat steps 1-3 for every banner item
  • Save your page

Step 6 - Advanced settings

So you have a working banner rotator with your own images in it. You can say "That's it!" and enjoy your new page, or you can further customize the appearance of the rotator. you can easily change the width, height, transition effects, etc. 

Adjusting width/height

Adjust the width/height of the banner

To customize the size of your banner follow these steps:
  • Open the Javascript include where you pasted your script
  • Search for the following line: width: 1000, 
  • Replace 1000 with the desired value
  • Search for the following line height: 600,
  • Replace 600 with the desired value
  • Save your page

Choose grid values

Choose the number of columns and rows for the “break apart” effect

To customize the square grid  follow these steps:
  • Open the Javascript include where you pasted your script
  • Search for the following line: cols: 6, 
  • Replace 6 with the desired value
  • Search for the following line rows: 3, 
  • Replace 3 with the desired value
  • Save your page

Transition effects

Change the transition effects

The banner rotator script  provides you five unique transitions from which you can choose. 
  • Open the Javascript include where you pasted your script
  • Search for the following line: transitionType: "whiteFlashRandom", 
  • Replace "whiteFlashRandom" with another effect from the list on the right 
  • Save your page

Available transition effects
"whiteFlash",
"basicFade",
"whiteFlashRandom",
"basicFadeRandom",
"colorsRandom"