|
HTML - Iframe Slideshow Not Working When Launched To The Web
I have been designing a website for a client with an iframe inserted slideshow. You can view the site @ www.tabernacleofdavidwc.com. The slideshow works fine on the page locally on Dreamweaver on my computer. However, when I launch the website live to web, the slideshow no longer functions. The slideshow file labeled "Demo_6.html" is definitely loaded to the server in the right place. What do I need to change in my html? :
Quote: <!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>Untitled Document</title> <script src="Scripts/AC_ActiveX.js" type="text/javascript"></script><script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <style type="text/css"> * {margin:0} a img { border: none; } </style></head> <body> <table width="1305" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="740"><img src="../TD Main Tester/TDMain_Header.gif" width="740" height="135" /></td> <td width="565"><img src="../TD Main Tester/TDMain_Header2.gif" width="540" height="135" /></td> </tr> <tr> <td><img src="../TD Main Tester/TDMain_HomeLeft.gif" width="185" height="48" /><img src="../TD Main Tester/TDMain_Home.gif" width="130" height="48" /><img src="../TD Main Tester/TDMain_about.gif" width="135" height="48" /><img src="../TD Main Tester/TDMain_Events.gif" width="148" height="48" /><a href="../Users/macbookpro/Documents/TD Media 2.html"><img src="../TD Main Tester/TDMain_Media.gif" width="142" height="47" /></a></td> <td><img src="../TD Main Tester/TDMain_Store.gif" width="146" height="48" /><img src="../TD Main Tester/TDMain_Contact.gif" width="136" height="48" /><img src="../TD Main Tester/TDMain_ContactRight.gif" width="258" height="48" /></td> </tr> <tr> <td><img src="../TD Main Tester/TDMain_SlideLeft.gif" width="185" height="343" /><iframe src="Demo_6.html" height="344" width="555" scrolling="no" frameborder="0"></iframe></td> <td><img src="../TD Main Tester/TDMain_LeftWord.gif" width="42" height="121" /><img src="../TD Main Tester/TDMain_WordWeek.gif" width="303" height="121" /><img src="../TD Main Tester/TDMain_WordRight.gif" width="195" height="121" /><body><img src="../TD Main Tester/TDMain_SWFLeft.gif" width="42" height="222" /><script type="text/javascript"> AC_AX_RunContent( 'width','303','height','223','src','WheatonEditP-20110614-164244/WheatonEditP.swf','allowscriptaccess','always','allowfullscreen','true','flashvars','poster=file:Mac intosh/video_still.jpg','movie','WheatonEditP.swf' ); //end AC code </script><noscript><object width="303" height="223"> <param name="movie" value="WheatonEditP.swf"> <param name="allowfullscreen" value="true"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="poster=file:Macintosh/video_still.jpg"/> <embed src="WheatonEditP-20110614-164244/WheatonEditP.swf" width="303" height="222"allowscriptaccess="always" allowfullscreen="true" flashvars="file:Macintosh/video_still.jpg"> </embed> </object></noscript> <img src="../TD Main Tester/TDMain_SWFRight.gif" width="195" height="222" /></tr> <tr> <td><img src="../TD Main Tester/TDMain_Middle1.gif" width="740" height="22" /></td> <td><img src="../TD Main Tester/TDMain_Middle2.gif" width="540" height="22" /></td> </tr> <tr> <td><img src="../TD Main Tester/TDMain_PrayerLeft.gif" width="182" height="125" /><img src="../TD Main Tester/TDMain_Prayer.gif" width="181" height="125" /><img src="../TD Main Tester/TD_PrayerServices.gif" width="10" height="125" /><img src="../TD Main Tester/TDMain_Services.gif" width="178" height="125" /><img src="../TD Main Tester/TDMain_ServicesDonate.gif" width="13" height="125" /><img src="../TD Main Tester/TDMain_Donate.gif" width="176" height="125" /></td> <td><img src="../TD Main Tester/TDMain_MiracleLeft.gif" width="42" height="125" /><img src="../TD Main Tester/TDMain_Miracle.gif" width="303" height="125" /><img src="../TD Main Tester/TDMain_MiracleRight.gif" width="195" height="125" /></td> </tr> <tr> <td><img src="../TD Main Tester/TDMain_Bottom1.gif" width="740" height="20" /></td> <td><img src="../TD Main Tester/TDMain_Bottom2.gif" width="540" height="20" /></td> </tr> </table> </body> </html> Similar TutorialsThis is the code my shopping cart provider sent me: Code: <a href="HOST URL/ecom/gb.php?c=cart&i=LFR-1&cl=hidden&ejc=2" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="HOST URL/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> I am trying to get this to launch (I removed the img tag code to prevent the button from drawing) from an Image Map. Instead of opening a window over the page, it opens the shopping cart in another tab. I need this to open normally (as a window with the original page in the background). After several days, I'm stumped. Here is the image map code for reference: Code: <map name="MAP"> <area shape="rect" coords="765,229,934,253" href="#"> </map> I have searched the internet for a solution to this but no luck. I am trying to embed several websites into one webpage using the iframe method. Trouble is that the pages don't load. I changed my security settings in IE to allow iframes but all that does is give me a popup to "Fix Security Settings". The pages don't load even with this setting as is, and now I just get annoying messages about my security settings. Is there a way around this? Hello all, recently I uploaded a website that I have been working on. Everything looks great and all is functional (except the gallery loads really slow...gotta figure that out). But anyways, I am trying to make a document that was saved as a web page (a feature of word) show up on internet explorer. I have found that the <iframe allowtransparency="true"> works for many people, but it hasn't worked for me yet. Does anyone have any possible solutions? Thanks in advance, Mitch [EDIT:] Never mind guys, I figured it out. All I had to do was go into the file that was connected with the iframe, and change the background of that to <!-- BODY {background:none transparent;}--> Thanks anyways hi, i've a very simple html page, where i have an iframe. The problem is that i want to add some text below the iframe. however, my text keeps showing up on the right hand side of the iframe. i've looked at the tutorials discussing the tags available for iframe, but surprisingly, none seem to relevant to this. Code: <html> <body> <table border="0" cellspacing="10"> <table border="0" cellpadding="0" cellspacing="0" align="left"> <td valign="top"> <iframe src="mySource.jsp" height="700" width="600" frameborder="0" scrolling="auto"></iframe> </td> </table> This should be displayed below the iframe but actually gets displayed on the right </body> </html> any help / guidance in this will be much appreciated. thanks in advance! I have 2 IFrames on a page. I am going to end up with a long list of shows to catch-up on. Is there a way I can embed an IFrame with the list, and when you click on a show, you it will change the Playing Show http://tiny.cc/catchup <---The page I am referring to. Now here is my problem. I'm not familiar with other laguages then html and a little bit of javascript and I wanted to make a site for me and my brothers photography company. I currently using dreamweaver and have figured out the way I want to make this site. I tried using ordinary frames, but I want the website to be aligned in the middle and I could make that happen. That is why I went into iframes and a regular table on the index page. My problem now is that I have several iFrames and I want a link from one to open in another. http://www.trans4mind.com/personal_d...e/iframes3.htm here is a link for this to happen, and the simple solution is to name the frame and then target the link. but I have tried that and when the link is from one iframe to another it won't work. If the link is on the index page and target the iframe then it works. Do you have any idea why this happens? I know it's possible since the link above does it. Hi! I've been cracking my head trying to solve this: How can I insert a iframe [i.e. 300x200px] inside of another iframe [i.e. 700x500px] and pull different web content n each one? kind of concentric iframes or like a 'Donut iframe' There are about 200 photos in a folder d:\photos\. How to make a script to display slideshow of all photos one by one without entering each photo's name? I found a script which displays all photos but need to input all photos' name. Right, I have started up a gaming website and I need that Headline Slideshow feature implemented soon as. Here is what I'm struggling with: I want to swap the normal action buttons (supplied by the slide generator *liink at bottom) with images I have created. Buttons I want changed too (<)Left button =http://i40.tinypic.com/mrftlc.jpg (>)Right button =http://i39.tinypic.com/5wuo5.jpg I do not want any other action buttons. But I want my images to be placed around the slide like so http://i40.tinypic.com/2176tf.jpg Here is the Code: Code: <!-- configurable script -->
<script type="text/javascript">
theimage = new Array();
// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];
theimage[1]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];
///// Plugin variables
playspeed=5000;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;
//###########################################
window.onload=function(){
//preload images into browser
preloadSlide();
//set the first slide
SetSlide(0);
//autoplay
PlaySlide();
}
//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;
//switch the image
document.images.imgslide.src=theimage[i][0];
//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];
}
//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}
//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}
//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}
</script>
<!-- slide show HTML -->
<form name="slideshow">
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
<tr>
<td align="center"><div id="slidebox"></div></td>
</tr>
<tr>
<td align="center">
<input type="button" value="I<<" onclick="SetSlide(0);" title="Jump to starting image">
<input type="button" value="<<" onclick="SetSlide(i-1);" title="Previous image">
<input type="button" name="play" value=" Play " onclick="PlaySlide();" title="Autoplay">
<input type="button" value=">>" onclick="SetSlide(i+1);" title="Jump to next image">
<input type="button" value=">>I" onclick="SetSlide(theimage.length-1);" title="Jump to ending image">
</td>
</tr>
</table>
</form>
<!-- end of slide show HTML -->
(code generated from http://www.ricocheting.com/code/java...e-slideshow-v2 if that helps) PLEASE NOTE: We do not want the (>>) (<<) or <PLAY> buttons. Just as above. We would gratefully accept any help - we are really bad with HTML. We have contacted the developer of the code but as of posting there has been no response. Thx. <div style="width:600px; text-align: center;"><embed type="application/x-shockwave-flash" wmode="transparent" src="http://w22.photobucket.com/pbwidget.swf?pbwurl=http://w22.photobucket.com/albums/b339/ashezfal/product-misc/91c6ecdd.pbw" height="180" width="600"><a href="http://photobucket.com/slideshows" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn.gif" style="float:left;border-width: 0;" ></a><a href="http://s22.photobucket.com/albums/b339/ashezfal/product-misc/?action=view¤t=91c6ecdd.pbw" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn_viewallimages.gif" style="float:left;border-width: 0;" ></a></div> This is the html code for a photobucket slideshow that i am trying to use on my website. my problem is that when you click on it, it takes you to my album. I know i can change that on photobucket preferences but i just want to make it so that it can't be clicked at all. Can anybody help me? How do I make a slideshow where images roll and when clicked on go to another page? I want to position my slideshow in the center of the side. the buttons are positioned with css. http://javascript.lima-city.de/ Who can help ? Hi everyone, I'm looking for a html/css script that will allow me to do something similar to the image slideshow on http://trilogyproducts.com/. The Trilogy Products slideshow is in flash, however we were hoping to replicate it in HTML - in particular the fade in and out automated slideshow, PLUS the ability to click on to the little circle navigation and fade out the current shot and fade in the selected shot. Any help would be very much appreciated. Thanks Bec I want to create a slideshow, with the pictures rotating at the bottom of my webpage. However, when the page changes it jumps back to the top of the page. Does anyone know how to prevent this? Thanks. Hi, i'm trying to design a webpage and I was wondering if there was a way to create a row of pictures that ONLY scroll like a slideshow when the cursor is hovering over the buttons. Is it possible? How? Thanks below there is a piece of code with slideshow (I took it from http://www.ricocheting.com/code/java...mage-slideshow). I can see only the first picture, not the rest. Can someone help me? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>try5</title> </head> <body> <script type="text/javascript"> // Author: ricocheting.com // Description: slideshow that allows visitors to flip through a series of images on your website var x=0; function rotate(num){ fs=document.ff.slide; x=num%fs.length; if(x<0) x=fs.length-1; document.images.show.src=fs.options[x].value; fs.selectedIndex=x;} function auto() { if(document.ff.fa.value == "Stop"){ rotate(++x);setTimeout("auto()", 5000);}} </script> <form name="ff"> <table style="border: 1px solid black; border-collapse: collapse;" cellpadding="3"> <tbody> <tr> <th align="center"></th> </tr> <tr> <td align="center"><img src="IMG0.JPG" name="show"> </td> </tr> <tr> <td style="border: 1px solid black;" align="center"> <select name="slide" onchange="rotate(this.selectedIndex);"> <option value="IMG0.JPG"></option> <option value="IMG1.JPG"></option> </select> </td> </tr> <tr> <td style="border: 1px solid black;" align="center"><input onclick="rotate(0);" value="ll<<" title="Jump to beginning" type="button"> <input onclick="rotate(x-1);" value="<<" title="Last Picture" type="button"><input name="fa" onclick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Stop" title="Autoplay" style="width: 75px;" type="button"> <input onclick="rotate(x+1);" value=">>" title="Next Picture" type="button"><input onclick="rotate(this.form.slide.length-1);" value=">>ll" title="Jump to end" type="button"> </td> </tr> </tbody> </table> </form> </body> </html> I'm making a website for a club in my school. I'm trying to put a slideshow script that has javascript and css into the page, and I've gotten it to fit and everything, but the slideshow isn't functioning. Independently, the slideshow works. Here are the links. It would be great if someone could help me with this. Problematic Site: http://www.freewebs.com/valleykey/new.htm Site without slideshow: http://www.freewebs.com/valleykey/ Slideshow: http://www.freewebs.com/valleykey/1.htm I am having problem aligning text next to a javascript slideshow in a table. I can't get text to sit next to the show. It always goes on the top or bottom. Please, any help? Hey, I'm helping design a site www.tbdgaming.com and we have an ad box up top that shows different pictures and captions for each one, and what we'd like to do is have those pictures (theres 5) switch every x seconds to the next one, and we'd like it to be clean. The code is: Code: <!-- starting headlines -->
<div class="headlineWrap" id="headlineWrap">
<!-- headline 1 -->
<div id="headline1">
<a href=""><img src="http://i39.tinypic.com/2zycr3n.gif" alt="" /></a>
<div class="headlineContent">
<div class="headlineTxt">To Be Determined - Coming Soon</div>
<div class="headlineSwitch">
<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1on.gif" alt="" /></a>
<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
</div>
</div>
</div>
<!-- headline 2 -->
<div id="headline2" style="display: none;" >
<a href=""><img src="http://i42.tinypic.com/aazxqh.gif" alt="" /></a>
<div class="headlineContent">
<div class="headlineTxt">To Be Determined - Coming Soon</div>
<div class="headlineSwitch">
<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2on.gif" alt="" /></a>
<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
</div>
</div>
</div>
<!-- headline 3 -->
<div id="headline3" style="display: none;" >
<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
<div class="headlineContent">
<div class="headlineTxt">To Be Determined - Coming Soon</div>
<div class="headlineSwitch">
<a href="#javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3on.gif" alt="" /></a>
<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
</div>
</div>
</div>
<!-- headline 4 -->
<div id="headline4" style="display: none;" >
<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
<div class="headlineContent">
<div class="headlineTxt">To Be Determined - Coming Soon</div>
<div class="headlineSwitch">
<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4on.gif" alt="" /></a>
<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
</div>
</div>
</div>
<!-- headline 5 -->
<div id="headline5" style="display: none;" >
<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
<div class="headlineContent">
<div class="headlineTxt">To Be Determined - Coming Soon</div>
<div class="headlineSwitch">
<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5on.gif" alt="" /></a>
</div>
</div>
</div>
</div>
<!-- ending headlines -->
And again the site is www.tbdgaming.com, so if anyone could send me the HTML or non-executable java (no .jars to be added to directories) so that the pictures would rotate between eachother I'd really appreciate it. Also if there it a way to shorten the code I would appreciate it, as you can see its very long because its divided up so that each headline is separately coded to work when selected, but is there some way I can combine it into one compact space so that it functions the same but is shorter? Hello, i am trying to implement a basic slideshow on my website. My code is as follows: <img id="img1" height="500" src="" width="500" /> <a href="javascript:moveToNextSlide()">Next</a> <script type="text/javascript">> var index=31; function moveToNextSlide() { var slideName="slideshowimages/IMG_00" + index++ + ".jpg"; var img1 = document.getElementById("img1"); img1.src = slidename; } moveToNextSlide(); </script> each image is called IMG_00 followed by a number from 31-41 .jpg. when i view the page the image doesn't appear, there is just a small red cross in a white box and the next function doesn't work.Please can someone help me! Cheers, Peter |
|||||||