Quantcast
Channel: JQuery, PHP, html, design... // arnaud-k : un blog de geek » tutorial
Viewing all articles
Browse latest Browse all 12

Tutorial jQuery : ajouter une image de fond qui se redimensionne dynamiquement

0
0

Pour un retour en douceur des tutoriels, je te propose aujourd’hui un tuto pour ajouter une image de fond qui se redimensionne dynamiquement à un site web.

Pour faire cela, nous allons utiliser le plugin jQuery Backstretch.  Ce plugin est surtout utile pour faciliter la mise en place sur tous les navigateurs (et oui, cela change d’un navigateur à l’autre).

Comme pour les autres turoriels jQuery, j’ai préparé une démo.

Voir la démo du tutorial

Pour le code, cela va aller très vite. Tu prépares ta structure HTML, ton CSS. Ensuite tu ajoutes jQuery et le plugin jQuery Backstretch aux pages voulues :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>

Enfin, tu ajoutes le bout de code qui change tout : l’initialisation du plugin jQuery :

// initialisation du plugin jQuery
$.backstretch('http://blog.arnaud-k.fr/demos/jquery-backstretch/img/bg-3.jpg');

Et pour aller encore loin, j’ai ajouté, sur la démo, une liste déroulante qui permet de changer en live le fond. Tout d’abord, le select (avec, en valeur pour chaque option, le nom des images) :

<select name="change-bg" id="change-bg">
    <option value="bg-1">New York City</option>
    <option value="bg-2">Auckland</option>
    <option value="bg-3" selected="selected">Île de Waxholm (Suède)</option>
</select>

Il ne reste plus qu’à ajouter le listener pour le select :

$('#change-bg').change( function(){
	// changement du fond d'écran en fonction de la valeur du select
	$.backstretch('http://blog.arnaud-k.fr/demos/jquery-backstretch/img/'+$(this).val()+'.jpg');
});

Pour l’utilisation de ce style de design, il faut garder en tête l’optimisation des images de fond, il y a un compromis à trouver. En effet, il faut qu’elles soient suffisamment grandes pour ne pas qu’elles soient trop agrandies et suffisamment légères pour ne pas surcharger le site.

Pas encore de billet sur le même sujet !


Viewing all articles
Browse latest Browse all 12

Latest Images

Trending Articles





Latest Images