11497 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour, j'ai de réels soucis avec les sliders en général et ce, même si je suis pas à pas leur tuto d'installation...

J'avais décidé de ne pas faire le slider moi-même car je pense simplement que d'autres l'ont déjà fait et certainement mieux que moi. Donc je me suis rabattu sur des plugins gratuits qu'on disaient facile à intégrer... résultat, je n'ai réussi à n'en faire fonctionner aucun!

Pire, cela ne marche même dans leur config de base ou quand je part d'un exemple!

Je dois être nul mais bon disons avec caroufredsel qui me semblait extrêmement simple:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel.js"></script>
<script>
$(".foo ul").carouFredSel({
    height: 275,
    circular: false,
    width: 400,
    items: {
        visible: 1,
        width: 400,
        height: 275
    },
    auto: 4000,
    prev: {
        button: "#prev_btn",
        key: "left"
    },
    next: {
        button: "#next_btn",
        key: "right"
    }
});
 
 
 
</script>
</head>
 
<body>
 
<div id="foo">
    <img src="img/example-slide-1.jpg" width="400" />
    <img src="img/example-slide-2.jpg" width="400" />
    <img src="img/example-slide-3.jpg" width="400" />
    <img src="img/example-slide-4.jpg" width="400" />
</div>
 
</body>
</html>


Je me retrouve avec 4 image l'un à côté des autres sans sliders...
Idem pour les autres sliders.

J'aime bien de comprendre ce que je fais comme erreur. Car là j'ai simplement suivis le tuto d'installation.. Smiley fache

Et j'ai passé (perdu?) une journée à essayer ça et j'en deviens Smiley biggol Smiley biggol Smiley biggol un peu... comment dire?...grrr lol.

Merci de votre aide
Bonjour,
Je pense qu'il te manque la condition "faire les actions à la fin du chargement du document":
[b]$(document).ready(function() {[/b]
	$("#foo").carouFredSel({
		height: 275,
		circular: false,
		width: 400,
		items: {
			visible: 1,
			width: 400,
			height: 275
		},
		auto: 4000,
		prev: {
			button: "#prev_btn",
			key: "left"
		},
		next: {
			button: "#next_btn",
			key: "right"
		}
	});
[b]});[/b]

Modifié par GroquikMLV (08 Jul 2013 - 17:29)
ha ok! mais j'ai remarqué aussi qqch: si je mets mon instruction avant la fermeture de body, cela fonctionne mais pas sur tous les navi!...
Je désespère.

Pourtant je cherche juste à mettre un slide avec un taille fixe et une pagination en dessous...
Tu veux dire que tu le fais juste avant </body>? Au pire, qu'est ce qui t'empêches de mettre l'instruction plus haut dans le document?
Ben simplement que ça ne fonctionne pas ^^
Si je le mets avant la fermeture de body, j'ai un truc (je dis bie un truc) qui ressemble un peu à ce que je voudrais (et encore).

J'aimerais juste un cadre avec un élement affiché. En dessous des petit point qui montre la pagination et peut être (soyons fou) un bouton gauche et droite sur l'image) et peut être (mais là je n'ose l'espèrer) un petit caption facile à appliquer...

Mais vu que j'arrive même pas à affiche convenablement mon code ^^ (je ne parle pas d'ie qui me mets TOUJOURS les images les unes à côté des autres!

J'ai réellement besoin d'aide, je patauge dans la mélasse de code.
Je pense que c'est normal si tu as 4 images fixes. Tu as mis une width de 400, et tes 4 images cote à cote doivent surement faire moins de 400px, donc il n'y a pas besoin de "slider" dans ce cas. Essaie de mettre encore plus d'images, ou de réduire le 400 dans ta fonction.

Sinon, poste un aperçu global du code, il y a peut être une erreur glissée quelque part.
Bon courage en tout cas!
6l20 a écrit :
Le plus simple, ce serait de nous fournir l'adresse d'une page de test en ligne.

ok comment je peux mettre cela en place? Vous avez un outil privilégié?
GroquikMLV a écrit :
Je pense que c'est normal si tu as 4 images fixes. Tu as mis une width de 400, et tes 4 images cote à cote doivent surement faire moins de 400px, donc il n'y a pas besoin de &quot;slider&quot; dans ce cas. Essaie de mettre encore plus d'images, ou de réduire le 400 dans ta fonction.

Sinon, poste un aperçu global du code, il y a peut être une erreur glissée quelque part.
Bon courage en tout cas!
merci! je cherche ^^
Bon je suis déjà un peu plus loin... mon slider a l'air de fonctionner.
Manque une option de caption et comment styler les bouton de nav.

Si qqn peut m'aider.


<!doctype html>
<html>
<head>
  <style>
    /* Prevents slides from flashing */
    #slides {
      display:none;
	  position:relative;
	  
    }
	#slidecontainer {
		width: 940px;
		height: 528px;
		
		
		}
	.caption {
  z-index:505;
  display:block!important;
	position:absolute;
	bottom:0;
	left:0;
	height:10%;
	width:10%;
	background: rgba(0,0,0,0.5);
	}
  </style>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="js/jquery.slides.min.js"></script>


  
</head>
<body>
<div id="slidecontainer">
  <div id="slides">
    <div class="caption">hello</div>
    <img src="http://placehold.it/940x528" alt="helooolo">
   
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    
  </div>
</div>
  <script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 528,
		pagination:{
			active: true,
			effect: "slide"
			},
		play: {
			interval: 4000,
			auto: true,
			restartDelay: 2000
			}
      });
    });
  </script>
  </body>
</html>

Bien joué!
Pour le caption (on va commencer par ça car c'est le plus simple je pense), regarde sur cet exemple (en regardant le code source): apparemment, le mec englobe tout dans des div différentes:
<div class="slide">
     <img src=......../>
     <div class="caption">
            blabla la légende ici
     </div>
</div>
<div class="slide">
     <img src=......../>
     <div class="caption">
            blabla la légende de la seconde image
     </div>
</div>

et ainsi de suite
Modifié par GroquikMLV (09 Jul 2013 - 11:03)
Merci!!!! Smiley ravi Smiley ravi Smiley ravi

Je lance quand même un petit coup de gueule aux créateur de tel plugins: dire dans le tuto d’installation: ben vous savez mon plugins il est facile il suffit de un faire le lien vers le plugins, le css et jqurey puis de copier/coller mon code hmtl sans dire qu'il faut en fait changer plein de truc dedans, c'est limite pas super honnête!

Moi en fait je pensais réellement que suivre l’installation suffisait pour qu'il fonctionne (ce qui me semble logique, quand on te dit: "voici comment on installe", et ben tu te dis que c'est le minimum suffisant pour le bon fonctionnement! Smiley fache 9a rend fou Smiley biggol Smiley biggol

Bon ceci dit,contiunons.

@groquikMLV: le lien vers l'exemple ne fonctionne pas pour moi. Peux tu me le remettre.
Grosse question: est ce qu ele caption fonctionne avec tous les IE?
Car entre temps j'ai essayé aussi bxslider (qui fonctionne pas mal) mais qui lui a de gros problèmes avec ie6-ie7:
-les captions déconnent grave: ils sortent de la boite wrapper et font 100% de la page en width.
-décalage bizarre et incompréhensible: les images sont écrasé en width et donc se décalent dans le wrapper bien entendu.

Si vous avez des idées pour ces problèmes aussi...? J'aimerai pouvoir maitriser (un grand mot) les deux: bxslider et sliderjs...
J'ai mis à jour mon lien, désolé pour l'erreur Smiley smile
Pour IE6 et 7, je ne peux pas trop t'aider, comme j'ai toujours fait des sites uniquement à titre personnel, et non pas pour une entreprise, je me suis jamais pris la tête à gérer les cas IE. Je crée mes trucs pour firefox/chrome, et celui qui s'entête à utiliser IE, tant pis pour lui! (Je sais c'est mal, c'est aussi pour essayer de me mettre à jour sur ce point que je me suis inscrit sur ce site).

Je ne connais pas bxslider, donc je ne peux pas te dire si ça fonctionne sur telle ou telle version, désolé Smiley decu
Salut,

Je vois que tu as changé de pluggin en court de route...

Concernant ta question sur "comment présenter une page de test en ligne", il y a bien évidemment ton espace perso (souvent fourni gratuitement par les hébergeurs) ou sur ton propre domaine dans un dossier dédié, il y a surtout quelques outils en lignes assez pratiques :
JsFiddle
Codepen
Dabblet

Le talentueux Geoffrey Crofte avait fait une "petite" sélection de Slideshow et Carrousels sur son non moins excellent blog.
Et je suis assez fan de son interprétation de l'exercice :Créer un slideshow automatique et contrôlable

Concernant "ton coup de gueule", je le trouve un poil déplacé, compte tenu du travail effectué, mis à disposition de chacun sans aucune contre-partie...
Il suffit bien souvent de lire la doc, de regarder les options possibles, de parcourir éventuellement les FAQ, et de mouiller un peu le maillot...
Tu as encore la possibilité de refiler le travail (moyennant finance) à un professionnel Smiley cligne
Voici mon code qui fonctionne sur tous les nav...
Bien entendu, il est pas responsive, je verrais ça plus tard.
http://jsfiddle.net/RXgmq/1/

Maintenant deux soucis:
1)comment mettre mes boutons next/prev sur les côté du slider et pas en dessous de l'image. J'ai essayé de les mettre en absolu (donc le slider devient relatif) mais les boutons se mettent sous les images de mon slider... Une idée?
2) fameux caption que j'arrive pas à adapter...
http://jsfiddle.net/RXgmq/2/

j'ai réussis à mettre les boutons sur le devant avec z index... et j'ai ajouter un peu de padding sur leur conteneur pour les avoir à cheval sur le bord...

Vous en dites quoi du code?

Toujours des problèmes de captions...
Pour les captions, rajoute des <div class="caption">ta légende</div> à chaque truc, puis tu fais une règle .caption dans ton css que tu agrémentes comme tu le souhaites Smiley smile
Fonctionne pas chez moi et là ça devient vraiment trop complexe à adapter seul... j'ai réellement besoin d'aide.
Pages :