Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
Publié dans : Effets d'Images et diaporamas - Tous blogs
Très jolie galerie réalisée à l'aide de Galleria : des miniatures sur lesquelles on clique pour voir l'image en grande taille
Voir Galleria
Première étape :
A - Allez sur Galleria
Cliquez sur Download - Galleria 1.0 / 16kb
Une page de votre navigateur s'ouvre avec ce fichier
Sur votre navigateur, vous faîtes :
Cliquez sur Galleria 1.0 CSS
Une page de votre navigateur s'ouvre avec ce fichier
Sur votre navigateur, vous faîtes :
Cliquez sur 1. Download the latest jQuery release
Vous arrivez sur le site JQuery
Vous cliquez sur 1.2.6 (Release Notes) Minified
Vous venez d'enregistrer le fichier jquery-1.2.6.min.js
Deuxième étape :
Dans l'administration de votre blog - Documents - Autres Fichiers :
Lors de la conception de votre galerie, vous collez en HTML
Vous remplacez les adresses en rouge par vos propres adresses, notées à la 2ème étape.
Si vous êtes sur Over-Blog, vous pouvez utiliser mes adresses.
Ensuite, toujours en HTML, vous collez
Il s'agit du CSS de votre galerie, vous pouvez le personnaliser : taille, marges, bordures...
Et enfin, la galerie en elle même, toujours en HTML
En bleu, les adresses des images
En vert, le texte qui apparaît dessous
Voir Galleria
Première étape :
A - Allez sur Galleria
Cliquez sur Download - Galleria 1.0 / 16kb
Une page de votre navigateur s'ouvre avec ce fichier
Sur votre navigateur, vous faîtes :
- Edition - Tout sélectionner
- Edition - Copier
- vous ouvrez votre bloc-notes
- vous faîtes :
- Edition - Coller
- vous enregistrez sous jquery.galleria.js
Cliquez sur Galleria 1.0 CSS
Une page de votre navigateur s'ouvre avec ce fichier
Sur votre navigateur, vous faîtes :
- Edition - Tout sélectionner
- Edition - Copier
- vous ouvrez votre bloc-notes
- vous faîtes :
- Edition - Coller
- vous enregistrez sous galleria.css
Cliquez sur 1. Download the latest jQuery release
Vous arrivez sur le site JQuery
Vous cliquez sur 1.2.6 (Release Notes) Minified
Vous venez d'enregistrer le fichier jquery-1.2.6.min.js
Deuxième étape :
Dans l'administration de votre blog - Documents - Autres Fichiers :
- vous créez un répertoire nommé : Galleria
- vous y sauvegardez les fichiers :
- galleria.css
- jquery-1.2.6.min.js
- jquery.galleria.js
- vous notez leur adresse
Lors de la conception de votre galerie, vous collez en HTML
<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/galleria/galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/galleria/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/galleria/jquery.galleria.js"></script>
<script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>
<script type="text/javascript">
jQuery(function($) {
$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to
maintain degradability
$('ul.gallery_demo').galleria({
history : true, // activates the history object for bookmarking, back-button
etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects
for demonstration purposes
// fade in the image & caption
if(! ($.browser.mozilla &&
navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
image.css('display','none').fadeIn(1000); }
caption.css('display','none').fadeIn(1000);
// fetch the thumbnail container
var _li = thumb.parents('li');
// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);
// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');
// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here
// fetch the thumbnail container
var _li = thumb.parents('li');
// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';
// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() {
_li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});
</script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/galleria/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/galleria/jquery.galleria.js"></script>
<script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>
<script type="text/javascript">
jQuery(function($) {
$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to
maintain degradability
$('ul.gallery_demo').galleria({
history : true, // activates the history object for bookmarking, back-button
etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects
for demonstration purposes
// fade in the image & caption
if(! ($.browser.mozilla &&
navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
image.css('display','none').fadeIn(1000); }
caption.css('display','none').fadeIn(1000);
// fetch the thumbnail container
var _li = thumb.parents('li');
// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);
// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');
// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here
// fetch the thumbnail container
var _li = thumb.parents('li');
// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';
// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() {
_li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});
</script>
Vous remplacez les adresses en rouge par vos propres adresses, notées à la 2ème étape.
Si vous êtes sur Over-Blog, vous pouvez utiliser mes adresses.
Ensuite, toujours en HTML, vous collez
<style media="screen,projection" type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140%
georgia,serif;}
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{font-style:italic;color:#887;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
#main_image img{margin-bottom:10px;}
.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif; letter-spacing:3px;text-transform:uppercase;}
.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}
</style>
/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140%
georgia,serif;}
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{font-style:italic;color:#887;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
#main_image img{margin-bottom:10px;}
.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif; letter-spacing:3px;text-transform:uppercase;}
.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}
</style>
Il s'agit du CSS de votre galerie, vous pouvez le personnaliser : taille, marges, bordures...
Et enfin, la galerie en elle même, toujours en HTML
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/at_symbol.jpg"
alt="Flowing Rock" title="Flowing Rock Caption"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/datenscheiben.jpg"
alt="Stones" title="Stones - from Apple images"></li>
<li class="active"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/farbraum.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/fries.jpg" alt="Ladybug"
title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/kunst.jpg" alt="Lightning"
title="Black & White"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/platsch.jpg" alt="Lotus"
title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/raetsel_1.jpg"
alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus
pellentesque."></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/raetsel_2.jpg" alt="Pier"
title="Proin erat nisi"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/stimme_von_oben.jpg"
alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#"
onclick="$.galleria.next(); return false;">next »</a></p>
</div>
<ul class="gallery_demo_unstyled">
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/at_symbol.jpg"
alt="Flowing Rock" title="Flowing Rock Caption"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/datenscheiben.jpg"
alt="Stones" title="Stones - from Apple images"></li>
<li class="active"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/farbraum.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/fries.jpg" alt="Ladybug"
title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/kunst.jpg" alt="Lightning"
title="Black & White"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/platsch.jpg" alt="Lotus"
title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/raetsel_1.jpg"
alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus
pellentesque."></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/raetsel_2.jpg" alt="Pier"
title="Proin erat nisi"></li>
<li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/stimme_von_oben.jpg"
alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#"
onclick="$.galleria.next(); return false;">next »</a></p>
</div>
En bleu, les adresses des images
En vert, le texte qui apparaît dessous
MàJ:Janvier 2009
Commentaires
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
Sommaires
Sommaires Pour les Blogs OverBlog
- Premiers pas en V2
- Gestion quotidienne
- Ecritures dans les modules
- Ecritures dans les articles et pages
- Ecritures dans les fenêtres et albums photos
- Modifier les Fonds
- Placer des images
- Ajouter, déplacer ou masquer
- Design complet et Idées de Mise en page
- Aspect des Ascenseurs, Puces et Curseurs
- Cadres,lignes et bordures
- Effets d'Ecriture et de Texte
- Effets d'images et Diaporamas
- Créer et transformer des Images
- Placer des documents
- Musique, son, vidéo et télé
- Cadres, tableaux, lignes
- Liens, listes et menus
- Interactivité et gadgets
- Indicateurs,compteurs et Protection
- référencement, communautés et flux RSS
Dernières Astuces
- Ouvrir un texte au clic de la souris
- Fonction Lire la suite
- Espacer les lettres des mots dans un article
- Espacer les lettres de tous les mots de votre blog
- Souligner un mot ou une phrase en pointillé
- Changer plusieurs fois la couleur des liens au survol de la souris - Privilège
- Créer des infobulles avec Prototip - Privilège
- Créer un pop up avec message
- Changer un texte au passage de la souris
- Créer des textes animés en flash
Commentaires
-
10/07/2009 18:39:13Créer votre signature manuscriteCerise violette
-
09/07/2009 22:19:44Date au-dessus du titre de l'articlesaygomodo
-
09/07/2009 21:31:47Espacer les lettres des mots dans un articlechaton
-
09/07/2009 15:38:10Changer plusieurs fois la couleur des liens au survol de la souris - PrivilègeMystik-Angel
-
09/07/2009 15:37:15Espacer les lettres des mots dans un articleMystik-Angel
Publicité
Coin Films
Coin Jeux Vidéos
Coin Loisirs Exterieurs
| Articles les plus populaires | L'Univers des Ficelles |
|
|
bonne journée gros bisous :)
tu colles les codes en HTML à la suite l'un de l'autre dans un article (billet). De la même façon que pour ta page
http://www.speleocalcaires.com/Speleo.html
je vois que tu rafoles aussi du javascript pour mettre en valeur tes photos ;)
ton fichier CSS est appelé sous cette forme (adresse relative)