Insert a Nivo Slider using Google Drive

 With the recent availability of Google Drive (2012 05), a user of Google Sites can now add a Nivo Slider Slideshow without using an external host. Widget likes Nivo Slider needs javascript and CSS files. In this case we cannot use the new HTML Box as we need to insert the jQuery Library, version 1.7.2. HTML Box only support version 1.6 (2012 06).

jQuery Library

We can use the Google Libraries API to insert the jQuery Library : 

<script type="text/javascript" src=""></script>

Nivo Slider Library

We need to insert this file : jquery.nivo.slider.js. Download this file, and rename it, to suppress the dot, except the last one. 

Nivo Slider javascript : jquery.nivo.slider.js

New name : jquery-nivo-slider.js

Using Google Drive

We upload this javascript file into Google Drive. Choose without conversion. Share the file, and copy the URL given by Google Drive : 

Public URL of jquery-nivo-slider.js :

The HTML - inserting the library

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

The CSS file

We use the same trick with the CSS, nivo-slider.css file. We insert the style sheet with this html : 

<link rel="stylesheet" type="text/css" href="" />

Full HTML page

<!DOCTYPE html>

<title>Liens du Vin - Nivo Slider - Diaporama les plus beaux domaines viticole du Pays de Vaud</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" >
<meta content="Diaporama Nivo Slider : Les plus beaux domaines viticoles du Pays de Vaud. Lien vers les membres des Clos Domaines et Châteaux (association c-d-c). Page html pour insertion d'un diaporama Nivo Slider sur Google Sites" name="description" >
<meta content="domaines viticoles, Clos Domaines et Châteaux, nivo slider, diaporama, google sites, nivo slideshow" name="keywords" >
<link rel="stylesheet" type="text/css" href="" />
body { background-color: #d1dae3; }
 .theme-default .nivo-caption a { color: yellow; border: none; text-decoration: none; }
 .theme-default .nivo-caption a:hover { color: red; border: none; text-decoration: none; }


<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">

<!-- pictures to display -->

<img src="" alt="Domaine du Prieuré - Perroy" title="#c1" />
<img src=" %2520%2528Yvorne%2529.jpg" alt="Château Maison Blanche - Yvorne" title="#c19" />

<!-- end of nivoSlider -->

<!-- caption -->

<div id="c1" class="nivo-html-caption">
<a href='' target='_blank' title='Domaine du Prieuré - Perroy'>Domaine du Prieuré - Perroy</a>
<div id="c19" class="nivo-html-caption">
<a href="" target='_blank' title='Château Maison Blanche - Yvorne'>Château Maison Blanche</a> - Yvorne

<!-- end of slider-wrapper -->

<!-- end of wrapper -->

<!-- script -->

<script type="text/javascript" src="">
<script type="text/javascript" src="">

<!-- call nivo slider -->

<script type="text/javascript">
$(window).load(function() { $('#slider').nivoSlider({
    effect: 'sliceUpLeft', // transition
    slices: 15,         // For slice animations
    boxCols: 8,        // For box animations
    boxRows: 4,     // For box animations
    animSpeed: 500, // Slide transition speed
    pauseTime: 3500, // How long each slide will show
    startSlide: 0,         // Set starting Slide (0 index)
    directionNav: true, // Next & Prev navigation
    directionNavHide: true, // Only show on hover
    controlNav: true,         // 1,2,3... navigation
    controlNavThumbs: false,     // Use thumbnails for Control Nav 
    pauseOnHover: true,         // Stop animation while hovering 
    manualAdvance: false,     // Force manual transitions
    prevText: 'Prev',             // Prev directionNav text 
    nextText: 'Next',             // Next directionNav text
    randomStart: true,         // Start on a random slide
    beforeChange: function(){},         // Triggers before a slide transition
    afterChange: function(){},            // Triggers after a slide transition
    slideshowEnd: function(){},         // Triggers after all slides have been shown
    lastSlide: function(){},                 // Triggers when last slide is shown
    afterLoad: function(){}                 // Triggers when slider has loaded


We store this page within Google Drive, and use this URL to insert the page within Google Sites, using the standard iframe Gadget

The Result

More Informations

URL de spécification du gadget introuvable

URL de spécification du gadget introuvable

URL de spécification du gadget introuvable

Find a Wine with Google CSE

URL de spécification du gadget introuvable