BkgSlider

Matt — Thu, 24 Feb 2011 20:26:34 +0000

BkgSlider est un plugin jQuery qui vous permet d’avoir une galerie d’image pour vos background CSS.

Démo

Vous pouvez en voir un exemple sur la page de démonstration.

Utilisation

Pour utiliser BkgSlide, rien de plus simple : il vous suffit d’inclure la librairie jQuery et le plugin BkgSlide dans votre page et d’instancier le plugin avec ses options.

Il faut ensuite initialiser le pickwhip en lui indiquant une url où trouver ses images :

$(document).ready(function(){
	$.pickWhip.init({
		imageDir: 'whipImg/'
	});
});

Si vous souhaitez déplacer les images du pickwhip, vous pouvez remplacer ‘whipImg/’ par leur emplacement actuel, sinon vous pouvez juste lancer $.pickWhip.init() sans paramètre.

Il ne reste plus qu’à définir les cibles et les options de chaque pickwhip, comme dans l’exemple ci-dessous :

$('#src1').pickWhip('.dropzone, .dropzone2',{
	unlinkedHoverClass	: 'whipHover1',
	linkedHoverClass	: 'whipHoverLinked1',
	linkList		: Array( $('#drop2') ),
	showLinks		: true,
	linkedClass		: 'whipLinked1',
	unlinkedClass		: 'whipUnlinked1',
	callback		: function(source, target){
		alert("The link between the source " + source.attr('id') + " and the target " + target.attr('id') + " has been updated.";
	}
});

Ce code attribue un pickWhip à l’élément dont l’id est ‘src1′.

Le premier paramètre passé à la méthode pickWhip() est une String à faire interpréter par le sélecteur jQuery.

Ici, on demande à ce que les éléments de classe ‘dropzone’ et de classe ‘dropzone2′ soient réactifs à ce pickwhip.

Le second paramètre est une liste d’options au format json…

Options disponibles :

linkedHoverClass : classe css à donner à un élément cible déjà lié à cette source lors de son survol.
Type : String
par défaut: linkedWhipHoverTarget
unlinkedHoverClass : classe css à donner à un élément cible non lié à cette source lors de son survol.
Type : String
Par défaut: unlinkedWhipHoverTarget
linkedClass : classe css à donner à un élément cible déjà lié à cette source lorsque showLink est actif.
Type : String
Par défaut : linkedWhipTarget
unlinkedClasss : classe css à donner à un élément cible non lié à cette source lorsque showLink est actif.
Type : String
Par défaut : unlinkedWhipTarget
showLinks : appliquer les classes linkedClass/unlinkedClass aux cibles lorsque l’utilisateur active le pickwhip.
Type : Boolean
Par défaut : true
linkList : liste d’éléments jQuery déjà associés à cette source ou de tableaux associatifs (source, cible) .
Type : Array( [jQuery Object target], [Array( jQuery Object source, jQuery Object target)], [...] )
callback : fonction à executer après l’association
Type : Function
Note : cette fonction peut prendre 2 paramètres, qui seront respectivement la source et la cible liés.

L’option linkList s’avérera très utile pour initialiser l’état actuel des associations. Vous pouvez lui fournir des cibles pour ce pickwhip, la source du pickwhip leur sera associée. Mais vous pouvez aussi fournir un tableau d’association de type Array(source, cible), car ce n’est pas forcément à la source du pickwhip elle même que vous souhaitez associer la cible. Par exemple, vous voulez peut-être associer la cible à l’élément parent du pickwhip…ou exploiter plus directement les associations faites dans votre base de données !

Pour connaitre à tout moment l’état des associations, vous pouvez interroger la liste globale $.pickWhip.allLinks comme dans l’exemple ci-dessous :

function showLinks(){
	var links = 'Current associations are :<\/p>
';
	for (var i=0; i<$.pickWhip.allLinks.length; i++) {
		for (var j=0; j<$.pickWhip.allLinks[i].length; j++) {
			links += 'source : '+$.pickWhip.allLinks[i][j][0].html()+' _ dest : '+$.pickWhip.allLinks[i][j][1].html()+'<\/li>';
		}
	}
	links +='<\/ul>';
	$('#links').html(links);
}

Préchargement d’images avec jQuery

Matt — Fri, 23 May 2008 19:54:01 +0000

Pour ceux qui ne connaîtraient pas encore, jquery est une librairie javascript très puissante qui permet de faire beaucoup de choses en peu de lignes de code. Elle porte fièrement sa devise de « code less, do more », qui est tout à fait appropriée !

Par ailleurs, jquery permet de développer des plugins de manière assez simple, afin de rajouter des fonctionnalités au module de base. Mais nous y reviendrons une autre fois…

Le sujet du jour est le préchargement d’images, un concept relativement basique et régulièrement utile.

Voici une méthode simple pour l’effectuer :

$.preloadImages = function(arguments)
{
    for (var i = 0; i < arguments.length; i++) {
        $('').attr('src', arguments[i]);
    }
}

var imagesToPreload = Array(\
    'image1.gif',\
    '/repertoire/des/images/image2.gif',\
    'http://www.example.com/repertoire/image3.gif');

$.preloadImages(imagesToPreload);

Notes:

$ est un raccourci pour l’objet de base jQuery. En cas de conflit (par exemple avec Prototype, une autre lib assez répandue), il est possible de le redéfinir.
imagesToPreload contient une liste (Array) d’images sous forme de texte (String).
Les \ en fin de lignes permettent de continuer à la ligne du dessous en rendant le retour à la ligne invisible au parser javascript, et donc d’avoir une liste d’images plus agréable à lire si l’on aligne verticalement le début du nom de chaque image.
La fonction preloadImages() prend chacun des arguments donnés par le tableau (Array) et crée à la volée une balise html puis donne à l’attribut « src » de cette balise le nom de l’image. Du coup, l’image est appelée et chargée dans le cache du navigateur.
Comme on n’insère pas cet objet dans le DOM, rien n’est affiché.

Et voila. C’est simple et efficace, à l’image de jQuery !

l'indicible blog » Javascript

BkgSlider

Démo

Utilisation

Options disponibles :

Préchargement d’images avec jQuery