Diaporama simple avec JQuery, nouvelle version: jDiaporama !

Publié par Gui dans jQuery, Tutoriels

Facile

jQuery, css

téléchargez dès maintenant la toute dernière version de jDiaporama avec plein de nouveautés !

Vous avez été nombreux à commenter le tutoriel « Comment réaliser un diaporama simple avec JQuery« , alors le voici maintenant en version 2 !

J’ai essayé d’ajouter dans cette nouvelle version les différents manquements que vous souligniez dans le précédent tutoriel.

Voici donc les nouveautés de ce nouveau diaporama JQuery:

  • Nouvel aspect graphique
  • Contrôle du diaporama grâce aux touches directionnelles du clavier
  • Défilement automatique ou non
  • Gestion de la direction du diaporama (de gauche à droite ou inversement)
  • Pause par défaut possible
  • Arrêt du diaporama après un nombre défini de boucles
  • Affichage du titre
  • Affichage de la légende
  • Affichage d’un compteur (image actuelle sur nombre d’images)
  • Possibilité d’accéder à une image directement en cliquant sur les boutons ronds
  • Ajustement automatique en fonction de la taille des images du diaporama
  • Compatibilité sur tous les navigateurs

Préambule

Je ne vais pas revenir en détails sur la création de la partie HTML (celle-ci est n’a pas changé, c’est toujours aussi simple!), ni sur le CSS, mais me concentrer à vous expliquer le fonctionnement des nouveautés de cette version.

Si vous avez manqué le début, notamment sur la création d’un plugin pour JQuery, je vous invite à suivre le tutoriel original: Tutoriel: Réaliser un diaporama simple avec JQuery.

Déclaration des nouvelles options

var defaults = {
	auto: true, // Le diaporama est en mode automatique
	delay: 3, // La durée d'affichage est de 3 secondes
	animationSpeed: "normal", // La durée de transition est normale
	controls: true, // Les boutons de contrôle sont affichés par défaut
	keyboard: true, // La navigation au clavier est activée
	infos: true, // Les informations (légende, titre) sont affichées
	currentimage: true, // Le compteur d'image est affiché
	paused: false, // Le diaporama démarre automatiquement
	boucles: 0, // 0 = Illimité, le diapo ne s'arrêtera jamais
	sens: "right" // Le sens du défilement est vers la droite par défaut
	onrollover: true // Les infos ne s'affichent qu'au survol de la souris
};

Initialisation & variables

Nous allons voir ici dans un premier temps, comment initialiser notre script, en définissant quelques variables et en effectuant quelques actions.

Mais comme dit le proverbe, un joli code vaut mieux qu’un long discours !


// la variable diapo est un raccourci pour le diaporama courant
var diapo = $(this);
// Variable utilisé pour détecter la présence de la souris sur le diaporama
var mouseover = false;
// Orientation du défilement
var sens = options.sens;
var pause = false;
var width = 0;
var height = 0;
// Image par défaut (position 0)
var current_slide = 0;

// On encapsule notre liste (ul) dans un div avec une classe
diapo.wrap("<div class='jDiaporama'></div>");

var inter = ""; // Variable pour l'interval de temps

// Si le mode est défini sur "auto" et qu'il démarre automatiquement
if(options.auto && !options.paused)
// On lance le diaporama (défilement)
	inter = setInterval(function(){displayDiaporama(options)}, (options.delay*1000));

// On cache les autres images pour n'afficher que la première
$("li", diapo).hide();
// A noter une différence, maintenant on appelle une fonction init() *
// à la fin du fondu sur la première image.
$("li:first-child", diapo).addClass("active").fadeIn(options.animationSpeed, init);

// Pour chaque élément
$("li", diapo).each(function(){
	elt = $(this);

	// On calcule la position de l'image
	i = parseInt($("li", diapo).index($(this))+1);

	// On lui ajoute un ID avec la position
	$(this).attr("id", "jDiaporama_image_"+i);

	// Affichage de la légende si renseignée et activée
	if(options.infos)
	{
		// Y-a-t-il une description ? balise title
		var is_desc = ($("img", elt).attr("title") != "");
		// Y-a-t-il un titre? balise alt
		var is_title = ($("img", elt).attr("alt") != "");

        // On affiche ensuite ou non le titre et la description de l'image
		if(is_desc)
			elt.append("<p class='desc'>"+$("img", elt).attr("title")+"</p>");

		if(is_title)
			elt.append("<p class='title'>"+$("img", elt).attr("alt")+"</p>");

		// On affiche selon le paramètre choisi, le compteur d'image ou non
		if(options.currentimage)
			// On récupère ici la position de l'image courante (méthode index())
            // qu'on incrémente car la première position est 0.
			// Et on la compare au nombre d'images total
            // (nombre d'enfants (li) du diaporama)
			elt.append("<p class='count'>"+parseInt($("li", diapo).index(elt)+1)+"/"+diapo.children().length+"</p>");
	}
})

* Le script est maintenant initialisé par une fonction.

function init()
{
	// On récupère la taille de la première image du diaporama
	width = $("li:first-child img", diapo).width();
	height = $("li:first-child img", diapo).height(); // Sa hauteur

	// On ajuste le diaporama à la bonne taille
	// Ici la liste ul
	diapo.width(width);
	diapo.height(height);

	// Ici son parent .jDiaporama
	diapo.parent().width(width);
	diapo.parent().height(height);

	// Si les contrôles sont activés, on affiche les boutons ronds
	if(options.controls)
		diapo.siblings(".jDiaporama_status").show();
	// Si le diaporama est auto, mais en pause au début,
	// On lance l'évènement click sur le bouton "pause"
	if(options.auto && options.paused)
		$(".pause", diapo.siblings()).trigger("click");
	// On rend actif le premier bouton rond de la status bar
	$("#jDiaporama_bullet_"+(parseInt($("li", diapo).index($("li:first-child", diapo)))+1), diapo.siblings()).addClass("active");
}

A ce stade là, notre script est initialisé.

Il nous reste maintenant à définir :

  1. les actions utilisateurs pour les rollovers et l’affichage des informations
  2. les commandes clavier
  3. les différents contrôles du diaporama (suivant, précedent, pause …)
  4. la fonction de rotation d’image
  5. la fonction de rotation automatique

Informations & Rollovers

Par défaut, les informations ne s’affichent qu’au survol de la souris sur une image. On peut changer ce paramètre dans les options.

Il convient alors de détecter quand la souris est sur l’image courante. Pour cela nous utilisons les méthode JQuery mouseenter et mouseleave pour respectivement « Entrée de la souris dans la zone de l’image » et « sortie« .

Evenements de la souris

diapo.parent().mouseenter(function(){
	// On indique que la souris est bien au dessus de l'image
	mouseover = true;
	// On appelle la méthode qui affiche les infos
	// pour l'image courante
	displayInfos($("li.active", diapo), "show");
	// Si les contrôles sont activés, on affiche les boutons (flèches, pause)
	if(options.controls)
		diapo.siblings(".jDiaporama_controls").fadeIn();

}).mouseleave(function(){
	// La souris n'est plus au dessus de l'image
	mouseover = false;
	// On cache les infos
	displayInfos($("li.active", diapo), "hide");
	// Et les boutons
	if(options.controls)
		 diapo.siblings(".jDiaporama_controls").hide();
});

Grâce à ces deux méthodes, nous pouvons parfaitement gérer l’affichage des informations et des contrôles en fonction des évènements souris.

Méthode d’affichage

function displayInfos(elt, display)
{
	// Variables pour tester la présence des balises "title" et "alt"
	// Pour respectivement la description et le titre
	var is_desc = ($("img", elt).attr("title") != "");
	var is_title = ($("img", elt).attr("alt") != "");

	if(is_desc)
		if(display == "show")
			$(".desc", elt).slideDown("fast");
		else
			$(".desc", elt).slideUp("fast");
	if(is_title)
		if(display == "show")
			$(".title", elt).slideDown("fast");
		else
			$(".title", elt).slideUp("fast");
	if(options.currentimage)
		if(display == "show")
			$(".count", elt).slideDown("fast");
		else
			$(".count", elt).slideUp("fast");
}

Cette fonction s’occupe simplement de vérifier la présence des bonnes balises, pour n’afficher les informations que lorsqu’elles sont présentes. Ainsi on teste les attributs « title » et « alt » pour lancer l’animation d’affichage.

Le paramètre display est utilisé pour savoir s’il faut afficher ou cacher les informations.

Enfin, de la même manière, on n’affiche le compteur d’images que si celui-ci est activé dans les paramètres.

Commandes clavier

Nous utilisons ici une autre méthode JQuery: la fonction keydown qui permet de détecter la pression d’une touche du clavier.

Il suffit ensuite de repérer le code de la touche correspondant à la flèche gauche (37) et à la flèche droite (39). Après, nous allons réutiliser le fonctionnement du clic sur les boutons suivant et précédent (voir plus bas) pour passer à l’image suivante ou précédente (évitant ainsi de réécrire les actions).

// Si la navigation au clavier est activée
if(options.keyboard)
	$(document).keydown(function(event) {
		switch(event.keyCode){
			case 37 : // Flèche gauche
				// On appelle la fonction prev()
				prev();
			break;

			case 39 : // Flèche droite
				// On appelle la fonction next()
				next();
			break;
		}
	});

Boutons de contrôle

Nous allons détailler ici les différentes actions effectuées par les boutons de contrôle du diaporama.

Il y a pas mal de code alors accrochez-vous !

Il y a quatre étapes dans cette portion de code :

  1. Définition de la « status bar« , les boutons ronds qui permettent de suivre le défilement du diaporama.
  2. L’action du bouton précédent
  3. L’action du bouton suivant
  4. L’action du bouton lecture/pause

Status bar

// On ajoute le <div> qui contient les boutons ronds
// juste après la liste d'images
diapo.after("<div class='jDiaporama_status'></div>");

// Pour chaque image du diaporama
$("li", diapo).each(function(){

	// On calcule la position de l'image
	i = parseInt($("li", diapo).index($(this))+1);

	// On ajoute dans le <div> un lien vers cette même image
	$(".jDiaporama_status", diapo.parent()).append("<a id='jDiaporama_bullet_"+i+"' href='#'>Image "+i+"</a>");
})

// On calcule la taille que fait le <div> final avec les liens
// dedans pour pouvoir le placer de manière absolue
// centré en dessous du diaporama.
$(".jDiaporama_status", diapo.parent()).css("margin-left", -($(".jDiaporama_status", diapo.parent()).width()/2));

// On définit l'action du clic sur un lien de la status bar
$(".jDiaporama_status a", diapo.parent()).click(function(){
	// on appelle la méthode de rotation d'image avec
	// comme paramètre le lien courant
	nextImage(options, $(this));
	return false;
})

Ajout des boutons de contrôle

On ajoute les boutons de contrôle après le diaporama (<ul>). A noter qu’on n’ajoute le bouton play/pause uniquement si le mode auto est activé).

// Ajout du <div> .jDiaporama_controls
diapo.after("<div class='jDiaporama_controls'><a href='#' class='prev'>Prec.</a> " + ((options.auto)?"<a href='#' class='pause'>Pause</a>":"") + " <a href='#' class='next'>Suiv.</a></div>");

Action du bouton précédent


$(".prev", diapo.siblings()).click(function(){
	prev();
	// On annule l'action originelle (#) du lien
	return false;
});

function prev()
{
	// Si l'image courante n'est pas la première
	if(!$("li.active", diapo).is(":first-child"))
		// l'élément à afficher est l'image précédente
		elt =  $("li.active", diapo).prev();
	else
		// Sinon c'est la dernière
		elt =  $("li:last-child", diapo);

	// On appelle la méthode de rotation avec l'image à afficher
	nextImage(options, elt);

	// On définit le sens de défilement
	sens = "left";
}

Action du bouton suivant

La seule différence avec le bouton précédent est le sens de rotation.

$(".next", diapo.siblings()).click(function(){
	next();
	// On annule l'action originelle (#) du lien
	return false;
});

function next()
{
	// Si l'image courante n'est pas la dernière
	if(!$("li.active", diapo).is(":last-child"))
		// l'élément à afficher est l'image suivante
		elt =  $("li.active", diapo).next();
	else
		// Sinon c'est la première
		elt =  $("li:first-child", diapo);

	nextImage(options, elt);
	sens = "right";
}

Action du bouton lecture/pause

	$(".pause", diapo.siblings()).click(function(){
		// Si le diaporama est déjà en pause (a la classe "pause")
		if($(this).hasClass("pause"))
		{
			// On enlève cette classe et on met la classe "play"
			$(this).removeClass("pause").addClass("play");
			// On arrête le défilement automatique du diaporama
			clearInterval(inter);
			// On définit une variable globale "pause" à true
			pause = true;
		}
		// Sinon
		else
		{
			// On remet la classe "pause"
			$(this).removeClass("play").addClass("pause");
			// On relance le défilement automatique
			inter = setInterval(function(){displayDiaporama(options)}, (options.delay*1000));
			pause = false;
		}

		return false;
	});
}

Fonction de rotation d’image

C’est ici le plus gros du système. La méthode a un peu changé par rapport au précédent tutoriel.

En effet, avant cette fonction  ne s’occupait uniquement que d’afficher l’image suivante ou précédente selon le sens de rotation. Maintenant elle affiche une image définie (passée par paramètre) pour que l’on puisse afficher l’image souhaitée grâce à la « status bar ». C’est donc les boutons de contrôle qui définissent qu’il faut afficher l’image suivante ou précédente (comme vu précédemment).

// Le paramètre elt correspond à l'élément que l'on veut afficher
// Soit l'image suivante au clic sur les boutons suivant/précédent
// Soit le lien de la status bar
function nextImage(options, elt)
{
	// On stoppe le défilement automatique
	clearInterval(inter);

	// On cache l'image active et on lui retire sa classe
	$("li.active", diapo).fadeOut(options.animationSpeed).removeClass("active");

	// On fait de même pour les liens de la status bar
	$(".jDiaporama_status a", diapo.parent()).removeClass("active");

	// On récupère l'identifiant de l'élément (image ou lien status bar)
	id = elt.attr("id").split("_")[2];

	// On rend actif et on affiche l'image demandée
	$("li#jDiaporama_image_"+id, diapo).addClass("active").fadeIn(options.animationSpeed);
	// On ajoute la classe actif au bon bouton rond de la status bar
	$("#jDiaporama_bullet_"+id, diapo.siblings()).addClass("active");

	// Si les infos sont activées, le rollover aussi et qu'on est déjà sur le diaporama
	// au moment où on change d'image, alors on affiche les infos
	if(options.infos && mouseover && options.onrollover)
		displayInfos($("li.active", diapo), "show");
	// Sinon on les cache
	else if(!mouseover && options.onrollover)
		displayInfos($("li.active", diapo), "hide");

	// Si le diapo est en mode auto et n'est pas en pause
	if(!pause && options.auto)
	{
		// Si l'on est pas arrivé au bout du compteur de boucle ou que celui est ci est en mode infini (0)
		if(options.boucles == 0 || (options.boucles > 0 && (diapo.data("current_slide")/diapo.children().length) < options.boucles ))
			// On relance le défilement automatique
			inter = setInterval(function(){displayDiaporama(options)}, (options.delay*1000));
		else
			// Sinon on est arrivé à la fin et on enlève le bouton lecture/pause
			$(".pause", diapo.siblings()).remove();
	}
}

Fonction de défilement automatique

Voici la fonction qui est appelée à intervalle régulier et qui s’occupe de faire défiler les images automatiquement.

On utilise dans cette méthode, une autre fonction JQuery bien pratique, la fonction data, qui permet d’associer des variables à un objet JQuery. En l’occurence, nous allons nous en servir pour stocker la variable current_slide dans l’objet diapo (notre diaporama).

function displayDiaporama(options)
{
	// On incrémente le nombre d'images déjà affichées
	current_slide++;
	// On met à jour la variable pour le diaporama courant
	diapo.data("current_slide", current_slide);

	// Selon le sens de rotation, nous appelons la fonction
	// suivante ou précédente
	if(sens == "right")
		next();
	else
		prev();
}

Conclusion

Voilà ! Le script de la nouvelle version du diaporama simple avec JQuery est maintenant terminée !

Informations & téléchargements

Le script fonctionne parfaitement sur tous les navigateurs : IE (6,7 et 8), Firefox, Chrome et Safari.

A noter que l’utilisation de png transparent fait quelque peu ralentir le script sur IE7 seulement et que sur IE 6 des images au format gif ont été utilisées pour remplacer les PNG.

La démo est disponible ici.

Les fichiers sources : télécharger les fichiers sources de l’example.

Le projet jDiaporama sur jQuery.com: http://plugins.jquery.com/project/jDiaporama

172 commentaires

1 2 3 4 5 7
  1. oromis

    Bonjour, d’abord merci pour ce super tuto très clair.
    Ensuite j’aimerai mettre un texte de descriptions à droite de mon image qui changerai avec chaque image.
    Mais à cause de la position:absolute des images mon texte se retrouve en dessous de l’image dès que le diapo commence à défiler.
    Quelqu’un aurait-il une idée pour résoudre ça svp?

  2. Flor

    le problème c’est que j’ai redimensionner les images en 1280 x 1024 pour quelle occupe le 100% de mon ecrans mais pour les images vertical je peut pas mettre un width sinons elle apparaisse deformer a l’ecran c’est pas possible juste en mettant un height au lieux d’un width

  3. soksam

    Flor voila le code à modifier pour fixer uniquement la hauteur…


    };
    var options = $.extend(defaults, options);

    // Redimensionnement des images
    var imgs = $(this).find(« img »);
    var fixHeight = 400;
    var maxWidth = 0;

    imgs.each(function() {
    var img = $(this);
    var ratio = img.width() / img.height();

    img.height(fixHeight);
    img.width(fixHeight * ratio);

    if (img.width() > maxWidth) maxWidth = img.width();
    });
    this.each(function(){
    // Si le diaporama comporte plus qu’une image

    function nextImage(options, elt)
    {
    clearInterval(inter);

    $(« li.active », diapo).fadeOut(options.animationSpeed).removeClass(« active »);
    $(« .jDiaporama_status a », diapo.parent()).removeClass(« active »);

    id = elt.attr(« id »).split(« _ »)[2];

    var el = $(« li#jDiaporama_image_ »+id, diapo);
    var img = el.find(« img »);

    $(« .jDiaporama_controls », diapo.parent()).width(img.width());
    diapo.width(img.width());
    diapo.parent().width(img.width());

    el.addClass(« active »).fadeIn(options.animationSpeed);

    • soksam

      Et oui maxWidth ne sert pas donc les lignes :
      var maxWidth = 0;
      if (img.width() > maxWidth) maxWidth = img.width();
      Sont a supprimer

      • Flor

        soksam j’ai remplacé une partie du code par le code que tu m’a
        donné
        le diaporama et centrer mais ne fonctionne plus v
        voici le code que j’ai modifié est ce que il y a une erreur ???

        /*
        var options = $.extend(defaults, options);

        this.each(function(){
        if($(« li », diapo).length > 1){

        var diapo = $(this);
        var mouseover = false;
        var sens = options.sens;
        var pause = false;
        var width = 0;
        var height = 0;
        var current_slide = 0;
        var nb_slides = $(« li », diapo).length;

        diapo.wrap(«  »);
        */

        // nouveau code
        var options = $.extend(defaults, options);

        // Redimensionnement des images
        var imgs = $(this).find(« img »);
        var fixHeight = 400;
        var maxWidth = 0;

        imgs.each(function() {
        var img = $(this);
        var ratio = img.width() / img.height();

        img.height(fixHeight);
        img.width(fixHeight * ratio);

        if (img.width() > maxWidth) maxWidth = img.width();
        });
        this.each(function(){
        // Si le diaporama comporte plus qu’une image

        function nextImage(options, elt)
        {
        clearInterval(inter);

        $(« li.active », diapo).fadeOut(options.animationSpeed).removeClass(« active »);
        $(« .jDiaporama_status a », diapo.parent()).removeClass(« active »);

        id = elt.attr(« id »).split(« _ »)[2];

        var el = $(« li#jDiaporama_image_ »+id, diapo);
        var img = el.find(« img »);

        $(« .jDiaporama_controls », diapo.parent()).width(img.width());
        diapo.width(img.width());
        diapo.parent().width(img.width());

        el.addClass(« active »).fadeIn(options.animationSpeed);

        // Fin nouveau code

      • Flor

        Bonjour, soksam

        Le script marche mais depuis modifications du script si une image est plus petite il décale tout le reste des images vers la droite
        je t’ai mis un lien vers la page de test si tu veux getter un cou d’œil

        http://www.grug.ch/Site/essai/photos/index.php

        utilisateur test
        password test

  4. Gilles

    Salut.
    Plugin sympa mais auquel je vois des défauts. Le premier, qui est le plus gênant, c’est que si tu laisses ton plugin tourner et que tu reviens plus tard sur ta page, tu remarques qu’il s’emballe. Il y a des clignotements d’image. A cause de ça je ne vais finalement pas l’utiliser.
    Et l’autre défaut que je vois c’est que pendant la transition, on voit un peu à travers, ce qui est normal puisqu’un fadeIn se fait en même temps qu’un fadeOut. Il y a donc forcément un moment où l’on voit un peu à travers.

    • Gui
      • Gilles

        Ok. Merci d’avoir pris le temps de vérifier. Je regarde le mien dans la journée pour te dire ce qu’il en est.

      • Gui
      • Gilles

        Oui j’ai testé le tien aussi et il n’a pas de problème.
        Le mien, j’ai cru que c’était bon aujourd’hui mais en fin de journée ça n’allait pas (http://cluster010.ovh.net/~eneria/) J’ai l’impression que ça ne le fait pas toujours, mais souvent quand même.
        A noter que dans ton plugin, j’ai mis en commentaire la ligne 147

        diapo.after(« Prec.  » + ((options.auto)? »Pause« : » ») +  » Suiv.« );

        parce que je souhaite les points de navigation, mais pas les autres bouton précédent, suivant, et pause.
        Ca serait bien d’ailleurs de pouvoir choisir de faire ça sans toucher le plugin.

        Et pour ce qui est du transparent, comme le slideshow n’est pas sur fond uni, c’est moins beau parce qu’on voit la coupure (du vert au blanc) derrière les images pendant le fondu.

        En tout cas c’est du beau boulot, et merci encore pour tes réponses.
        Si par hasard tu vas voir mon site et que tu comprends pourquoi il se met à « clignoter » tout seul, je suis preneur.

        Gilles

  5. Flor

    Hello,

    Problème résolus pour l’alignement vertical en modifiant le CSS et le HTML

    j’ai pus laisser le fichier java d’origine ce qui est mieux pour la compatibilité du script

  6. Maxime

    J’ai un menu déroulant sur un site que je suis en train de coder. Je n’ai pas utilisé de JS pour ce menu mais juste du css.
    Un peu en dessous dans ma page j’ai intégré ton super diaporama!

    Le problème c’est que mon menu se déroule en dessous du diaporama : pas très pratique…

    Est-il possible de passer le diaporama à « l’arrière-plan »?

    • Gui
      • Maxime

        Merci de ta réactivité ça marche nikel! 😀

  7. Jeff

    Bonjour, ton script est nickel chrome.

    Juste un détail, il est dommage de devoir modifier sans arrêt une page pour ajouter ou supprimer des images, ne serait-il pas plus intéressant et judicieux d’avoir un scan automatique de dossier image plutôt qu’une quantité inutile d’effet quand trois ou quatre peuvent largement suffire ?

    Ça plus un bon uploader sécurisé et on obtient la perfection à l’état pur.

    Merci quand même pour ce superbe script.

    • Gui
  8. Amélie

    Bonjour,
    Un grand merci pour ce tutoriel super clair.

    J’ai mis en place ton diaporama sur mon site web et j’ai un souci sous IE8 : au premier affichage de chaque page, les images apparaissent en petite vignette en haut à gauche. Ensuite, si je recharge la page, tout va bien, le diaporama s’affiche à la bonne taille.
    Mon site : http://www.lamassas.fr/index_temp.php

    J’ai parcouru tous les messages et je n’ai rien vu de tel. En revanche, je suis allée voir le site http://www.terreasoi.coop/paniersbio.htm qui avait fait appel à toi en février et j’ai constaté le même souci.

    Je débute en css, donc j’ai peut être loupé un truc.
    Je te joins le code css.

    Merci bcp pour ton aide.
    Amélie

    .jDiaporama{
    position:relative;
    width: 473px;
    height: 315px;
    }
    #ligne {
    background:#DFCE8A;
    border:solid thin #804000;
    position:relative;
    height:430px;
    width:930px;
    margin:auto;
    }
    #ligne_accueil {
    background:#DFCE8A;
    border:solid thin #804000;
    position:relative;
    height:500px;
    width:930px;
    margin:auto;
    }
    #case {
    position:absolute;
    padding:15px;
    width:473px;
    height:345px;
    margin-top:40px;
    left:0px;
    text-align: left;
    }
    #case_texte {
    position:absolute;
    margin:10px;
    width:400px;
    right:10px;
    text-align: justify;
    }
    #case_image {
    position:absolute;
    height:100px;
    margin-left:10px;
    display:inline;
    bottom:0px;
    left:0px;
    }
    #container_image {
    position:absolute;
    margin:auto;
    width:400px;
    height:90px;
    right:10px;
    bottom: 0px;
    }

    ul{
    margin:0;
    padding:0;
    }
    a{
    outline:none
    }

  9. Pascal

    Salut,

    Je souhaite insérer un tableau de menus au dessus du diaporama, comme dans le site http://www.cycles-lapierre.fr. J’ai fait une nouvelle classe pour le tableau avec un z-index:100; Le tableau reste au dessous du diaporama….

  10. Pascal

    Merci pour la rapidité. Oui, j’ai mis position relative :
    #Conteneur{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:980px;
    background-color:red;
    z-index:100;
    }

    .diaporama1{
    position:relative;
    width:1500px;
    height:500px;
    margin-left:auto;
    margin-right:auto;
    z-index:0;
    }

    • Gui
      • Pascal

        J’ai trouvé finalement une solution pour ce problème avec la v.2
        Par contre il y a un autre prbl : mon diapo n’est pas centré (décalé sur la gauche) et les boutons next et prev son hors de l’image).
        .diaporama1{
        position:relative;
        width:1500px;
        height:500px;
        margin-left:auto;
        margin-right:auto;
        z-index:0;
        }
        P.S. La démo de jDiaporama 3.0 ne fonctionne pas !
        Merci. Bon week-end.Pascal

      • Gui
  11. Pascal

    Chez moi ça fonctionne pas : http://tuts.guillaumevoisin.fr/jquery/jDiaporamav3/

    Est-ce que tu as une solution pour centrer le diaporama en V.2 ?
    Merci!

  12. Amélie

    Bonjour,

    Je crois avoir résolu mon souci en forçant la taille du diaporama dans le javascript directement, dans le fonction init().
    Le problème pouvait-il être lié à cela ?

    Merci et bonne journée.
    Amélie

  13. Jeremy

    Super tuto.

    J’ai décortiqué les css pour adapté le diapo graphiquement. Et c’est plutot simple finalement mais je bloque sur un truc…

    Dans le fichier style.css (enfin je pense que c’est la) où on traite le bullets.png, je n’arrive pas à savoir quels sont les paramétrés à changer pour mettre des bulles plus grandes. Si je remplace simplement le png par le mien, mes bulles sont rognées (normal).

    Merci!

    • Gui
      • Jeremy

        Je parlais des btn de navigation sous le diaporama, les petites bulles pour passer d’une image à l’autre.
        L’idée c’est de faire des bulles personnaliser.

        Je vais essayer de mettre ça en ligne.

    • Gui
  14. Jeremy

    je regarde ça dès que possible.

    Merci bcp 😉

  15. laurent

    bonjour,
    je cherche à mettre des images rondes
    car on m’a présenté une maquette avec un dessin de clown par exemple et donc dans le visage rond je dois intégré le diaporama avec les photos qui défile

    je cherche également une solution
    pour mettre dans une div conteneur
    le contenu de ton diaporama avec une boite qui contient par exemple à gauche du texte explicatif et à droite la photo
    et en bas les boutons pour faire défiler les images et le texte
    soit bouton rond (avec un titre perso au passage de la souris)
    du genre rond 1 atteindre diaporama avec titre 1, message 1 et image xy, rond 2 atteindre titre2 , message 2 et image de la tour de piz par exemple

    merci pour ton aide

    ton travail est très sympa

  16. laurent

    ceci est un exemple que j’ai repris sur un autre site

    http://www.espaceinformatique.net/dvd25/

    l’avantage c’est qu’il fonctionne sous formes de div
    et donc à l’intérieur tu met ce que tu veux

    le tiens est aussi excellent mais il répond à d’autres fonctionnalités

  17. greenshot

    Bonsoir et bravo pour ton script et la clareté de ton tuto.
    Y a quand même un truc que je n arrive pas a faire, c est une mise a l echelle automatique des visuels que ce soit en taille fixe ou pourcentage :

    dans diapoCss :

    .diaporama1{
    position:relative;
    width:100%; /* Largeur d’une photo */

    }
    .diaporama li{
    list-style-type:none;
    overflow:hidden;
    position:absolute;
    }
    .diaporama ul{
    list-style-type:none;
    overflow:hidden;
    position:absolute ;
    width:100%; /* Largeur d’une photo */
    }

    un peu d aide searit bien venu car je voudrai adapter la taille du diaporama en fonction des @media queries

    • greenshot

      hello again,
      toujours pas de réponses sur le redimensionnement des éléments chargée en fonction de la taille du navigateur ?
      Ca me semble pourtant utile ….

      • Gui
1 2 3 4 5 7

Laisser une réponse


Post shadow