publié dans : Tous Blogs - Effets sur Images et documents
NoobSlide est un script qui vous permet de faire défiler vos images. Ce modèle défile de bas en haut et contient des textes.
Voir Sample 5
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
<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 5 (mode: vertical, using "onWalk" )
var info5 = $('info5').setOpacity(0.5);
var sampleObjectItems =[
{title:'Morbi elementum', autor:'Lorem', date:'5 Jun 2007', link:'http://www.link1.com'},
{title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
{title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
{title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
{title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
{title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
{title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
{title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
];
var hs5 = new noobSlide({
mode: 'vertical',
box: $('box5'),
size: 180,
items: sampleObjectItems,
buttons: {
previous: $('prev5'),
play: $('play5'),
stop: $('stop5'),
next: $('next5')
},
onWalk: function(currentItem){
info5.empty();
new Element('h4').setHTML('<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
new Element('p').setHTML('<b>Autor</b>: '+currentItem.autor+' <b>Date</b>: '+currentItem.date).inject(info5);
}
});
//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 5 -->
<h2>Sample 5</h2>
<div class="sample">
<div class="mask2">
<div id="box5">
<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 id="info5" class="info"></div>
</div>
<p class="buttons">
<span id="prev5"><< Previous</span>
<span id="play5">Play ></span>
<span id="stop5">Stop</span>
<span id="next5">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 et textes de votre slideshow
Retour à la page d'accueil
Voir Sample 5
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 5 (mode: vertical, using "onWalk" )
var info5 = $('info5').setOpacity(0.5);
var sampleObjectItems =[
{title:'Morbi elementum', autor:'Lorem', date:'5 Jun 2007', link:'http://www.link1.com'},
{title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
{title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
{title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
{title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
{title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
{title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
{title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
];
var hs5 = new noobSlide({
mode: 'vertical',
box: $('box5'),
size: 180,
items: sampleObjectItems,
buttons: {
previous: $('prev5'),
play: $('play5'),
stop: $('stop5'),
next: $('next5')
},
onWalk: function(currentItem){
info5.empty();
new Element('h4').setHTML('<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
new Element('p').setHTML('<b>Autor</b>: '+currentItem.autor+' <b>Date</b>: '+currentItem.date).inject(info5);
}
});
//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 5 -->
<h2>Sample 5</h2>
<div class="sample">
<div class="mask2">
<div id="box5">
<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 id="info5" class="info"></div>
</div>
<p class="buttons">
<span id="prev5"><< Previous</span>
<span id="play5">Play ></span>
<span id="stop5">Stop</span>
<span id="next5">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 et textes de votre slideshow
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...
Publicité
| Les Ficelles sur votre blog | Gardez le contact | L'Univers des Ficelles | Utilitaires | Générateurs | |
    
|
|||||
Commentaires