lbsquat » Tutoriels http://blog.lbsquat.com Graphisme web geek life... Wed, 28 Jul 2010 10:35:46 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Créer une galerie pour votre portfolio grâce à jQuery http://blog.lbsquat.com/creer-une-galerie-pour-votre-portfolio-grace-a-jquery http://blog.lbsquat.com/creer-une-galerie-pour-votre-portfolio-grace-a-jquery#comments Thu, 08 Apr 2010 08:20:19 +0000 lbsquat http://blog.lbsquat.com/?p=64 Voici un petit tutoriel enfin plutôt une compilation de différentes ressources jQuery qui va vous permettre de mettre en place un slider qui contiendra différentes vignettes animées qui laisseront apparaitre les informations que vous souhaiterez, y compris un bouton pour pouvoir afficher une image en grand, visible grâce à une lightbox.
Bien entendu tout est possible via les css, cette présentation n'est qu'un exemple.


Pour ce tutoriel vous aurez besoin de 3 choses:

Et puis aussi un éditeur de texte, perso je vous conseil quand même Notepad++

Dans l'archive que je vous propose en téléchargement il y a tout ce dont vous avez besoin il vous suffit donc de copier les différents dossiers / fichiers / images de la même façon que sur l'exemple mais faites bien attention aux urls qui appellent vos fichiers.

Démonstration Download

Voici pour les explications:

Le slider

Nous allons commencer par mettre en place le slider.

Pour cela ouvrez votre fichier index ou header (selon votre cas) et dans la balise head nous allons appeler les fichiers néccessaire au bon fonctionnement et copiez aussi le dossier images_slider à la racine de votre site.

la bibliothèque jQuery

  1. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>

les fichiers css et javascript

  1. <!--slideshow-->
  2. <link href="./slideshow.css" rel="stylesheet" type="text/css" />
  3. <script type="text/javascript" src="./js/slideshow.js"></script>

Et voilà vous avez les fichiers nécessaire pour afficher le slider.

Maintenant ouvrez le fichier ou vous voulez placer votre slider, et copier ceci

  1. <!-- Slideshow HTML -->
  2.   <div id="slideshow">
  3.     <div id="slidesContainer"> 
  4. <div class="slide">
  5.         <h2>Titre</h2>
  6.         <p>Le texte que vous voulez afficher</p>
  7.     <div class="boxgrid_link">
  8.     <a rel="clearbox[ gallery=photos,,slideshowtime=10 ]" href="./galerie/leaf.jpg" title="charger l'image">visualiser</a>
  9.     </div><!--/boxgrid_link-->
  10. </div><!--/slide-->
  11.                
  12.     </div><!--/slidescontainer-->
  13.   </div><!--/slideshow-->
  14. <!-- Slideshow HTML -->

L'attribut rel va servir dans l'appel de la lightbox et ce qui se trouve entre les crochets sera pour créer le diaporama mais on verra ça plus tard.

Là vous avez une miniature pour en ajouter il suffit de copier la div="slide" et tout ce qui est dedans et de coller en dessous ou au dessus de celle présente.

  1. <div class="slide">
  2.         <h2>Titre</h2>
  3.         <p>Le texte que vous voulez afficher</p>
  4.     <div class="boxgrid_link">
  5.     <a rel="clearbox[ gallery=webdesign,,slideshowtime=10 ]" href="./galerie/leaf.jpg" title="charger l'image">visualiser</a>
  6.     </div><!--/boxgrid_link-->
  7. </div><!--/slide-->

Maintenant on va passer au css pour donner forme à tout ça.
Créer une nouvelle feuille css et enregistré la à la racine de votre site en la nommant slideshow.css et collé ça dedans.

  1. #slideshow {
  2.         margin: 10px auto 0 auto;
  3.         width: 767px;
  4.         height: 365px;
  5.         background: transparent;
  6.         position: relative;
  7.         }
  8. #slideshow #slidesContainer {
  9.   margin: 0 auto;
  10.   padding: 0;
  11.   width: 687px;
  12.   height: 365px;
  13.   overflow: auto;
  14.   position: relative;
  15.         }
  16. #slideshow #slidesContainer .slide {
  17.   margin: 0 auto;
  18.   padding: 0;
  19.   width: 667px;
  20.   height: 365px;
  21.         }
  22. .slide img {
  23.         float: right;
  24.         margin: 0;
  25.         border: none;
  26.         }
  27. .slide p {
  28.         line-height: 1.5em;
  29.         margin: 0;
  30.         }
  31. .slide a {
  32.         color: #000;
  33.         font-weight: bold;
  34.         text-decoration: none;
  35.         padding: 0 0 2px 0;
  36.         border-bottom: 1px dotted #181818;
  37.         }
  38. .control {
  39.        display: block;
  40.        width: 39px;
  41.        height: 270px;
  42.        text-indent: -9999px;
  43.        position: absolute;
  44.        cursor: pointer;
  45.         }
  46. #navDiapo{
  47.         display: block;
  48.         width: 15px;
  49.         height: 16px;
  50.         position: absolute;
  51.         right: 25px;
  52.         bottom: 10px;
  53.         cursor: pointer;
  54.         }
  55. #leftControl {
  56.   top: 0;
  57.   left: 0;
  58.   background: transparent url(images_slideshow/control_left.png) no-repeat 0 0;
  59.         }
  60. #rightControl {
  61.   top: 0;
  62.   right: 0;
  63.   background: transparent url(images_slideshow/control_right.png) no-repeat 0 0;
  64.         }

Et voilà votre Slider est fait !!

Toute la documentation et les options disponible ici

Animation sur image

Maintenant on va donner un petit effet sympa à vos miniatures qui permettra de dévoiler les divers informations.
Dans votre fichier index on va appeler (toujours dans la balise head) le fichier boxgrid.css (on va voir ça juste en dessous) et mettre le javascript nécessaire au bon fonctionnement.

  1. <!--sliding boxes-->
  2. <link rel="stylesheet" type="text/css" href="./boxgrid.css" />
  3. <script type="text/javascript">
  4.                         $(document).ready(function(){
  5.                                 //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
  6.                                 //Horizontal Sliding
  7.                                 $('.boxgrid.slideright').hover(function(){
  8.                                         $(".cover", this).stop().animate({left:'180px'},{queue:false,duration:300});
  9.                                 }, function() {
  10.                                         $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
  11.                                 });
  12.                         });
  13. </script>

Et pour le css il vous suffit de coller ça dans une nouvelle feuille nommée boxgrid.css et enregistrée la à la racine de votre site.

  1. .boxgrid{
  2.         width: 180px;
  3.         height: 90px;
  4.         font-family: Verdana, sans-serif;       
  5.         margin: 4px 22px;
  6.         float:left;
  7.         background: #f3f3f3;
  8.         border: solid 1px #aaa;
  9.         overflow: hidden;
  10.         position: relative;
  11.         }
  12. .boxgrid h3 {
  13.         font-size: 12px;
  14.         font-weight: bold;
  15.         padding: 2px 2px 0 2px;
  16.         }
  17. .boxgrid  img{
  18.         position: absolute;
  19.         top: 0;
  20.         left: 0;
  21.         border: 0;
  22.         }
  23. .boxgrid p{
  24.         font-size: 10px;
  25.         padding: 2px 2px 0 2px;
  26.         margin: 0 0 2px 0;
  27.         color:#404040;
  28.         }
  29. .boxgrid_link {
  30.         margin: 0 5px 0 0;
  31.         }
  32. .boxgrid a {
  33.         width: 15px;
  34.         height: 13px;
  35.         display: block;
  36.         text-indent: -9999px;
  37.         text-decoration: none;
  38.         float: right;
  39.         background: transparent url("images_slider/preview.png") no-repeat top;
  40.         }
Toute la documentation et les options disponible ici

Et voilà l'animation est bonne !!

L'affichage de vos images via clearbox3

Cela va vous permettre d'afficher votre image en grand et en plus en toute beauté !! Dans cette galerie on va opter pour un diaporama histoire d'avoir une navigation plus sympa.
Clearbox3 est pour moi la meilleur des lightbox (que je connaisse) pleins d'options sont disponible et très pratique, vous verrez !!

Copiez le dossier clearbox ainsi que le fichier clearbox.js dans votre dossier js.

Dans votre fichier index et entre la balise head

  1. <!--clearbox-->
  2. <script src="./js/clearbox.js" type="text/javascript"></script>
  3. <script src="./js/clearbox.js?config=myconfig" type="text/javascript"></script>

Pour en revenir à la fonction diaporama, en fait il suffit donc de rajouter l'attribut

  1. rel=""

Puis clearbox

  1. rel="clearbox"

Définir un nom pour la galerie ce qui aura pour effet d'afficher toutes les images comportant ce nom de galerie

  1. rel="clearbox[ gallery=photos ]"

Et maintenant le timing du diaporama, soit 10 secondes

  1. rel="clearbox[ gallery=photos,,slideshowtime=10 ]"

Et voilà pour l'affichage de vos images.

Toute la documentation et les options disponible ici

Bon bah c'est fini !!

Démonstration Download

J'espère que tout est assez clair si toutefois vous avez des soucis n'hésitez pas à le signaler dans les commentaires ;)

]]> http://blog.lbsquat.com/creer-une-galerie-pour-votre-portfolio-grace-a-jquery/feed 3 Tutoriels Photoshop #3: 14 tutos divers http://blog.lbsquat.com/tutoriels-photoshop-3-14-tutos-divers http://blog.lbsquat.com/tutoriels-photoshop-3-14-tutos-divers#comments Thu, 31 Dec 2009 15:33:02 +0000 lbsquat http://blog.lbsquat.com/?p=38 Et pour finir cette année voilà une nouvelle sélection de 14 tutoriels divers pour votre Photoshop.
Des jeux de lumière, ajouter de la verdure sur une facade d'immeuble ou autre, un texte en feu, réaliser une boite ou bien un notepad, un portrait avec des lettres, etc...
Eclatez-vous bien ^^


Easy star light by abduzeedo
starlight

create classic ivy running up a building by Tomasz Opasinski
ivy

create a trendy typographic poster design by spoongraphics
typographic_poster

how to create an impressive looking text effect by adobetutorialz
text_effect

3d wooden box by Asher Abbasi
3d_wooden_box

how to create a clean 3D notepad by Rory
notepad_small

create dynamic distortion effects by computer arts
distortion_effects

golden phone by alfoart
distortion_effects

how to make a dark post apocalyptic city illustration by Mikolaj Dobrucki
dark_post

glowing neon effects by adobetutorialz
glowing_neon

text on fire effect by 10steps
text_fire

add fantastic color 3D text by Wojciech Pijecki
fantastic_color

create a retro cosmic design by James White
cosmic_retro

make yourself an amazing typographic portrait by 10steps
typo_face

]]> http://blog.lbsquat.com/tutoriels-photoshop-3-14-tutos-divers/feed 0 Tutoriels Photoshop #2: 15 tutos pour réaliser un design de site http://blog.lbsquat.com/tutoriels-photoshop-3-6-superbes-tutos-de-site-web http://blog.lbsquat.com/tutoriels-photoshop-3-6-superbes-tutos-de-site-web#comments Thu, 17 Dec 2009 12:31:48 +0000 lbsquat http://blog.lbsquat.com/?p=43 Voici une sélection de différents tutoriels Photoshop sur la conception d'un design de site web.

How to Make a Highly-Textured Site Layout in Photoshop
wood_website

Create a Watercolor-Themed Website Design with Photoshop
watercolor_webdesign

Design an amazing 3d hosting layout
grafpedia

Create a Promotional iPhone App Site in Photoshop
i_love_my_apps

Cloud9 Web Design Layout
clouds_design

Design a Clean Portfolio Website Layout in Photoshop
ourtuts

How to Make a Creative Blog Layout
grafpedia_blog

How To Create a Clean and Colorful Web Layout – Photoshop Tutorial
griminati

How to Create a Unique Wordpress Theme
grafpedia_wptheme

Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!
manilla

Wordpress Layout #6
wordpress

How to Create a Unique Colorful Site Layout
tourwebsite

Theatre: design an elegant, dark portfolio site
tutsarena

Business Layout #6
yourbusiness

Design a Clean and Colorful Portfolio in Photoshop
osdesigner

]]> http://blog.lbsquat.com/tutoriels-photoshop-3-6-superbes-tutos-de-site-web/feed 0 Tutoriels Photoshop #1: 8 tutos divers http://blog.lbsquat.com/tutoriels-photoshop-1-8-tutos-divers http://blog.lbsquat.com/tutoriels-photoshop-1-8-tutos-divers#comments Sat, 21 Nov 2009 09:34:37 +0000 lbsquat http://blog.lbsquat.com/?p=26 Et hop... première sélection de tutoriels sur Photoshop, amusez-vous bien!!

constant_slip

create-a-funky-perspective-of-a-model-riding-digital-volume

realistic_3d_baseball_cap

extinction

colorful_light_effect

super_easy_neon_style

dazzling_dance

anime_look

]]> http://blog.lbsquat.com/tutoriels-photoshop-1-8-tutos-divers/feed 3