Results 1 to 8 of 8

Thread: Ultimate Fade-In Slideshow

  1. #1
    Join Date
    Mar 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Ultimate Fade-In Slideshow

    Script: Ultimate Fade-In Slideshow (v1.5)
    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    (1) I love this slideshow (www.viennapres.org)! However, I can only get it to work when I do NOT use the optional linking feature. When I put a URL in any/all of the link fields (ie, the second field of the fadeimages variable), the slideshow does not work. FrontPage gives an unknown error, and if I try to view it with IE 6 anyway, it just doesn't display the slideshow. FrontPage says the error is at the end of this section of the script:

    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
    }

    I copy-and-paste the URL into the array entries, so I know it is a good URL; specifically, this is what I use:

    http://www.viennapres.org/FFrame.asp?Pg=6&MGN=VPC-18

    Please HELP! Thanks. Bill

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Does it work when not using FrontPage?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It could be a syntax error in the array, what does the code for the array look like with the link included?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Mar 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Fade-In w/ Linkage

    (1) I use FrontPage mostly as an html editor. So even though the preview mode gives the error, I have still saved it (www.viennapres.org/index-zlink.asp), and with IE6 the slideshow does not display. To compare, look at www.viennapres.org (defaults to index.asp).

    (2) This is the array code with the linkage in:

    fadeimages[0] =["mission-images/zinn-images/img_0299 sm.jpg", "http://www.viennapres.org/FFrame.asp?MGN=VPC-18&Pg=6", ""]
    fadeimages[1] =["mission-images/zinn-images/img_0300 sm.jpg", "http://www.viennapres.org/FFrame.asp?MGN=VPC-18&Pg=6", ""]

    etc.

    Thanks.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The problem is the HTML link that you have around the slideshow code:

    Code:
    <a href="FFrame.asp?MGN=VPC-18&Pg=6" 
      style="text-decoration: none" target="_top">
      <font face="Verdana" size="1" color="white"><b>
      <u>Katrina Disaster Relief</u><br>
      VPC Mission Trip<br>
      February 2006<br></b></font>
      <script type="text/javascript">
      //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
      //new fadeshow(fadeimages, 148, 98, 0, 1500, 0, "R")
      new fadeshow(fadeimages, 148, 98, 0, 3000, 0)
      </script>
      <font face="Verdana" size="1" color="white"><b>
      Are <u>you</u> thinking about a Katrina Mission trip?<br>
      See larger photos from the Feb trip, as well as a Katrina 
      Relief Handbook.
      <img src="mission-images/zinn-images/img_0297 sm.jpg" width="148" height="98" border="0">
    </a>
    You can fix it like so:

    Code:
    <a href="FFrame.asp?MGN=VPC-18&Pg=6" 
      style="text-decoration: none" target="_top">
      <font face="Verdana" size="1" color="white"><b>
      <u>Katrina Disaster Relief</u><br>
      VPC Mission Trip<br>
      February 2006<br></b></font></a>
      <script type="text/javascript">
      //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
      //new fadeshow(fadeimages, 148, 98, 0, 1500, 0, "R")
      new fadeshow(fadeimages, 148, 98, 0, 3000, 0)
      </script>
      <a href="FFrame.asp?MGN=VPC-18&Pg=6" 
      style="text-decoration: none" target="_top"><font face="Verdana" size="1" color="white"><b>
      Are <u>you</u> thinking about a Katrina Mission trip?<br>
      See larger photos from the Feb trip, as well as a Katrina 
      Relief Handbook.
      <img src="mission-images/zinn-images/img_0297 sm.jpg" width="148" height="98" border="0">
    </a>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile That's It!

    Thanks; indeed that was the problem. I tried so many, many things, I'm surprised I didn't think to try that!

    Next Question: Is there a way to modify the script to put a caption underneath the images? We have a perfect application for that. (Maybe I need a new thread for this question).

    Thanks again for solving the other mystery!

    Bill

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's much easier. Find the fadeshow.prototype.populateslide=function and replace it with this one:

    Code:
    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 (typeof this.theimages[picindex][3]!='undefined')
    slideHTML+='<div>'+this.theimages[picindex][3]+'</div>'
    else
    slideHTML+='<div></div>'
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>'
    picobj.innerHTML=slideHTML
    }
    Now, you can add your captions into the image arrays as a fourth parameter:

    Code:
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["photo1.jpg", "", "", "Kissing Fools"] // image syntax w/caption
    fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", "", "Seated Woman"] //image with link syntax and caption
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", "The Dog Lovers"] //image with link and target syntax plus caption
    If you want no caption, use either an empty set of quotes or skip it:

    Code:
    fadeimages[0]=["photo1.jpg", "", "", ""] // plain image syntax
    or:

    Code:
    fadeimages[0]=["photo1.jpg", "", ""] // plain image syntax
    If you do use any captions, be sure to increase the slideshow height in the call by about 20:

    Code:
    new fadeshow(fadeimages, 140, 245, 0, 3000, 1, "R")
    You can control the font and other style for the caption from a style sheet in the head of the page:

    Code:
    <style type="text/css">
    #slide1cap div div {
    font-family:sans-serif;
    text-align:center;
    }
    </style>
    and wrapping the show's call in a span with the id of your selector:

    Code:
    <span id="slide1cap">
    <script type="text/javascript">
    
    new fadeshow(fadeimages, 140, 245, 0, 3000, 1, "R")
     
    </script></span>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Great! Thanks!

    Thanks for the info! And making the optional caption a fouth parameter rather than a new array makes it even easier. Thanks again!

    Bill

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •