PDA

View Full Version : 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.


<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
<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


<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
<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>