Advanced Search

Results 1 to 10 of 10

Thread: Ultimate Fade-in slide show- show text descriptions?

  1. #1
    Join Date
    Aug 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slide show- show text descriptions?

    1) Script Title: Ultimate Fade-in slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem: This code is just what I was looking for and thank you very much. However, I need to make a change and don't know how to do it. All my attempts have resulted in no images being displayed. My problem is displaying text under each of the rotating images. I tried to 'steal' some of the code from other image scripts but was unsuccessful. Any help would be appreciated. Thanks in advance.
    Last edited by ddadmin; 08-05-2006 at 06:29 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    Are you having trouble getting images to show by default (without changes to the code)? If so, make sure teh paths to the images inside the script are correct. When in doubt, use absolute URLs, like:

    http://www.mysite.com/images/photo1.jpg

    etc.

  3. #3
    Join Date
    Aug 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The script works fine -- images show and rotate etc, however, I would like to include a description beneath each image and although I have tried stealing the code from others (Interactive image slideshow with text description, as an example) I incorporate the changes, refresh the screen, and I get no images. I think I am doing something wrong, and, if possible, would like to know where to add the code in the slide show.
    Thanks.

  4. #4
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    You need to create a seperate area for your caption to display in... then you can place it whereever you want... if you want it underneath the image then place the extra space/tag underneath then just reference your corresponding image and caption to appear in both of the tags. hope this helps

  5. #5
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    This should be quite simple to add- I'll post some code later today or tomorrow here.

  6. #6
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    Ok, to add an optional textual description to Ultimate Fade In slideshow, do the following:

    Step 1: Modify your images array by adding a 4th parameter to each element:

    Code:
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["../photo1.jpg", "", "", "I'm George"] //plain image syntax
    fadeimages[1]=["../photo2.jpg", "http://www.cssdrive.com", "", "I'm Sarah"] //image with link syntax
    fadeimages[2]=["../photo3.jpg", "http://www.javascriptkit.com", "_new", "Who are you?"] //image with link and target syntax
    As you can see, the 4th parameter now contains the text you want shown beneath the image in question. Remove this parameter for images that you don't want a description.

    Step 2: Then, modify function populateslide() with the below small change:

    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 (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>'
    if (typeof this.theimages[picindex][3]!="undefined") //if this image contains a description
    slideHTML+='<div>'+this.theimages[picindex][3]+'</div>'
    picobj.innerHTML=slideHTML
    }
    That's it. Be sure the height of your slideshow is tall enough to contain the descriptions, or they'll be clipped:

    Code:
    new fadeshow(fadeimages, 140, 325, 0, 3000, 1, "R")

  7. #7
    Join Date
    Aug 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry for the late response - I will give your suggestion a whirl. Thanks for the quick reply.

  8. #8
    Join Date
    Aug 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It worked perfectly!!!! However, would like to make one more change.....Is it possible to control the size and color of the font on the description that was added? again, thanks.

  9. #9
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    180
    Thanks
    39
    Thanked 1 Time in 1 Post

    Default

    I tried following your instructions, but my text is not appearing beneath the images. Is there any way you could look at my code and see what I am doing wrong?

    http://www.findahomepa.com/index.html

    Thanks,
    Deborah
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,675
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    The Swiss Army Image Slideshow already does this:

    http://www.dynamicdrive.com/dynamici...army/index.htm

    It can be configured to show only images plus text descriptions. HTML code may be included in the descriptions.
    - John
    ________________________

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

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
  •