Results 1 to 6 of 6

Thread: Changing border color on Ultimate Image Slideshow?

  1. #1
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Changing border color on Ultimate Image Slideshow?

    1) Script Title: Ultimate Fade-in Slideshow

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

    3) Describe problem:

    Currently the border color on Ufade (to use John's easy-to-remember name for it) is black; I'd like to change it to white, so the images have a postcard or polaroid effect on a black background - is there some code I can add to the js to enable this, please?

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    in this part of the code, change the highlighted:

    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>'
    picobj.innerHTML=slideHTML
    }
    to:

    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+'" style="border: '+this.imageborder+'px #fff;">'
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>'
    picobj.innerHTML=slideHTML
    }
    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    As far as I know, that will only produce invalid inline style for the image border. I would suggest leaving the script alone. What I would do instead is add a stylesheet like the below to the head of the page (or add the highlighted style in the following stylesheet to your page's existing stylesheet if it already has one):

    Code:
    <style type="text/css">
    #master0 img {
    border:2px solid #fff;
    }
    </style>
    Notes: Each slide show this script creates has a master division. Each of these is numbered from 0. So the first slide show on a page would be contained in master0, the second (if you have more than one) would be in master1, and so on for however many you have.

    The selector:

    #master0 img

    selects all images in the first slide show.

    One caveat though, however many pixels you specify for a given slide show as its images' border in a stylesheet as I am suggesting, must also be configured in the slide show call (highlighted and red below, given the 2px solid #fff border from my above example):

    Code:
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeimages, 140, 225, 2, 3000, 1, "R")
    </script>
    That will allow the script to properly calculate the additional width and height that your stylesheet has set for the border when the script is laying out the slide show.
    - John
    ________________________

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

  4. #4
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for that, John, it worked fine once I'd located a missing end bracket in the style sheet that stopped it working.

    Would it be too much to ask how one could insert a play and pause button to the show, so end-users have the choice whether or not to see the changing images on the page? This is still very much a work in progress, so I can't give a link at this stage, will do when it's more of a page than a process.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    This script already has that:

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

    However Ufade also has a stop/go routine of sorts built in. If you set it it to have pause on mouse over (with a one, where shown below in the on page call):

    Code:
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
    </script>
    You may access its mouse over flag like so:

    HTML Code:
    <a href="#" onclick="fadearray[0].mouseovercheck=1;return false;">Stop</a> 
    <a href="#" onclick="fadearray[0].mouseovercheck=0;return false;">Go</a>
    The 0 in fadearray[0] indicates the first show on the page, just like discussed before for the style.

    But unless you also edit the script by removing or commenting out (near the end of the main script) all of these lines:

    Code:
    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}
    }
    If the user has hit stop, and then moves the mouse over the show and away, it will start back up again.
    - John
    ________________________

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

  6. #6
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I had appreciated the mouseover to pause option in the Ufade script, but I was after the stop/go buttons and, thanks to you, the swissarmy is now up and running! But (you knew there'd be a 'but', didn't you?) is it possible to allow the user to click on a photo in the slide show and have a full, or fuller, size version of the photo open in a separate window on top of the current slide show? And with that window to have a Close option other than the 'x' in the corner? I'm sure the option's in there, I just can't find it.

    Must say that your script is a lot simpler to manipulate than a lot of others out there and, as well, decent and simple slideshows are not that easy to find.

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
  •