tinfanide Posted August 8, 2011 Share Posted August 8, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Slayeroffice Image Slider (altered)</title><!--http://slayeroffice.com/code/imageCrossFade/xfade2.html--><script>var imgs = new Array(), current=0;window.onload = function so_init() { if(!document.getElementById || !document.createElement){ return; } imgs = document.getElementById("imageContainer").getElementsByTagName("img"); for(i=1;i<imgs.length;i++){ imgs[i].xOpacity = 0; } imgs[0].style.display = "block"; imgs[0].xOpacity = .99; setTimeout(so_xfade,1000);}function so_xfade() { cOpacity = imgs[current].xOpacity; nIndex = imgs[current+1] ? current+1 : 0; nOpacity = imgs[nIndex].xOpacity; cOpacity-=.05; nOpacity+=.05; imgs[current].xOpacity = cOpacity; imgs[nIndex].xOpacity = nOpacity; imgs[nIndex].style.display = "block"; setOpacity(imgs[current]); setOpacity(imgs[nIndex]); if(cOpacity<=0) { imgs[current].style.display = "none"; current = nIndex; setTimeout(so_xfade,1000); } else { setTimeout(so_xfade,100); }}function setOpacity(obj) { if(obj.xOpacity>.99) { obj.xOpacity = .99; return; } obj.style.opacity = obj.xOpacity; obj.style.MozOpacity = obj.xOpacity; obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; }</script><style>#imageContainer { height:309px;}#imageContainer img { display:none; width:500px; height:309px; position:absolute; top:0; left:0;}</style></head><body><div id="imageContainer"> <img src="http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" alt="Swimming Pool Water" /> <img src="http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" alt="Notebook" /> <img src="http://www.techlifeweb.com/facebook_logo.jpg" alt="Bottle Neck" /> <img src="http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" alt="Nail in a Board" /></div></body></html> The codes above were taken reference from some template online.I changed the above one in the way that the images are not stored in the html, but in the below one stored in javascript array.But I think I place the document.getElementById("imageContainer").src = imgs[current];in the wrong place.How could I fix it so that the images are loaded in the javascript array to make the slides run properly? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Slayeroffice Image Slider (altered)</title><script>var imgs = new Array();imgs[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";imgs[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";imgs[2] = "http://www.techlifeweb.com/facebook_logo.jpg";imgs[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";for(var image=[], p=0; p<imgs.length; p++){ image[p] = new Image(); image[p].src = imgs[p]; }var current = 0;window.onload = function so_init() { if(!document.getElementById || !document.createElement){ return; } for(i=1;i<imgs.length;i++){ imgs[i].xOpacity = 0; } imgs[0].xOpacity = .99; setTimeout(so_xfade,1000);}function so_xfade() { cOpacity = imgs[current].xOpacity; nIndex = imgs[current+1] ? current+1 : 0; nOpacity = imgs[nIndex].xOpacity; cOpacity-=.05; nOpacity+=.05; imgs[current].xOpacity = cOpacity; imgs[nIndex].xOpacity = nOpacity; imgs[nIndex].style.display = "block"; setOpacity(imgs[current]); setOpacity(imgs[nIndex]); if(cOpacity<=0) { imgs[current].style.display = "none"; current = nIndex; setTimeout(so_xfade,1000); } else { setTimeout(so_xfade,100); } document.getElementById("imageContainer").src = imgs[current];}function setOpacity(obj) { if(obj.xOpacity>.99) { obj.xOpacity = .99; return; } obj.style.opacity = obj.xOpacity; obj.style.MozOpacity = obj.xOpacity; obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; }</script><style>#imageContainer { height:309px;}#imageContainer img { width:500px; height:309px; position:absolute; top:0; left:0;}</style></head><body><img id="imageContainer" src="http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" /></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 8, 2011 Share Posted August 8, 2011 There are several problems with your conversion. The major one is that in the original code the array is an array of image elements, and in your code it is an array of strings. The original code tries to change properties of the image elements that are not defined on strings. Another problem is that the original code is doing a crossfade, where it fades one image out and another one in. Your code only has a single image, so it can either fade it out or in but not both. If you were implementing a crossfade with a single element you would need to constantly be changing the src between the two images and adjusting the opacity each time in a staggered timeout situation, where one timeout runs to adjust one image, then another one runs to adjust the other image, etc, back and forth. The major problem though is that you're trying to use an array of strings like they're image elements on the page. Link to comment Share on other sites More sharing options...
tinfanide Posted August 9, 2011 Author Share Posted August 9, 2011 There are several problems with your conversion. The major one is that in the original code the array is an array of image elements, and in your code it is an array of strings. The original code tries to change properties of the image elements that are not defined on strings. Another problem is that the original code is doing a crossfade, where it fades one image out and another one in. Your code only has a single image, so it can either fade it out or in but not both. If you were implementing a crossfade with a single element you would need to constantly be changing the src between the two images and adjusting the opacity each time in a staggered timeout situation, where one timeout runs to adjust one image, then another one runs to adjust the other image, etc, back and forth. The major problem though is that you're trying to use an array of strings like they're image elements on the page.So could you suggest where I start re-scripting so that the array of strings can be made into an array of images?I found it very difficult to link the array part with the crossfade part. This is what gets me stuck on the way.Basically I altered the scripts and tried to deal with the array issue after asking for advice from other coders online. But I was still confused with what I was given:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Slayeroffice Image Slider (altered)</title><script>var img = new Array();img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";for(var image=[], p=0; p<img.length; p++){ image[p] = new Image(); image[p].src = img[p]; }var current = 0;window.onload = function so_init() { if(!document.getElementById || !document.createElement){ return; } var imgs = [];for(var q=0; q<img.length; q++){ newImg = document.createElement("img"); newImg.src = img[q]; newImg.style.display = "none"; imgs.push(newImg); // I don't know what the next line is supposed to do. newImg is not a DOM node yet ... you didn't attach it anywhere, so maybe you can't clone it document.getElementById("imageContainer").appendChild(newImg.cloneNode(true));} for(i=1;i<img.length;i++){ imgs[i].xOpacity = 0; } imgs.style.display = "block"; imgs.xOpacity = .99; setTimeout(so_xfade,1000);}function so_xfade() { cOpacity = imgs[current].xOpacity; nIndex = imgs[current+1] ? current+1 : 0; nOpacity = imgs[nIndex].xOpacity; cOpacity-=.05; nOpacity+=.05; imgs[current].xOpacity = cOpacity; imgs[nIndex].xOpacity = nOpacity; imgs[nIndex].style.display = "block"; setOpacity(imgs[current]); setOpacity(imgs[nIndex]); if(cOpacity<=0) { imgs[current].style.display = "none"; current = nIndex; setTimeout(so_xfade,1000); } else { setTimeout(so_xfade,100); }}function setOpacity(obj) { if(obj.xOpacity>.99) { obj.xOpacity = .99; return; } obj.style.opacity = obj.xOpacity; obj.style.MozOpacity = obj.xOpacity; obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; }</script><style>#imageContainer { height:309px;}#imageContainer img { width:500px; height:309px; position:absolute; top:0; left:0;}</style></head><body><div id="imageContainer"></div></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 9, 2011 Share Posted August 9, 2011 For each filename in the array, you can create a new image element, set it to invisible, and put it on the page in an image container div or something like that. You would need another array to hold the array of image elements. After that, the main difference would be toggling the visibility of the images that you're fading. Link to comment Share on other sites More sharing options...
tinfanide Posted August 10, 2011 Author Share Posted August 10, 2011 I'd do it step by step and please help check if I'm following: For each filename in the array, you can create a new image element, set it to invisible, and put it on the page in an image container div or something like that. var pic = new Array();pic[0] = new Image();pic[0].src = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";pic[1] = new Image();pic[1].src = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";pic[2] = new Image();pic[2].src = "http://www.techlifeweb.com/facebook_logo.jpg";pic[3] = new Image();pic[3].src = "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg";for(a=0; a<pic.length; a++){ pic[a].style.visibility = "invisible"; } <body><div id="imageContainer"></div></body> You would need another array to hold the array of image elements. After that, the main difference would be toggling the visibility of the images that you're fading.Sorry, I can hardly get what you meant. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 10, 2011 Share Posted August 10, 2011 You don't want a Javascript Image object, you want an HTML img element. var img = document.createElement('img'); // create a new img elementimg.setAttribute('src', 'http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png'); // set the srcimg.style.display = 'none'; // set display to nonedocument.getElementById('imageContainer').appendChild(img); // append to an existing elementpic.push(img); // add the img element to the array Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.