www.nof-schule.deDeutschDeutschland EnglishUSA

 

Coin-Slider - Jquery Image-Fader with special effects.

USATutorial: How to build the Coin-Slider Image Gallery in NetObjects Fusion

 

 

The jQuery coin-slider image gallery with buttons to manually page through the images; Elegant mini-thumbs so the viewer knows which picture he/she is visualising; Nice fading in-effects (can be edited); Titles with different levels of opacity according to settings. Implementation in NetObjects Fusion- NOF - is explained in this tutorial.

You should first visit the original website, view the slider there and read the instructions as well as the conditions of use: 

workshop.rs/projects/coin-slider/

Please download our zip-folder, which includes the necessary files: jQuery 1.4.2, coin-slider.min-js as well as the CSS file.

cs-skript.zip

Please note that we have replaced the words “prev” and “next” (original Demo) in the CSS file through the signs “<<” and “>>” to make the viewer more international. We will indicate to you how to edit the buttons texts according to your own needs.

Tutorial - Step 1

Place all three files in the folder “assets” of your local publish folder.

Place your images in the folder assets/images of your local publish folder.

Open your page view in NetObjects Fusion.
 

Tutorial - Step 2

Open your layout properties palette (F9), select the HTML button and place the following codes as indicated:

1) Between Head-Tags:

<script type="text/javascript" src="./assets/jquery-1.4.2.js"></script>
<script type="text/javascript" src="./assets/coin-slider.min.js"></script>
<link rel="stylesheet" href="./assets/coin-slider-styles.css" type="text/css">

Don’t forget to adapt the relative paths to the scripts: If your application is not placed in the index page but in any other page of the project: add a dot before the slash. This is what your code looks like for all pages other then the starting page:

<script type="text/javascript" src="../assets/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../assets/coin-slider.min.js"></script>
<link rel="stylesheet" href="../assets/coin-slider-styles.css" type="text/css">

2) End of body

<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 501, height: 250, navigation: true, opacity: 0.5, delay: 5000 });
});
</script>
 

Please set the width and height of your images here as well as a variety of options as explained in the coin-slider homepage.

Tutorial - Step 3

Now you can position the slider on your page and set the links to your images.

For that purpose, create a text box, activate the text box and click on the HTML Button in your properties palette. Add this code before the tag:

<div id='coin-slider'>
    <a href="http://www.nof-schule.de" target="_blank">
        <img src='./assets/images/img01.jpg' alt="Image Title">
        <span>
            Image title
        </span>
    </a>

    <a href="http://www.nof-schule.de" target="_blank">
        <img src='./assets/images/imgN.jpg' alt="Image Title">
        <span>
            Image title
        </span>
    </a>

    <a href="http://www.nof-schule.de" target="_blank">
        <img src='./assets/images/img02.jpg' alt="Image Title">
        <span>
            Image title
        </span>
    </a>

     
    <a href="http://www.nof-schule.de" target="_blank">
        <img src='./assets/images/img04.jpg' alt="Image Title">
        <span>
            Image title
        </span>
    </a>

    <a href="http://www.nof-schule.de" target="_blank">
        <img src='./assets/images/img05.jpg' alt="Image Title">
        <span>
            Image title
        </span>
    </a>

</div>
<!--

 

And add this code after the tag:

-->

Change the relative path to the images from ./ to ../ if your application is on underpages, as explained above.

You can edit a few things yourself:
 

Tutorial Step 4

1) If you want to change the text in the previous/next buttons, open your coin-slider.min.js with an html-editor and edit line 28: In this file you will find towards the end of the line the following bits of code: ><<< and >>><. You can change those to e.g. >prev< and >next<.

2. Set the width of your title-background directly in the CSS-file. Change the colors of backgrounds and mini-thumbs in the CSS-File (open the file with an editor in order to edit it)

3. We have set opacity at 50%. You can change opacity/transpereny settings in the above mentioned script (end of body).

Please make sure that your files are being uploaded on your webspace as explained above.

You can download our template v9 showing the functioning settings on index page and underpage:

Template jQuery image fader in NetObjects Fusion version 10



Have fun and enjoy coin-slider in NOF!

Barbara
and NOF school team. 18.9.2011

By the way I can also help you at NetObjects Forums if you experience problems implementing this tutorial. You will find me there as user Barbara0701

Back to top

Imprint