Ajouter un mode panoramique à la YouTube sur son blog.

  

YouTube l’a fait, alors pourquoi pas n’importe quel webmaster !?

Je parle évidemment du mode “large” des vidéos sur son site. Vous aussi, installez simplement cela avec un peu de CSS et de script…

Lire la suite

   J’en ai profité pou installé ce mode sur ce blog depuis une semaine, et ainsi offrir une lecture plus confortable grâce à plus de largeur et aussi sans sidebar pour ne pas être gêné par les infos s’y trouvant.

   Dans l’idée, cette fonction agit comme un “a:hover” actionné par un bouton. On a juste à définir dans un script les éléments qui doivent intéragir et à l’instar d'u “a:hover” créer une ligne de CSS du genre “[nom_de_l’élément].wide”.

Tout d’abord le script à placer avant la balise “/head”:

   <script type='text/javascript'>
   $(document).ready(function() {
   $(“#wideView”).click(function() {
   $(“ [nom_de_l’"élément] ”).toggleClass(“wide”);
   $(this).toggleClass(“wide”);
   });
   });
   </script>

Dans le CSS, pour les éléments qui doivent changer d’état, ajouter  une ligne comme ce qui suit:

   # [nom_de_l’élément].wide {

   /*----css----*/

   }

On va maintenant créer un bouton animé avec des sprites  pour activer/désactiver l’effet:

   /* ----WideView ---- */

   .toolbox { float:right; margin-left:10px;}
   .toolbox a { width:34px; height:23px; float:right; }
   #wideView {background: transparent url(" _image_bouton_sprite”) no-repeat scroll 0px 0px; }
   #wideView:hover { background-position:-35px 0px; }
   #wideView.wide {background-position:0px -23px; }
   #wideView.wide:hover { background-position:-35px -23px; }

Sauvez et hébergez cette image: 

Puis remplacez l’url de l’image dans le css.

Pour finir, mettez un bouton où vous le souhaitez avec simplement ce code:

   <div class='toolbox'>Panoramique:<a href='#' id='wideView'/></div>