Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 34

Thread: Fading slideshow with menu

  1. #11
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Oh.. by the way AIM is AOL Instant Messenger www.aim.com

  2. #12
    Join Date
    Jun 2005
    Location
    UK
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    But it doesn't. That's the problem.
    It does work! In IE anyway!

    You should never assume that only one browser will view your pages. The script should work in as many browsers as possible, and have a usable -- if less pretty -- alternative for others.
    Firstly, I can't be bothered to check my scripts in other browsers, I don't care, and everyone that does have the choice of IE against Any Other Browser and who chooses Any Other Browser is crazy anyway (in my opinion). Plus, most people don't even know that there are other browsers available. "What's the point in using Any Other Browser when IE is perfectly fine???"

    I would cheekily say at this point, "see if you can do it then". I have only suggested this code because it is ready for use. Seeing that I don't know how to combine those two scripts suggested at first, all I could do was suggest the one I have.

  3. #13
    Join Date
    Jun 2005
    Location
    UK
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ryancarder21
    I like the 2/3 slideshow script you showed me.. that would work fine.. i just want the images to fade into each other instead of just changing to it. Is there a code i can put in place to make the images fade into each other?
    I will try the script out when I get some time, but I have to go now. Unless someone else is able to sort the script for you then I am afraid you will have to wait a little while (in the next day or two). Sorry about that.

    Can you please highlight if you would like the fade script to work with other browsers apart from just Internet Explorer, as Twey has pointed out.

    Good luck!

  4. #14
    Join Date
    Jun 2005
    Location
    UK
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ryancarder21
    Oh.. by the way AIM is AOL Instant Messenger www.aim.com
    Thank you very much for the information

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

    Default

    Firstly, I can't be bothered to check my scripts in other browsers, I don't care, and everyone that does have the choice of IE against Any Other Browser and who chooses Any Other Browser is crazy anyway (in my opinion).
    Ah - big, confident steps along the road of bad web design
    OK - just for a moment, say I thought Browser X was the best browser ever, and created all my websites for it. Now, Browser X does things completely differently to any other browsers, and it only runs on a single OS on a single architecture. People who didn't use Browser X would just avoid my page, and laugh at my bad and incompatible web design. Now, imagine 80% of the Web was designed for Browser X. See what I'm getting at here?
    I would cheekily say at this point, "see if you can do it then".
    Now how could I resist a challenge like that? Replace the body section of the blending script with:
    Code:
    <a href="javascript:gotoshow()"><img src="image1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
    
    <script type="text/javascript">
    var whichlink=0,
      whichimage=-1,
      playing = false,
      blenddelay=(ie)? document.images['slide'].filters[0].duration*1000 : 0;
    
    function slideit(back) {
      if (!document.images) return;
    
      // Movement
      whichlink = whichimage;
      if(back) whichimage -= 1;
      else whichimage += 1;
    
      // Error checking and boundaries
      if(!imageholder[whichimage]) {
        if(whichimage < 0) whichimage = slidelinks.length - 1;
        else whichimage = 0;
      }
    
      // Display
      if (ie) document.images['slide'].filters[0].apply();
      document.images['slide'].src = imageholder[whichimage].src;
      if (ie) document.images['slide'].filters[0].play();
    
      // Animation
      if(!playing) return;
      setTimeout("slideit(true)", slidespeed+blenddelay);
    }
    
    function stopstart() {
      playing = document.getElementById("prev").disabled = document.getElementById("next").disabled = !playing;
      document.getElementById("stopstart").value = (playing ? "Stop" : "Start");
      slideit(true);
    }
    
    slideit(false);
    
    
    </script>
    <input id="prev" type="button" onclick="slideit(true);" value="Previous" />
    <input id="stopstart" type="button" onclick="stopstart();" value="Start" />
    <input id="next" type="button" onclick="slideit(false);" value="Next" />
    Last edited by Twey; 02-17-2006 at 11:37 PM.
    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!

  6. #16
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well that was awesome, The code is exactly what I need except for one thing. I would like to have the drop down menu that was in that one slide show I listed.

    Heres a link to what i have so far.. www.dr.rockstarmagic.com/test2.html what I need is for the slideshow to start automatically, then if the person likes they can stop it at a certain slide and restart it.. as well as move forward and backwards in slides, which is what it does now. I also need a drop down menu added on so that the can easily move to a specific slide. I managed to get a simple drop down menu in there, im just not sure how I would make it so when they click on a location it would bring them to that location and stop the slide show from going to the next slide at the same time. Again, everyone has been a huge help, thanks so much for all your time and effort.

    Bryan

  7. #17
    Join Date
    Jun 2005
    Location
    UK
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OK - just for a moment, say I thought Browser X was the best browser ever, and created all my websites for it. Now, Browser X does things completely differently to any other browsers, and it only runs on a single OS on a single architecture. People who didn't use Browser X would just avoid my page, and laugh at my bad and incompatible web design. Now, imagine 80% of the Web was designed for Browser X. See what I'm getting at here?
    Okay then, well if Browser X does all these things but only on one OS, why doesn't everyone use that single OS and browser? Wouldn't it make it so much easier? I suppose the simple, inevitable and unbeatable answer is 'choice'. I also think that you are suggesting that it is the web designer's duty to support any choice (well almost all of them anyway) that people can make, just so it works universally and at a minimum for the sake of it. Well what a wonderful world we live in, eh? ... Hence 'Down with Firefox!' - if instead, we all use one browser, and rid Firefox, then we wouldn't have to make our pages compatible with others then, would we?

    Now how could I resist a challenge like that?
    Very good script, well done. *claps regretfully* It does beat the one I provided in terms of usage, but the blending thing does not work for Firefox, but neither did mine!

  8. #18
    Join Date
    Jun 2005
    Location
    UK
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ryancarder21
    what I need is for the slideshow to start automatically, then if the person likes they can stop it at a certain slide and restart it ... I also need a drop down menu added on so that the can easily move to a specific slide. I managed to get a simple drop down menu in there, im just not sure how I would make it so when they click on a location it would bring them to that location and stop the slide show from going to the next slide at the same time.
    Well I'm pretty much stuck for trying to solve that for you, as I know little about Javascript myself. I could try, but I know I wouldn't get anywhere, and apparently it wouldn't help if it only worked in one browser anyway. Sorry about that. Hopefully someone else will be able to help you out on this forum. Good luck and all the best!

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

    Default

    I would like to have the drop down menu that was in that one slide show I listed.
    Ah! - sorry, I didn't understand what you meant by "menu" - you mean the text underneath?
    the blending thing does not work for Firefox, but neither did mine!
    Unfortunately not, as the way this script does the blend uses a filter property. However, the rest of the script will work on Firefox
    I have a version ready:
    Head:
    Code:
    <script type="text/javascript">
    
    //*****************************************
    // Blending Image Slide Show Script- 
    // &#169; Dynamic Drive (www.dynamicdrive.com)
    // For full source code, visit http://www.dynamicdrive.com/
    //*****************************************
    
    // specify interval between slide (in milliseconds)
    var slidespeed=3000
    
    // specify images
    var slideimages = new Array("http://www.dynamicdrive.com/dynamicindex4/bs00847a.gif","http://www.dynamicdrive.com/dynamicindex4/hh01478a.gif","http://www.dynamicdrive.com/dynamicindex4/bs00825a.gif");
    
    // specify corresponding links
    var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com");
    
    // specify description for the image
    var slidedescs = new Array("A clock", "A bulb", "Some dice");
    
    var newwindow = 1; // open links in new window? 1=yes, 0=no
    var autostart = 1; // autostart?
    
    var imageholder = new Array();
    var ie = document.all;
    for (i=0;i<slideimages.length;i++){
      imageholder[i]=new Image()
      imageholder[i].src=slideimages[i]
    }
    
    function gotoshow(){
      if (newwindow)
        window.open(slidelinks[whichlink])
      else
        window.location=slidelinks[whichlink]
    }
    
    </script>
    Body:
    Code:
    <a href="javascript:gotoshow()"><img src="image1.gif" name="slide" border="0" style="filter:blendTrans(duration=3)" width="97" height="100"></a>
    <br />
    <input id="prev" type="button" onclick="slideit(true);" value="Previous" />
    <input id="stopstart" type="button" onclick="stopstart();" value="Start" />
    <input id="next" type="button" onclick="slideit(false);" value="Next" /><br />
    <input type="button" onclick="whichimage=-1;slideit(false);" value="Restart" />
    <p id="imageinfo"></p>
    
    <script type="text/javascript">
    var whichlink=0,
      whichimage=-1,
      playing = false,
      blenddelay=(ie)? document.images['slide'].filters[0].duration*1000 : 0,
      desc = document.getElementById("imageinfo"),
      imgnum = 0,
      thread;
    
    desc.innerHTML = "Description: <span id=\"imagedesc\" style=\"font-weight:normal;\">" + slidedescs[0] + "</span><br />Picture <span id=\"imagenumber\">1</span> of " + slidelinks.length;
    desc = document.getElementById("imagedesc");
    imgnum = document.getElementById("imagenumber");
    
    function slideit(back) {
      if (!document.images) return;
      clearTimeout(thread);
    
      // Movement
      whichlink = whichimage;
      if(back) whichimage -= 1;
      else whichimage += 1;
    
      // Error checking and boundaries
      if(!imageholder[whichimage]) {
        if(whichimage < 0) whichimage = slidelinks.length - 1;
        else whichimage = 0;
      }
    
      // Display
      if (ie) document.images['slide'].filters[0].apply();
      document.images['slide'].src = imageholder[whichimage].src;
      if (ie) document.images['slide'].filters[0].play();
      desc.innerHTML = slidedescs[whichimage];
      imgnum.innerHTML = whichimage + 1;
    
      // Animation
      if(!playing) return;
      thread = setTimeout("slideit(false)", slidespeed+blenddelay);
    }
    
    function stopstart() {
      playing = document.getElementById("prev").disabled = document.getElementById("next").disabled = !playing;
      document.getElementById("stopstart").value = (playing ? "Stop" : "Start");
      if(playing) slideit(false);
      else clearTimeout(thread);
    }
    
    slideit(false);
    if(autostart) document.getElementById("stopstart").click();
    
    
    </script>
    I'm working on a version that'll blend in other browsers, using opacity instead of filters. If you want it, watch this thread; if not, the above will do
    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!

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

    Default

    Here we go: this works in Firefox, IE and, theoretically, older versions of Mozilla or Netscape (though I don't have any to hand to test it with at the moment. It will work without the fading effect in Opera, Epiphany (gtkhtml engine) and probably most other browsers, although Konqueror seems to have problems with it that I can't figure out due to Konqueror's awful lack of Javascript debugging.
    Head:
    Code:
    <style type="text/css">
    #imageinfo {
      font-weight: bold;
    }
    </style>
    <script type="text/javascript">
    
    //***********************************************************
    // Blending Image Slide Show Script- 
    // &#169; Dynamic Drive (www.dynamicdrive.com)
    // For full source code, visit http://www.dynamicdrive.com/
    // Modified by Twey for compatibility, standards compliance,
    // buttons, and stuff.  That's "Twey."  "Twey."  With a "W." :-)
    //***********************************************************
    
    // specify interval between slide (in milliseconds)
    var slidespeed=3000
    
    // specify images
    var slideimages = new Array("image1.gif","image2.gif","image3.gif");
    
    // specify corresponding links
    var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com");
    
    // specify description for the image
    var slidedescs = new Array("A clock", "A bulb", "Some dice");
    
    var newwindow = 1; // open links in new window? 1=yes, 0=no
    var autostart = 1; // autostart?
    
    // Amount of blend with each pass, from 0 (invisible) to 1 (opaque).  Lower = smoother, higher = faster.  Warning: set it to 0 and it'll never get there :-)
    var blendstep = 0.01;
    
    // Passes per second.
    var blendspeed = 100;
    
    // Don't edit below here unless you know what you're doing. :-)
    
    var imageholder = new Array();
    for (i=0;i<slideimages.length;i++) {
      imageholder[i]=new Image()
      imageholder[i].src=slideimages[i]
    }
    
    function gotoshow() {
      if (newwindow)
        window.open(slidelinks[whichlink]);
      else
        window.location = slidelinks[whichlink];
    }
    
    </script>
    Body:
    Code:
    <a href="javascript:gotoshow()"><img src="bs00847a.gif" id="slide" border="0" style="width:97;height:100;" /></a>
    <img src="http://www.dynamicdrive.com/dynamicindex4/hh01478a.gif" id="nextImage" style="position:absolute;visibility:hidden;" />
    <br />
    <input id="prev" type="button" onclick="slideit(true);" value="Previous" />
    <input id="stopstart" type="button" onclick="stopstart();" value="Start" />
    <input id="next" type="button" onclick="slideit(false);" value="Next" /><br />
    <input type="button" onclick="whichimage=-1;slideit(false);" value="Restart" />
    <select id="selectimage"><option value="NONE">Choose an image...</option></select>
    <p id="imageinfo"></p>
    
    <script type="text/javascript">
    
    blendspeed = 1000 / blendspeed;
    
    var whichlink=0,
      whichimage=-1,
      playing = false,
      blenddelay = blendspeed * 1 / blendstep,
      desc = document.getElementById("imageinfo"),
      imgnum = 0,
      w3cOpacity = (typeof document.images[0].style.opacity != "undefined"),
      mozOpacity = (typeof document.images[0].style.MozOpacity != "undefined"),
      ieOpacity = (typeof document.images[0].filters != "undefined"),
      slideThread = null, blendThread = null,
      first = true;
    
    if(w3cOpacity) {
      document.images['slide'].style.opacity = "0.99";
      document.images['nextImage'].style.opacity = "0.0";
    } else if(mozOpacity) {
      document.images['slide'].style.MozOpacity = "0.99";
      document.images['nextImage'].style.MozOpacity = "0.0";
    } else if(ieOpacity) {
      document.images['slide'].style.filter = "progid:DXImageTransform.Microsoft.Fade(duration=" + blenddelay / 1000 + ")";
    } else {
      blenddelay = 0;
    }
    
    function midBlend(oldImage, newImage) {
      if((w3cOpacity && parseFloat(newImage.style.opacity) > 0.95) || (mozOpacity && parseFloat(newImage.style.MozOpacity) > 0.95)) {
        oldImage.src = newImage.src;
        if(w3cOpacity) {
          oldImage.style.opacity = "0.99";
          newImage.style.opacity = "0.0";
        } else if(mozOpacity) {
          oldImage.style.MozOpacity = "0.99";
          newImage.style.MozOpacity = "0.0";
        }
        blendThread = null;
        return;
      }
    
      if(w3cOpacity) newImage.style.opacity = parseFloat(newImage.style.opacity) + blendstep;
      else if(mozOpacity) newImage.style.MozOpacity = parseFloat(newImage.style.MozOpacity) + blendstep;
    
      if(w3cOpacity) oldImage.style.opacity = parseFloat(oldImage.style.opacity) - blendstep;
      else if(mozOpacity) oldImage.style.MozOpacity = parseFloat(oldImage.style.MozOpacity) - blendstep;
    
      blendThread = setTimeout("midBlend(document.getElementById('" + oldImage.id + "'), document.getElementById('" + newImage.id + "'))", blendspeed);
    }
    
    function imageBlend(oldImage, newImage) {
      if(!w3cOpacity && !mozOpacity && !ieOpacity) { oldImage.src = newImage.src; return; }
      if(blendThread != null) return;
      if(ieOpacity) {
        oldImage.filters[0].apply();
        oldImage.src=imageholder[whichimage].src;
        oldImage.filters[0].play();
        return;
      }
      newImage.style.width = oldImage.style.width;
      newImage.style.height = oldImage.style.height;
      newImage.style.top = oldImage.offsetTop + "px";
      newImage.style.left = oldImage.offsetLeft + "px";
      if(w3cOpacity) { newImage.style.opacity = "0.0"; oldImage.style.opacity = "0.99"; }
      else if(mozOpacity) { newImage.style.MozOpacity = "0.0"; oldImage.style.MozOpacity = "0.99"; }
      else if(ieOpacity) { oldImage.filters[0].apply(); oldImage.src = newImage.src; oldImage.filters[0].play(); }
      newImage.style.zIndex = 1;
      oldImage.style.zIndex = 0;
      newImage.style.visibility = "visible";
      if(!ieOpacity) midBlend(oldImage, newImage);
    }
    
    desc.innerHTML = "Description: <span id=\"imagedesc\" style=\"font-weight:normal;\">" + slidedescs[0] + "</span><br />Picture <span id=\"imagenumber\">1</span> of " + slidelinks.length;
    desc = document.getElementById("imagedesc");
    imgnum = document.getElementById("imagenumber");
    
    function slideit(back) {
      if (!document.images || blendThread != null) return;
      clearTimeout(slideThread);
    
      // Movement
      whichlink = whichimage;
      if(back) whichimage -= 1;
      else whichimage += 1;
    
      // Error checking and boundaries
      if(!imageholder[whichimage]) {
        if(whichimage < 0) whichimage = slidelinks.length - 1;
        else whichimage = 0;
      }
    
      // Display
      document.images['nextImage'].src = imageholder[whichimage].src;
      if(!first) imageBlend(document.images['slide'], document.images['nextImage']);
      else document.images['slide'].src = imageholder[whichimage].src;
      desc.innerHTML = slidedescs[whichimage];
      imgnum.innerHTML = whichimage + 1;
    
      // Animation
      if(!playing) return;
      slideThread = setTimeout("slideit(false)", slidespeed+blenddelay);
    }
    
    function stopstart() {
      playing = document.getElementById("prev").disabled = document.getElementById("next").disabled = !playing;
      document.getElementById("stopstart").value = (playing ? "Stop" : "Start");
      if(playing) slideit(false);
      else clearTimeout(slideThread);
    }
    
    function popSel() {
      selectel = document.getElementById("selectimage");
      selectel.onchange = function() {
        if(this.value != "NONE" && this.value != whichimage) {
          if(blendThread != null) {
            selectel.selectedIndex = 0;
            return;
          }
          whichimage = parseInt(this.value) - 1;
          slideit(false);
        }
      }
    
      for(var fish=0;fish < imageholder.length;fish++) {
        var blah = document.createElement('option');
        blah.value = fish;
        blah.innerHTML = slidedescs[fish];
        selectel.appendChild(blah);
      }
    }
    
    onload = function() {
      slideit(false);
      first = false;
      if(autostart) document.getElementById("stopstart").click();
      popSel();
    }
    
    </script>
    Sample page here (sorry DD, I borrowed your images ).
    Last edited by Twey; 02-19-2006 at 10:54 AM.
    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!

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
  •