visionneuse d'image type msn |
|
Voir le sujet précédent :: Voir le sujet suivant |
Auteur |
Message |
meo html mioche
|
visionneuse 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 ...
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
|
|
|
meo html mioche
|
visionneuse 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 ...
Je vais continuer de chercher mais si quelqu'un peu m'avancer un peu ...
merci |
|
|
meo html mioche
|
visionneuse d'image type msn , Posté le: 10-11-2006 23:56 |
|
|
C'est bon, je me suis débrouillée |
|
|
melodimagic frontpage mioche
|
visionneuse 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. |
|
|
|
|
S'enregistrer
Profil
Se connecter pour vérifier ses messages privés
Rechercher
Membres
FAQ
Connexion
|