publié dans : Tous Blogs - Effets sur Images et documents
NoobSlide est un script qui vous permet de faire défiler vos images.
Voir Sample 2
Etape 1 :
Allez sur NoobSlide
Tout en bas de la page, cliquez sur Download
Vous venez d'enregistrez un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers...
Etape 2 :
Dans l'administration de votre blog, Documents - Autres Fichiers :
Sur votre PC :
Dans l'administration de votre blog, Documents - Autres Fichiers - répertoire NoobSlide :
Lors de la conception de ce slideshow, en HTML, collez
Vous modifiez :
En rouge, les adresses de vos fichiers js et css : vous avez noté leur adresse à l'étape 4
En bleu, les adresses de vos propres photos qui défileront
En vert, les titres de votre slideshow
Retour à la page d'accueil
Voir Sample 2
Etape 1 :
Allez sur NoobSlide
Tout en bas de la page, cliquez sur Download
Vous venez d'enregistrez un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers...
Etape 2 :
Dans l'administration de votre blog, Documents - Autres Fichiers :
- créez un répertoire Noobslide
- uploadez-y les fichiers :
- thumb_invisible.gif
- thumbs_mask.gif
- notez leur adresse
Sur votre PC :
- ouvrez le bloc-note
- appelez le fichier style.css
- modifiez-y les adresses des fichiers :
- thumb_invisible.gif
- thumbs_mask.gif
- enregistrez le fichier sous le même nom
Dans l'administration de votre blog, Documents - Autres Fichiers - répertoire NoobSlide :
- enregistrez les fichiers :
- style.css
- _mootools.js
- _class.noobSlide.js
- web.css
- notez leur adresse
Lors de la conception de ce slideshow, en HTML, collez
<head>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_mootools.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_class.noobSlide.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 2 (transition: Bounce.easeOut)
var hs2 = new noobSlide({
box: $('box2'),
items: [1,2,3,4,5,6,7,8],
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
buttons: {
previous: $('prev1'),
play: $('play1'),
stop: $('stop1'),
next: $('next1')
}
});
//more "previous" and "next" buttons
hs8.addActionButtons('previous',$ES('.prev','box8'));
hs8.addActionButtons('next',$ES('.next','box8'));
//more handle buttons
var handles8_more = $ES('span','handles8_more');
hs8.addHandleButtons(handles8_more);
//
hs8.walk(0)
});
</script>
</head>
<body>
<div id="cont">
<h1>noobSlide - mootools</h1>
<!-- SAMPLE 2 -->
<h2>Sample 2</h2>
<div class="sample">
<div class="mask2">
<div id="box2">
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img1.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img2.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img3.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img4.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img5.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img6.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img7.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img8.jpg" alt="Photo" /></span>
</div>
</div>
<p class="buttons">
<span id="prev1"><< Previous</span>
<span id="play1">Play ></span>
<span id="stop1">Stop</span>
<span id="next1">Next >></span>
</p>
</div>
</div>
</body>
</html>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_mootools.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_class.noobSlide.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 2 (transition: Bounce.easeOut)
var hs2 = new noobSlide({
box: $('box2'),
items: [1,2,3,4,5,6,7,8],
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
buttons: {
previous: $('prev1'),
play: $('play1'),
stop: $('stop1'),
next: $('next1')
}
});
//more "previous" and "next" buttons
hs8.addActionButtons('previous',$ES('.prev','box8'));
hs8.addActionButtons('next',$ES('.next','box8'));
//more handle buttons
var handles8_more = $ES('span','handles8_more');
hs8.addHandleButtons(handles8_more);
//
hs8.walk(0)
});
</script>
</head>
<body>
<div id="cont">
<h1>noobSlide - mootools</h1>
<!-- SAMPLE 2 -->
<h2>Sample 2</h2>
<div class="sample">
<div class="mask2">
<div id="box2">
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img1.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img2.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img3.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img4.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img5.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img6.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img7.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img8.jpg" alt="Photo" /></span>
</div>
</div>
<p class="buttons">
<span id="prev1"><< Previous</span>
<span id="play1">Play ></span>
<span id="stop1">Stop</span>
<span id="next1">Next >></span>
</p>
</div>
</div>
</body>
</html>
Vous modifiez :
En rouge, les adresses de vos fichiers js et css : vous avez noté leur adresse à l'étape 4
En bleu, les adresses de vos propres photos qui défileront
En vert, les titres de votre slideshow
Commentaires
Belle journée et mille BiZouX du pays de Râ 
@nne marie commentaire n° : 1 posté par : soleil51 (site web) le: 14/05/2008 10:37:43
(site web) le: 14/05/2008 10:37:43 Merci pour ton aide toujours aussi précieuse
commentaire n° : 2 posté par : Lmvie (site web) le: 14/05/2008 17:10:52
je passais pour un coucou amical.
Bonne soirée Anna
Bonne soirée Anna
commentaire n° : 3 posté par : miriel 
(site web) le: 14/05/2008 21:07:45
(site web) le: 14/05/2008 21:07:45 
Articles les plus populaires
Publicité
Présentation
: Les ficelles d Anna K.
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
Recherche Rapide Sur le Site
Déco Halloween
Déco Automne
Dernières Astuces
-
Ajouter un bouton avec flux RSS sur votre blog
Sur Over-Blog, vous avez déjà le module Syndication qui peut-être utilisé pour communiquer vos...
-
Privilège - Ajouter un outil de recherche sur votre blog - Rollyo
Rollyo vous offre la possibilité de rechercher le contenu d'une liste définie de sites Web, vous...
-
Localiser vos visiteurs
Un nouveau service pour localiser vos visiteurs : GLOBETRACKR Inscrivez-vous, en cliquant...
-
Design 28 - Beige nounours - largeur fixe
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel...
-
Privilège - Installer une icône avec le nombre de liens Technorati
Technorati recense tous les liens qui pointent vers votre blog. Vous copiez ce code en...
-
Installer une radio en pop up
Allez sur GOODINTERNET J'ai un peu retravaillé le code pour qu'il puisse s'installer sur...
-
Privilège - Un outil de vote pour vos articles
Un outil de vote pour article qui me semble assez pertinent. Allez sur OUTBRAIN Cliquez...
-
Privilège - Créer un carroussel d'images -Mootools
Un exemple : ...
-
Enlever les fonds d'origine dans le Design Over-Blog
AVANT TOUTES ACTIONS : Dans Design, vérifiez que vous avez bien sélectionné le...
-
Privilège - Créer un jukebox de vidéos
"Le Dailymotion Jukebox est un outil vous permettant de diffuser vos vidéos et celles que vous...
Commentaires
-
07/10/2008 20:23:43Over-Blog : Les premiers pas en V2tiffany
-
07/10/2008 17:21:18Design 28 - Beige nounours - largeur fixehouba
-
07/10/2008 16:23:46Privilège - Créer un carroussel d'images -MootoolsChristi@ne
-
07/10/2008 16:23:28V2 - Récapitulatif : changer les puces du module Articles récentsboobalechat
-
07/10/2008 16:08:48Protéger vos images du voltiffany
Publicité
| Les Ficelles sur votre blog | Gardez le contact | L'Univers des Ficelles | Utilitaires | Générateurs | |
    
|
|||||
