créer un site


visionneuse d'image type msn

Poster un nouveau sujet sur javascript   Répondre au sujet à javascript:visionneuse d'image type msn    Accueil Forum -> javascript
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
meo
html mioche
html mioche
Messagevisionneuse d'image type msn , Posté le: 08-11-2006 11:28

Bonjour !

Ca fait un petit moment que je cherche, donc je viens quémander ... Laughing

J'aurais besoin d'une visionneuse type de celle qui est présente sur les blog photos de msn : une visionneuse principale et une autre sous forme de négatif/diapositive qui peut défiler à droite ou à gauche.

vous savez où trouver Question
Rolling Eyes
meo
html mioche
html mioche
Messagevisionneuse d'image type msn , Posté le: 08-11-2006 14:39

Bon, j'ai trouvé ca :
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Carousel Slideshow</title>
<script type='text/javascript'>
function carousel(params){
  if(!(params.width>0&&isFinite(params.width)))params.width=100;
  if(!(params.height>0&&isFinite(params.height)))params.height=100;
  if(!(params.sides>2&&isFinite(params.sides)))params.sides=4;
  if(!(params.steps>0&¶ms.steps<100&&isFinite(params.steps)))params.steps=20;
  if(!(params.speed>0&&isFinite(params.speed)))params.speed=8;
  if(!(params.image_border_width>=0&&isFinite(params.image_border_width)))params.image_border_width=0;
  if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();
 
  document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[\r\n\t ]+/g,'_')+"'></div>");
  var cdiv=document.getElementById(params.id.replace(/[\r\n\t ]+/g,'_'))
  cdiv.style.width=params.width+'px';
  cdiv.style.height=params.height+'px';
  cdiv.style.border=params.border;
  cdiv.style.position='relative';
  cdiv.style.overflow='hidden';
  cdiv.title=params.id;
   
  var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;
  interval=isNaN(interval)?200:interval;
  var img_position=[],images=[],img_dimension=[];
  var img_index=params.images.length+1,img_index_cap=2*params.images.length;
  var faces=Math.ceil(params.sides/2), dimension, direction;

  function init(){
    if(params.direction=="left" || params.direction=="right"){
      direction=params.direction;
      dimension="width";
      }
    else if(params.direction=="top" || params.direction=="bottom"){
      direction=params.direction;
      dimension="height";
      }
    else {
      direction="left";
      dimension="width";
      }     
    cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
    var img=new Image();
    img.style.position='absolute';
    img.style[direction]='10000px';
    img.style.width=params.width-2*params.image_border_width+'px';
    img.style.height=params.height-2*params.image_border_width+'px';
    img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;
 
    for(var i=0;i<params.images.length;i++){
      images[i]=img.cloneNode(true);
      images[i].src=params.images[i];
      if(params.links&¶ms.links[i]&¶ms.links[i]!=''){
        images[i].onclick=new Function("window.location='"+params.links[i]+"'");
        images[i].style.cursor=document.all?'hand':'pointer';
        }
      if(params.titles&¶ms.titles[i]&¶ms.titles[i]!='')
        images[i].title=params.titles[i];
      images[i+params.images.length]=images[i];
      if(params.images.length==faces)
        images[i+2*params.images.length]=images[i];
      cdiv.appendChild(images[i]);
      }
 
    var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);
    var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
    var pi_piece=2*Math.PI/params.steps/params.sides;
    for(i=0;i<=params.steps*faces;i++){
      img_dimension[i]=face_size*Math.sin(pi_piece*i);
      img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':'10000px';
      img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';
      }
    }
  init();

  cdiv.rotate = function(){
    setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);
    if(!spinning) return;
    if(++counter>=params.steps){
      counter=0;
      if(++img_index>=img_index_cap)
        img_index=params.images.length;
      }
    images[img_index-faces].style[direction]='20000px';
    for(var i=faces-1;i>=0;i--){
      images[img_index-i].style[direction]=img_position[counter+i*params.steps];
      images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
      }
    }
  cdiv.onmouseover=function(){
    spinning=false;
    }
  cdiv.onmouseout=function(){
    spinning=true;
    }
  setTimeout('document.getElementById("'+cdiv.id+'").rotate()',200);
  }
</script>
</head><body>
      <div id=right_bar style='width:90px;float:right;'>
         <h4></h4>
      </div>
      <div id='header' style='height:175;padding:10px;background-color:#eee;width:570px'>
         <div style='float:left'></div>
         <div style='clear:left'>
<script type='text/javascript'>
carousel({id:'carousel_7',
          border:'',
          size_mode:'carousel',
          width:287,
          height:35,
          sides:24,
          steps:5,
          speed:11,
          direction:'right',
          images:['http://www.codingforums.com/images/icons/icon7.gif',
                  'http://www.codingforums.com/images/icons/icon8.gif',
                  'http://www.codingforums.com/images/icons/icon3.gif',
                  'http://www.codingforums.com/images/icons/icon4.gif',
                  'http://www.codingforums.com/images/icons/icon5.gif',
                  'http://www.codingforums.com/images/icons/icon9.gif',
                  'http://www.codingforums.com/images/icons/icon10.gif',
                  'http://www.codingforums.com/images/icons/icon13.gif',
                  'http://www.codingforums.com/images/icons/icon12.gif',
                  'http://www.codingforums.com/images/icons/icon11.gif',
                  'http://www.codingforums.com/images/icons/icon2.gif',
                  'http://www.codingforums.com/images/icons/icon6.gif'],
          links: ['http://www.codingforums.com/',
                  'http://www.codingforums.com/',
                  'http://www.codingforums.com/',
                  'http://www.codingforums.com/'],
          titles:[],
          image_border_width:1,
          image_border_color:'blue'
          });
</script></div>
      </div>
   </body></html>


Mais je n'arrive pas à faire en sorte qu'un lien image du carroussel aboutisse dans une zone 'diaporama' sur la même page, en plus grand ...
Rolling Eyes

Je vais continuer de chercher mais si quelqu'un peu m'avancer un peu ... Wink

merci
meo
html mioche
html mioche
Messagevisionneuse d'image type msn , Posté le: 10-11-2006 23:56

C'est bon, je me suis débrouillée Wink
melodimagic
frontpage mioche
frontpage mioche
Messagevisionneuse d'image type msn , Posté le: 18-08-2007 16:18

Bonjour, j edébute
je cherche le code pour créer une visionneuse d'image automatique (diaporama avec une seule image à chaque fois).
Vu ton message je pense que tu peux m'aider.
Montrer les messages depuis:   
Poster un nouveau sujet sur javascript   Répondre au sujet à javascript:visionneuse d'image type msn    Accueil Forum -> javascript Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales