CAROUSELLE 3D
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
-
18 sept. 2010 à 21:57
cs_arta Messages postés 98 Date d'inscription dimanche 22 janvier 2006 Statut Membre Dernière intervention 24 juillet 2013 - 10 juin 2013 à 10:08
cs_arta Messages postés 98 Date d'inscription dimanche 22 janvier 2006 Statut Membre Dernière intervention 24 juillet 2013 - 10 juin 2013 à 10:08
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/52298-carouselle-3d
https://codes-sources.commentcamarche.net/source/52298-carouselle-3d
10 juin 2013 à 10:08
Ce carroussel est-il toujours d'actualité ?
30 déc. 2011 à 12:25
29 déc. 2011 à 11:13
if(oml>0.02 || oml<-0.02){
if(this.rot>=Math.PI*2 || this.rot<=-(Math.PI*2)){
this.rot=1
}
this.rot=this.rot+oml
var rayon=(gaga.offsetWidth/2)-(this.taillemage/2)-50
var t=gaga.offsetHeight/2
for(var i=1;i<=this.all.length-1;i++){
var gogo=this.all[i]
var decal=this.rot+this.pi2*i
gogo.style.left=(Math.cos(decal)*rayon)+rayon+15+"px";
gogo.style.top=((Math.sin(decal)*rayon)*this.cocoef)+t+"px";
gogo.style.width=this.taillemage*(Math.sin(decal))+this.taillemage+"px";
var opasi=Math.sin(decal)+1
if(navigator.appName.substring(0,3)!="Mic"){
gogo.style.opacity=opasi;
}
else{
gogo.style.filter="alpha(opacity="+opasi*100+")"
}
if(Math.cos(decal)*rayon>40 || Math.cos(decal)*rayon>(-40)){
gogo.style.zIndex=1
}
else{
gogo.style.zIndex=0
}
}
}
if(arguments[0]=='depart'){
oxo=setInterval(ellipse,1000)
}
}
function anul(){
clearInterval(oxo)
}
function change(lui){
var gaga=document.getElementById('genelipse')
var el=document.getElementById('centre')
var taille=lui.offsetWidth/lui.offsetHeight
el.src=lui.src
//el.style.left=(gaga.offsetWidth/2)-((taille*el.offsetHeight)/2)+'px'
}
j'ai pas compris cette partis du est ce que vvous pouvez m'aidiez SVP
29 déc. 2011 à 11:00
28 déc. 2011 à 17:31
28 déc. 2011 à 17:20
14 mars 2011 à 13:30
14 mars 2011 à 11:55
13 mars 2011 à 09:39
11 mars 2011 à 00:18
11 mars 2011 à 00:10
Je viens de mettre en ligne ton carrousel avec de légères modifications pour l'adapter à mon site.
Je vais encore chercher comment placer en bas du carrousel l'image n°1 qui actuellement se trouve à 90° à droite.
Si tu veux voir ce qu'il donne, tu peux aller sur http://spa.de.saintes.free.fr/pages/24h/24h.htm
Encore merci pour ce travail parfait.
20 janv. 2011 à 16:23
20 janv. 2011 à 16:17
"Il est un peu rapide ce carrousel, non? "
pour diminuer la vitesse a la ligne 28 du fichier elipse.js augmente la valeur remplace 2000 par 4000 par exemple
var oml=((gaga.offsetLeft+(gaga.offsetWidth/2))-setX)/4000; // vitesse de rotation
19 janv. 2011 à 20:42
$('#demo').carousel(
{datas: [ 'images/ima.jpg','images/ima(2).jpg','images/ima(3).jpg','images/ima(4).jpg','images/ararouge.jpg','images/ima(6).jpg',
'images/ima(7).jpg','images/ima(8).jpg','images/ima(9).jpg','images/ima(1).jpg','images/lion.jpg','images/poisson.jpg',
'images/escar.jpg','images/oiseaux.jpg','images/tigre.jpg','images/mulet.jpg'],
onClickImg : function(event){
//Mettre son code ici
}
});
});
19 janv. 2011 à 19:03
Il est un peu rapide ce carrousel, non?
19 janv. 2011 à 18:53
Bravo pour moi c'est un super script.
Juste une question (je n'y connais pas grand grand chose en javascript) comment faire un lien différent vers d'autres pages en cliqnant sur l'image centrale.
encore BRAVO.
25 déc. 2010 à 11:40
Merci pour le script ;)
10 déc. 2010 à 17:08
19 oct. 2010 à 17:34
29 sept. 2010 à 17:28
29 sept. 2010 à 16:07
29 sept. 2010 à 15:43
Félicitations donc, et sollicite autorisation de placer du PHP pour générer la liste des images automatiquement à partir du contenu d'un répertoire du serveur (remplissage du tableau tbimage en remplaçant les instructions de début du js. par instructions suivantes)
<script language="javascript">
<?php
include_once("../../php/dir.class.php");
$dir = new MyDirectory("mini");
$dir->open() or die("ERROR - " . $dir->errno() . " : " . "ERROR - " . $dir->errno() . " : " . $dir->error());
$ls = $dir->ls() or die("ERROR - " . $dir->errno() . " : " . $dir->error());
$photos = array("jpg", "jpeg", "gif", "png");
?>
var tbimage=[<? $v = false;
foreach ($ls as $i => $ln) {
if ($ln['is_file']) {
// tester si image
$name = $ln['name'];
$pos = strrpos($name,".") + 1 ;
$type = strtolower(substr($name, $pos));
if (in_array($type, $photos)) {
if ($v) {
echo ",";
}
else {
$v = true;
}
echo "'mini/".$name."'";
}
}
} ?>];
</script>
dir.class.php se trouve dans l'homologue PHP de javascriptfr (class MyDirectory)
29 sept. 2010 à 14:57
en suite s que tu nous autorise a l’intègre a mon site tout en te fessant de la pub ou pas
20 sept. 2010 à 22:34
je vais essayer de repondre a toute question
concernant l'ergonomie il n'est pas evident de concevoir quelle que chose qui puisse satisfaire a tous j'ai cree le carouselle en me mettant dans la peau d'un visiteur pour obtenir quelle que chose de pas trop galere a manipuler
concernant les images afficher en grand elle ne couvrira jamais la page entiere j'ai fait en sorte d'avoir un ratio que j'ai mis a 80 % de la taille de l'ecran valable pour toutes les resolutions
le clic pour supprimer l'affichage de l'image j'ai hesiter a le mettre sur l'image j'avait deux il me falait trancher
pour la position ou le carouselle s'arrete on peut diminuer cette position, l'agrandir ou tout simplement la retirer j' ai mis un commentaire a ce sujet dans la source
en gros j'ai pas fait beaucoup de comentaires mais les commentaires que j'ai mis son placé sur les ligne clees afin de modifier la configuration
le code:
j'aurait pus faire un code en objet mais sa demande plus de travaille peut etre qu'un jour je le ferait.
concernait les id il n'y en a que trois dont un seule pour le carouselle celui du div conteneur et donc deux pour le voile un pour le voile lui meme et un pour l'image affiché en grand
pour les grandes image et les mini il est quand meme preferable de mettre des mini pour limiter les temps de chargement.
pour les petit detaille sa reste petit.
if(navigator.appName.substring(0,3)!="Mic") sa me derange pas de l'utiliser c'est plus long c'est sur mais le resultat est le meme
pour navigator.vendor sa me sert a differencier les navigateur webkit (chrome et safari)pour le scroll car sur ces navigateur le scroll est donné avec document.body (le body) alors que pour les autres c'est document.documentElement (le head)
-moz-opacity sa commence a etre vieux
position:fixed marche pour ie7 je crois qu'il existe un bug mais sinon sa marche
pour les virgules en generale je corrige apres.
sinon j'ai remis une souce avec les virgules et quelques detailles
anacoana barthous
merci pour la note
smarticu
j'ai essayer et sa marche j'ai pu voir aussi que tu a rendu dynamique la creation du carouselle bon boulot
20 sept. 2010 à 15:04
Bon code bien marrant. Je me suis permit de réécrire pour l'adapter à jquery. Ce qui donne :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{
font-family:Verdana, Geneva, sans-serif;
background-color:#9688ab;
}
.genelipse img{
position:absolute;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
border-style:solid;
border-width:2px;
border-color:gray;
cursor:pointer;
}
.genelipse{
position:relative;
margin:auto;
top:50px;
height:400px;
width:500px;
border-style:solid;
border-width:3px;
border-color:gray;
background-color:#262626;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
}
.center{
z-index:1;
position:absolute;
height:42%;
top:15%;
}
</style>
<script type="text/javascript">
(function($){
$.fn.extend({
carousel: function(options) {
var self = this;
var oxo;
var defaults = {
onClickImg : function(event){ return false;},
setX:0
};
var options = $.extend(defaults, options);
var imgCenter;
var rot,cocoef,all,pi2,taillemage;
var ellipse = function(){
if(typeof rot == 'undefined'){
imgCenter.css("left",(self.width()/2)-(imgCenter.width()/2));
rot=0;
cocoef=0.3/1
all=self.find("img");
pi2=(Math.PI*2)/(all.length-1)
taillemage=self.height()/10
}
var oml=((self.offset().left+(self.width()/2))-options.setX)/2000;
oml=oml>0 ? -oml : Math.abs(oml);
if(oml>0.02 || oml<-0.02){
if(rot>=Math.PI*2 || rot<=-(Math.PI*2)){
rot=0;
}
rot+=oml;
var rayon=(self.width()/2)-(taillemage/2)-25;
var t=self.height()/2;
for(var i=1;i40 || Math.cos(decal)*rayon>(-40)){
self.css("zIndex",1);
}else{
self.css("zIndex",0);
}
}
}
if(arguments[0]=='start'){
oxo=setInterval(ellipse,50)
}
};
//Iterate over the current set of matched elements
return this.each(function() {
var obj = $(this);
obj.addClass("genelipse");
$(document).mousemove(function(e){
options.setX = e.clientX + $(document).scrollLeft();
});
obj.bind("mouseover",function(){
ellipse("start");
});
obj.bind("mouseout",function(){
clearInterval(oxo)
});
imgCenter = $("").appendTo(obj);
for(var i=0;i<options.datas.length;i++){
$("")
.bind("click",function(event){
var taille=$(this).width()/$(this).height();
imgCenter.attr("src",$(this).attr("src"));
imgCenter.css("left",(self.width()/2)-((taille*imgCenter.height())/2));
options.onClickImg(event);
})
.bind("mouseover",function(event){
var taille=$(this).width()/$(this).height();
imgCenter.attr("src",$(this).attr("src"));
imgCenter.css("left",(self.width()/2)-((taille*imgCenter.height())/2));
})
.appendTo(obj);
}
ellipse();
});
}
});
})(jQuery);
$(document).ready(function() {
$('#demo').carousel(
{datas: [ 'images/ima.jpg','images/ima(2).jpg','images/ima(3).jpg','images/ima(4).jpg','images/ararouge.jpg','images/ima(6).jpg',
'images/ima(7).jpg','images/ima(8).jpg','images/ima(9).jpg','images/ima(1).jpg','images/lion.jpg','images/poisson.jpg',
'images/escar.jpg','images/oiseaux.jpg','images/tigre.jpg','images/mulet.jpg']});
});
</script>
</head>
20 sept. 2010 à 13:19
Très beau résultat.
Je prends.
19 sept. 2010 à 14:06
Par rapport à ce qu'à dit jdmcreator, je ne peux mettre qu'un 9/10, mais je reviendrai si mise à jour il y a pour (peut être) mettre la note maximal ;o)
Bravo encore donc pour ce carrousel 3D en JS qui grâce à celui-ci évitera de recourir au Flash, en s'y rapprochant fortement
cdt
Xavier
18 sept. 2010 à 21:57
Pour commencer, félicitation pour votre carrousel. S'en est un très bel exemple. Testé sous un vieil IE6, j'ai été étonné de découvrir une navigation moyennement fluide et je n'ai trouvé aucun bug.
Seulement, le problème principal de ce code est surtout du côté de l'ergonomie. Il se prend difficilement en main. Je n'ai testé que la version en ligne, il m'est donc impossible de voir si certains trucs sont configurables. Par exemple, les images qui vont d'un sens à un autre et arrête selon la position de la souris peut devenir rapidement frustrant. Et lorsque l'on clique sur une photo, l'image apparaît, tout simplement. Le fond devrait être un peu plus grisâtre pour que l'on sache que l'on est en mode "plein écran". Aussi, une absence de bouton "Fermer" ou au minimum un "X" est décevant. Même cliquer sur l'image ne la ferme pas. Il faut cliquer sur le cadrage. Que faire si l'image prend toute la page ??? La taille des écrans partout dans le monde n'est jamais la même et ce serait frustrant que quelqu'un reste pris sur la page et soit obligé de recharger la page.
Du côté du code maintenant :
Une programmation orienté objet aurait été plus pratique. Du genre :
var test=new Carrousel({
img:["monimage1.jpg","monimage2.jpg"],
element:document.getElementById('conteneur'),
vitesse:2000
});
Carrousel.start();
Carrousel.stop();
Le code contient beaucoup de document.getElementById, donc d'ID en brute. J'y tiens comme conclusion qu'il est impossible de mettre deux carrousels sur la même page.
Aussi, je ne comprends pas. Il faut des images "mini" et des images "tailles normales" ? Pourquoi ne pas tout simplement redimensionner les images ?
Il serait aussi formidable de rajouter des options, comme la possibilité de mettre des liens, ou une description.
J'ai été étonné de voir ceci dans ton code:
"
if(navigator.appName.substring(0,3)!="Mic"){
"
Entre autre, à la ligne 70, 153 et 44 de elipse.js . Pourquoi ne pas tester "document.all" ? En autre, à la ligne 70, il me semble qu'il aurait été plus pratique de faire :
"
var lui=(event.srcElement) ? event.srcElement : e.currentTarget;
"
Autres petits détails :
Ligne 125 de elipse.js : if(i!=0){ aurait été compressable par else{
Ligne 31 de elipse. js : this.rot=this.rot+oml aurait été compressable par this.rot+=oml
Nombreux autres petits détails où il aurait été facile de compresser ne serait-ce que pour ôter quelques petits octets.
Par contre, du côté de voile.js, je ne peux que te féliciter de l'utilisation nombreuse de "with".
Ligne 71 : Cette ligne, je ne comprends pas. Pourquoi ne pas tester directement document.documentElement au lieu de navigator.vendor qui n'est pas supporté par les vieux navigateurs et certains navigateurs alternatif ?
Ligne 81 : Il aurait été bien de rajouter la compatibilité avec l'ancienne forme d'opacité de Firefox, soit -moz-opacity
Ligne 89 : Techniquement, position:fixed ne fonctionne pas avec IE6 ? Vous dites que cela ne fonctionne pas avec IE6 mais à ma connaissance, position:fixed ne fonctionne pas non plus toujours avec IE7.
Finalement, pour toute le code, très nombreuses absences de point-virgules (;). Donc, impossible à compresser.
Donc, en résumé, votre code est excellent ^^ Ne prenez pas les petites notes que j'ai mis comme un échecs mais plutôt comme des recommandations. Je travaille à écrire un tutoriel sur la compression de code en utilisant de petits détails comme je vous ai notés en haut et j'ai choisi votre code pour voir si j'étais capable de moi-même les détecter.
Donc, à retenir de mon évaluation pour le moins complète : Une ergonomie à revoir, une technique d'installation plus simple et la possibilité de mettre des options.
Je préfère ne pas voter pour l'instant, j'attend de voir ce que vous allez répondre car malheureusement, je ne pourrais pas changer ma note.
--------------
Note : 7/10