Insert a Cloud Carousel using Google Drive

 With the recent availability of Google Drive (2012 05), a user of Google Sites can now add a Cloud Carousel Slideshow without using an external host. Widget likes Cloud Carousel needs javascript. We will host the main html page and the javascript within Google Drive.


jQuery Library

  
We can use the Google Libraries API to insert the jQuery Library. We need to use version 1.4.2 : 


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>



Cloud Carousel Library and Mouse Wheel extension



We need to insert these files : cloud-carousel.1.0.5.min.js and jquery.mousewheel.js. Download these files, and rename them, to suppress the dot, except the last one. 


Cloud Carousel javascript : cloud-carousel.1.0.5.min.js
New name : cloud-carousel-1-0-5-min.js

Mouse Wheel extension :  jquery.mousewheel.js

New namejquery-mouswheel.js




Using Google Drive - The main trick


We can use a file hosted within Google Drive, if the file is uploaded without conversion, and the visibility is public. We get a public URL like this : 


Cloud Carousel javascript : https://googledrive.com/host/0B4yfJJJSNrfuZTIwamNZYWVSRXM/cloud-carousel-1-0-5-min.js




The HTML - inserting the library




<!-- jQuery library -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<!-- Cloud Carousel library -->
<script type="text/javascript" src="https://googledrive.com/host/0B4yfJJJSNrfuZTIwamNZYWVSRXM/cloud-carousel-1-0-5-min.js"></script>
<!-- jQuery Mouse Wheel extension -->
<script type="text/javascript" src="https://googledrive.com/host/0B4yfJJJSNrfuZTIwamNZYWVSRXM/jquery-mouswheel.js"></script>




Full HTML page






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Liens du Vin - Cloud Carousel - Diaporama Clos Domaines et Châteaux</title>
 ...
<meta content="Diaporama Cloud Carousel. (jQuery Slideshow). Les plus beaux domaines viticoles de Suisse. Lien vers les membres des Clos Domaines et Châteaux (association c-d-c). Page html pour insertion d'un diaporama Cloud Carousel sur Google Sites. Utilisation de Google Drive" name="description" >
<meta content="domaines viticoles, Clos Domaines et Châteaux, cloud carousel, jquery slideshow, diaporama, google sites" name="keywords" >

<!-- script -->
<!-- jQuery version 1.4.2 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- cloud carousel -->
<script type="text/JavaScript" src="https://googledrive.com/host/0B4yfJJJSNrfuZTIwamNZYWVSRXM/cloud-carousel-1-0-5-min.j"></script>
<!-- add on mouse wheel -->
<script type="text/JavaScript" src="https://googledrive.com/host/0B4yfJJJSNrfuZTIwamNZYWVSRXM/jquery-mouswheel.js"></script>

<style>
body { background-color: #d1dae3; }
#carousel1 { margin: auto; }
#carousel1 img { border: none; }
#ctitle { color: white; text-align: center; font-family: Arial, sans-serif; }
#ctitle a { color: yellow; border: none; text-decoration: none; }
#ctitle a:hover { color: red; border: none; text-decoration: none; }
.dir { width:30px; height:30px; background:url(http://prac-gadget.googlecode.com/svn/branches/nivo-arrows.png) no-repeat; text-indent:-9999px; border:0; }
#right-but { background-position:-30px 0; position absolue; top: 10px; right: 15px; display: inline;}
#left-but { position absolue; top: 10px; left: 15px; display: inline;  }
</style>
</head>
<body>

<div id="carousel1" style="width: 1280px; height: 780px; background:#222222; overflow:scroll;">

<p id="ctitle"> Les plus beaux Domaines viticoles de Suisse - <a href="http://www.liens-du-vin.ch/vision_cdc.htm" target="_blank" title="Clos Domaines et Châteaux">Clos Domaines et Châteaux</a>
<div id="left-but" class="dir">&nbsp;</div>
<div id="right-but" class="dir">&nbsp;</div>
</p>

<!-- pictures to display -->

<a href='http://www.c-d-c.ch/fr/clos-domaines-chateaux/domaine-le-prieure-27-40' target='_blank' title='Domaine du Prieuré - Perroy'><img class="cloudcarousel" src="https://lh3.googleusercontent.com/-st1TUj54Lkw/TpBkjfMxq1I/AAAAAAAAFcU/8BuvxksbQF8/s433/Domaine%20du%20Prieur%C3%A9%20%28Perroy%29.jpg" alt="Domaine du Prieuré - Perroy" title="Domaine du Prieuré - Perroy" /></a>

 ...

<a href="http://www.maison-blanche.ch/" target='_blank' title='Château Maison Blanche - Yvorne'><img class="cloudcarousel" src="https://lh5.googleusercontent.com/-b2d0R390DLc/TpBkjbSTHMI/AAAAAAAAFc4/eIrvubBbcTA/s433/Ch%25C3%25A2teau%2520Maison%2520Blanche%2520%2528Yvorne%2529.jpg" alt="Château Maison Blanche - Yvorne" title="Château Maison Blanche - Yvorne" /></a>

<!-- end carousel1 -->
</div>

<!-- script -->

<script>

$(document).ready(function(){      
     $("#carousel1").CloudCarousel( {
        xRadius:580,
        yRadius:160,
        xPos: 640,
        yPos: 150,
        reflHeight: 220,
        reflGap: 3,
        reflOpacity: 0.3,
        speed: 0.25,
        mouseWheel: true,
        buttonLeft: $("#left-but"),
        buttonRight: $("#right-but")
 }
 );
 });
</script>

</body>
</html>





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