• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 537
  • Last Modified:

javascript slide show not pulling images

Hi, all, I got this code from http://www dot codelifter.com/main/javascript/slideshow2 dot html. The picture of sausage you see partway down the page should fade into other images, 6 in all. But it's just a static image. Can anyone tell me where I went wrong? Thanks!
0
mel200
Asked:
mel200
  • 8
  • 6
1 Solution
 
James LooneySr. Programmer/AnalystCommented:
sausage? I don't see it.

Check your links again.
0
 
mel200Author Commented:
hmm. that's strange, I do see the sausage.. do you see this: http://www.best-butcher.com/images/slide_show/Image10.jpg? That is the first image.
0
 
James LooneySr. Programmer/AnalystCommented:
oh i thought you were talking about the link in your question - not the one in the tags. :)

This may seem a silly change, but just for grins, can you make your image code:

<img src="images/slide_show/Image10.jpg" name='SlideShow' width="277" height="171">
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mel200Author Commented:
Hey, I was just wondering, the images aren't all the exact same size, could that be it?
0
 
mel200Author Commented:
hmmm... unfortunately making all the images the same size didn't work, and changing the image code didn't either.. :/
0
 
mel200Author Commented:
Hi- Anyone mind if I ask the same question, but with different code this time? I got this from http://www.dynamicdrive dot com/dynamicindex14/fadeinslideshow dot htm, and installed it on my best-butcher dot com site. I don't see it at all. help!
0
 
mel200Author Commented:
hi again- the new page to look at is http://best-butcher dot com slash index2.html. Thanks again.
0
 
James LooneySr. Programmer/AnalystCommented:
I dont even see the sausage pic on the index2.html page.
0
 
James LooneySr. Programmer/AnalystCommented:
Oh wait, it's throwing two javascript errors.

 I think you need to change your <body tag, because runSlideShow is no longer a function on that page

<body onload="runSlideShow()"

It's also saying that fadeShow function is not defined
0
 
James LooneySr. Programmer/AnalystCommented:
Try this as index3.html

<!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=iso-8859-1" />
<title>Best Butcher</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
      
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["Image10.jpg", "", ""] //plain image syntax
fadeimages[1]=["Image8.jpg", "", ""] 
fadeimages[2]=["Image5.jpg", "", ""] 
fadeimages[3]=["Image7.jpg", "", ""] 
fadeimages[4]=["Image6.jpg", "", ""] 
fadeimages[5]=["Image9.jpg", "", ""]
 
 
 
var fadebgcolor="white"
 
////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
 
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
 
</script>
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
 
#pointermenu{
border-top: 7px solid black; /*optional border across top*/
margin: 0;
padding: 0;
}
 
#pointermenu ul{
margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 8px;
font: bold 13px Verdana;
background-color: black;
background: black url(media/leftround.gif) bottom left no-repeat; /*optional left round corner*/
}
 
* html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/
}
 
#pointermenu ul li{
display: inline;
}
 
 
#pointermenu ul li a{
float: center;
color: white;
font-weight: bold;
padding: 2px 11px 11px 11px;
text-decoration: none;
background: url(media/pointer.gif) bottom center no-repeat;
}
 
#pointermenu ul li a:visited{
color: white;
}
 
 
#pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/
color: white;
background-color: darkred;
}
 
#pointermenu ul li a#rightcorner{
padding-right: 0;
padding-left: 2px;
background: url(media/rightround.gif) bottom right no-repeat; /*optional right round corner*/
}    
 
</style></head>
 
<body onload="runSlideShow()" bgcolor="#000000">  <table width="730" border="0" align="center" cellpadding="10" cellspacing="0" bgcolor="#a81b21">
  <tr>
    <td valign="top">
<table width="720" border="0" cellspacing="0" cellpadding="10" bgcolor="#ffffff">
  <tr>
 
    <td><table align="center">
      <tr><td><strong><br />
      <br />
    </strong> </td>
    <td><img src="images/header).jpg" width="421" height="207" align="absmiddle" /></td><td>&nbsp;</td>
    </tr></table></td>
  </tr>
</table>
<table width="720"  border="0" cellspacing="0" cellpadding="10" bgcolor="#ffffff">
 
  <tr>
    <td><div id="pointermenu">
<ul>
<li><a href="cart">Our Shop</a></li>
<li><a href="recipes.html" >Recipes</a></li>
<li><a href="">Meats</a></li>
<li><a href="suggestions.html">Suggestions</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
 
<li><a href="/" id="selected">Home</a><a href="/index2.html" id="rightcorner">&nbsp;</a></li>
</ul>
</div>
<br style="clear: left" />
</td>
  </tr>
</table>
<table width="720" border="0" cellspacing="0" cellpadding="10" bgcolor="#ffffff">
  <tr>
    <td width="37" valign="top"><table width="100" border="2" cellpadding="10" cellspacing="0" bordercolor="#993333">
        <tr>
          <td valign="top"><p><strong>Bestsellers</strong></p>
 
            <p><img src="images/sm_img4.jpg" width="100" height="69" /></p>
            <p>&nbsp;</p></td>
          </tr>
      </table>
      <br />
      <table width="126" border="2" cellpadding="10" cellspacing="0" bordercolor="#993333">
        <tr>
          <td width="100" height="122" valign="top"><p><strong>Categories</strong></p>
 
              <p>Beef<br />
              Sausage<br />
              Pork<br />
              Chicken<br />
              </p>
              <p>&nbsp;</p></td>
        </tr>
 
      </table>      <p>&nbsp;</p></td>
    <td width="10"><img src="images/clear10x10.gif" width="10" height="10" /></td>
    <td width="475" valign="top"><h4><strong>Best Butcher -Your choice for <br />
      top-quality meats online!  </strong></h4>
      <p>If you are looking for the most tender, delicious meat online, look no further!	Best Butcher sells quality prime beef steaks such as Porter House Steaks, Ribeye Steaks, NY Steaks, Strip Steaks and Top Sirloin Steaks. We are committed to sending only the best steak  to our customers. </p>
      <p>Do you think steak is the ultimate? You may think again- Our gourmet Berkshire pork is famous for its flavor, juiciness, and tenderness. One bite and you'll see why these pork chops are known as the best pork available. We offer some great pork recipes and steak recipes, check them out for your next dinner party- your guests will be amazed!</p>
 
      <p>One of our most popular items has nothing to do with beef steak or pork chops- our Italian Sausage! Sicilian Sausage Links, Sicilian Sausage Coil, Italian Sausage Link, Italian Sausage Coil and Jalape&ntilde;o Cheddar Link -mouthwatering, handmade sausages perfect for the grill. Keep us in mind for your next party! </p>
      <p>We haven't forgotten the chicken lovers out there! Our tender, moist chicken breast portions are nicely spiced, marinated and stuffed. Try our Stuffed Mediterranean Chicken Breast for a them party, or serve Tapas alongside our Stuffed Spanish Chicken Breast! For simple elegance, grill our Lemon Pepper Marinated Chicken and serve with a light artichoke salad (see <a href="recipe.html">recipe</a>).</p>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, pause, optionalRandomOrder)
new fadeshow(fadeimages, 224, 169, 1, 3000, 1, "R")
 
</script>
   <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><br />
 
    </p></td>
    <td width="10"><img src="images/clear10x10.gif" width="10" height="10" /></td>
    <td width="88" valign="top"><table width="176" border="2" cellpadding="10" cellspacing="0" bordercolor="#993333">
      <tr>
        <td width="176" valign="top"><p><strong>Specials</strong></p>
            <p><img src="images/sm_img13.jpg" width="100" height="69" /></p></td>
        </tr>
      </table>   
      <br />
 
   <form method="post" action="http://oi.vresp.com?fid=a956273d60" target="vr_optin_popup" onsubmit="window.open( 'http://www.verticalresponse.com', 'vr_optin_popup', 'scrollbars=yes,width=600,height=450' ); return true;" >
  <div style="font-family: verdana; font-size: 11px; width: 160px; padding: 10px; border: 2px solid #993333; background: #FFFFFF;">
    <strong><span style="color: #333333;"></span></strong>
 
    <label style="color: #333333;">First Name:</label>    
    <span style="color: #f00">* </span>
    <br/>
    <input name="first_name" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/>
    <br/>
 
    <label style="color: #333333;">Last Name:</label>    <span style="color: #f00">* </span>
    <br/>
    <input name="last_name" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/>
    <br/>
    <label style="color: #333333;">Email Address:</label>    <span style="color: #f00">* </span>
    <br/>
 
    <input name="email_address" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/>
    <br/>
    <input type="submit" value="Join Now" style="margin-top: 5px; border: 1px solid #999; padding: 3px;"/>
    <span style="text-align: right; margin-top: 10px; margin-bottom: 10px;"><span style="color: #f00;">* </span><span style="color: #333333">required</span></span><br/>
    <br/>
  </div>
</form>
 
      <p>&nbsp;</p></td>
 
  </tr>
</table>
<table width="720" border="0" cellspacing="0" cellpadding="10" bgcolor="#ffffff">
  <tr>
    <td><div align="center">
      <p><a href="cart">Our Shop</a> | 
<a href="recipes.html" >Recipes</a> |
<a href="">Meats</a> |
 
<a href="suggestions.html">Suggestions</a> |
<a href="about.html">About Us</a> |
<a href="contact.html">Contact</a> |
<a href="/" id="selected">Home</a></p>
      <p>Best Butcher- copyright 2008 &nbsp;&nbsp;&nbsp;&nbsp;Site Design:&nbsp;<a href="http://www.codedivasites.com">CodeDiva</a> </p>
 
    </div>
      <p>&nbsp;</p></td>
  </tr>
</table>
 </td>
  </tr>
</table>
        <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-419110-8");
pageTracker._trackPageview();
} catch(err) {}</script>
 
      
</body>
</html>

Open in new window

0
 
mel200Author Commented:
Wow- problem solved while I was sleeping- thanks!  You were so right, the body onload was left over from some old code, sloppy!! Your index3 worked, what change did you make, mind me asking?
0
 
mel200Author Commented:
awesome.
0
 
James LooneySr. Programmer/AnalystCommented:
Thanks!

at the top, right before your <script> tag, there was this:

<style type="text/css">

Which was causing the javascript not to even execute.  And after the </script> tag, the style was closed with </style>

:)
0
 
mel200Author Commented:
oh, man- you rock. Thanks very much!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now