why slide show is not shown by browser

**dasht** · 05-18-2013, 10:37 AM

hi!
i am doing a project and want to make slide show of images and using this code for this but in browser it is not displaying that slide show plz help me and inform me if their is any mistake i am doing. need your early response. thanks in advance.

Code:

<html>
<head>
<script>
<!--
	var image1=new Image()
	image1.src="Healthy-Mix.jpg"
	var image2=new Image()
	image2.src="Bonvivant_bread.jpg"
	var image3=new Image()
	image3.src="Bonvivant.jpg"
	var image4=new Image()
	image4.src="candy-ice-cream.png"
	var image5=new Image()
	image5.src="Ice-Cream.png"
	var image6=new Image()
	image6.src="Mauj-Mango.png"
	var image7=new Image()
	image7.src="pizza.png"
	var image8=new Image()
	image8.src="products.jpg" 
//-->
</script>
</head>
<body>
<img src="Healthy-Mix.jpg" name="slide" width="601" height="355" alt="Healthy Mix" />
            	<script>
					<!--
					var step=1;
					function slideit(){
					if (!document.images){
					return
					document.images.slide.src=eval("image"+step+".src")
					}
					if (step<8){
						step++;
						}
					else{
						step=1;
						}
					setTimeout("slideit()",2500);
					}
					slideit();
					//-->
				</script>
</body>
</html>

**vwphillips** · 05-18-2013, 04:34 PM

Code:

<html>
<head>
<script>
<!--
	var image1=new Image()
	image1.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"
	var image2=new Image()
	image2.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg"
	var image3=new Image()
	image3.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg"
	var image4=new Image()
	image4.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg"
	var image5=new Image()
	image5.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg"
	var image6=new Image()
	image6.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg"
	var image7=new Image()
	image7.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg"
	var image8=new Image()
	image8.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg"
//-->
</script>
</head>
<body>
<img src="Healthy-Mix.jpg" name="slide" width="601" height="355" alt="Healthy Mix" />
            	<script>
					<!--
					var step=1;
					function slideit(){
					if (!document.images){
					return
					}
					document.images.slide.src=eval("image"+step+".src")
					if (step<8){
						step++;
						}
					else{
						step=1;
						}
					setTimeout("slideit()",2500);
					}
					slideit();
					//-->
				</script>
</body>
</html>

better

Code:

<html>
<head>
</head>
<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" id="slide" width="601" height="355" alt="Healthy Mix" />
<script>
<!--

var Images=[
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg'
];


function slideit(id,ary,ms){
 var o=slideit[id],rdy,z0=0;
 if (!o){
  o=slideit[id]={
   obj:document.getElementById(id),
   ary:[],
   ms:typeof(ms)=='number'&&ms>0?ms:1000,
   cnt:0
  }
  for (;z0<ary.length;z0++){
   o.ary[z0]=new Image();
   o.ary[z0].src=ary[z0];
  }
 }
 if (o&&o.obj){
  clearTimeout(o.to);
  rdy=o.ary[o.cnt]&&o.ary[o.cnt].width>40;
  if (rdy){
   o.obj.src=o.ary[o.cnt].src;
  }
  o.cnt=++o.cnt%o.ary.length;
  o.to=setTimeout(function(){ slideit(id); },rdy?o.ms:200);
 }
}

slideit('slide',Images,2500);

//-->
</script>
</body>
</html>

**dasht** · 05-24-2013, 07:15 AM

Problem Solved thanksalot

Is this the code of jquery?

If yes then can you please give me the code of hava script for slideshow because i am restricted to use javascript.

**vwphillips** · 05-24-2013, 09:17 AM

the posted code does not use JQUERY

**dasht** · 05-25-2013, 03:16 AM

If i want to add some transition effect just sliding images horizontly what change can i made for this? help plz

**vwphillips** · 05-25-2013, 09:59 AM

Code:

<html>
<head>
</head>
<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" id="slide" width="601" height="355" alt="Healthy Mix" />

<script>
<!--

var Images=[
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg',
 'http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg'
];


function slideit(id,ary,hold,ms){
 var o=slideit[id],rdy,z0=0,img,p;
 if (!o){
  img=document.createElement('IMG');
  img.style.position='absolute';
  img.style.zIndex='101';
  img.style.left='-3000px';
  img.style.top='-3000px';
  document.body.appendChild(img);
  o=slideit[id]={
   id:id,
   obj:document.getElementById(id),
   img:img,
   ary:[],
   hold:typeof(ms)=='number'&&hold>0?hold:2000,
   ms:typeof(ms)=='number'&&ms>0?ms:1000,
   cnt:0
  }
  for (;z0<ary.length;z0++){
   o.ary[z0]=new Image();
   o.ary[z0].src=ary[z0];
  }
 }
 if (o&&o.obj&&o.ary[o.cnt]){
  clearTimeout(o.to);
  rdy=o.ary[o.cnt]&&o.ary[o.cnt].width>40;
  if (rdy){
   p=pos(o.obj);
   zxcOpacity(o.img,0);
   o.img.style.width=o.obj.width+'px';
   o.img.style.height=o.obj.height+'px';
   o.img.style.left=p[0]+'px';
   o.img.style.top=p[1]+'px';
   o.img.src=o.ary[o.cnt].src;
   animate(o,0,100,new Date(),o.ms);
  }
  else {
   o.cnt=++o.cnt%o.ary.length;
   o.to=setTimeout(function(){ slideit(id); },200);
  }
 }
}

function animate(o,f,t,srt,mS){
 var ms=new Date()-srt,n=(t-f)/mS*ms+f;
 clearTimeout(o.dly);
 if (isFinite(n)){
  zxcOpacity(o.img,n);
 }
 if (ms<mS){
  o.dly=setTimeout(function(){ animate(o,f,t,srt,mS); },10);
 }
 else {
  zxcOpacity(o.img,2);
  o.obj.src=o.img.src;
  o.img.style.top='-3000px';
  o.cnt=++o.cnt%o.ary.length;
  o.to=setTimeout(function(){ slideit(o.id); },o.hold);
 }
}

function zxcOpacity(obj,opc){
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

function pos(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 }

// parameter 0 = the unique ID name of the image.                   (string)
// parameter 1 = an array of image SRCs.                            (array)
// parameter 2 = (optional) the auto 'hold' delay in milli seconds. (number, default = 2000)
// parameter 3 = (optional) the fade duration in milli seconds.     (number, default = 1000)
slideit('slide',Images,2500,1000);

//-->
</script>
</body>
</html>