SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Slideshow With Fade-out

    Please could somebody assist me...........I am attempting to write a script which cycles through a series of foreground images, with a background image fading out inbetween each one. I also have a pause/unpause facility to stop the slideshow when the mouse is hovered over each image.

    When executed as a local file, everything appears to work satisfactorily; when it is uploaded to a server, there appears to be a problem with the image preloading and caching, as each image is initially shown twice, before working as intended. I suspect the problem lies with the fade and opacity functions, as it works correctly when these are omitted. As a relative newcomer to programming, this has really got me stumped! Thankyou in advance, here's the code:

    html:

    <div id="photoHolder">
    <img src="graphics/hawkwind.jpg" alt="Photo" id="thePhoto" name="thePhoto" />
    </div>
    <script type="text/javascript" src="library/slideshowFadeExp4.js"></script>


    css:

    #photoHolder{
    position:absolute;
    top:400px;
    left:27%;
    width:45.5%;
    height:350px;
    b/order:8px dotted purple;
    background-image:url(graphics/loading2.jpg);
    background-position:50% 50%;
    }
    #thePhoto {
    width:100%;
    height:350px;
    b/order:1px solid black;
    }


    script:

    var i = 0;
    var t = "";
    var imageId = "";
    var image = "";
    var preDisplay = "";
    var stopStart = document.getElementById('thePhoto');

    var gallery = new Array()
    gallery[0] = new Image()
    gallery[0] = "graphics/hawkwind.jpg";
    gallery[1] = new Image()
    gallery[1] = "graphics/liveevil.jpg";
    gallery[2] = new Image()
    gallery[2] = "graphics/customComet.jpg";
    gallery[3] = new Image()
    gallery[3] = "graphics/bubble.jpg";

    document.write("<style type='text/css'> #thePhoto {visibility:hidden;} </style>"); /* dynamically created stylesheet initially hides the Html image */


    function activate()
    {
    t = setInterval('selectPic()',5000);
    }

    function selectPic()
    {
    imageId = 'thePhoto'; //for fadeIn function
    image = document.getElementById(imageId); // for opacity function
    preDisplay = document.getElementById('thePhoto').src = gallery[i];
    i++;



    /* opacity and fadeIn */


    setOpacity(image, 0);
    image.style.visibility = "visible";

    fadeIn(imageId, 0)
    }

    function setOpacity(obj, opacity)
    {
    opacity = (opacity == 100)?99.999:opacity;

    //IE 5-7
    obj.style.filter = "alpha(opacity:"+opacity+")";


    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;

    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;

    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
    }

    function fadeIn(objId,opacity)
    {
    if (document.getElementById)
    {
    obj = document.getElementById(objId);

    if (opacity <= 100)
    {
    setOpacity(obj, opacity);

    opacity += 10;

    window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
    }
    }

    detectEndPic()
    }

    function detectEndPic()
    {
    if (i> (gallery.length-1) )
    {
    i=0;
    }
    }

    /********************************************************************** Pause and Unpause Slideshow **************************************************************/

    if (document.attachEvent)
    {
    stopStart.attachEvent('onmouseover',stop);
    stopStart.attachEvent('onmouseout',restart);
    }

    else if (document.addEventListener)
    {
    stopStart.addEventListener('mouseover',stop,false);
    stopStart.addEventListener('mouseout',restart,false);
    }

    function stop()
    {
    clearInterval(t);
    }

    function restart()
    {
    i=0;
    activate()
    }


    window.onload=activate;

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    gallery[0] = new Image();
    gallery[0].src = "graphics/hawkwind.jpg";
    Etc
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Logic Alli,

    Thankyou for looking at the code. I've tried it but to no avail. If you add the src property in the preload section it just cycles through a series of blank images. I think the problem might be to do with the image and imageId variables; the Html image is assigned to these, but they are independant of the preload section. I'll let you know if I figure it out....
    Thanks again.

  4. #4
    SitePoint Member
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using a script that already does what you need.

    Magic Slideshow fades images one into another and has pause/unpause on mouseover
    Simply gorgeous: Zoom | Magnify | Enlarge | Slideshow

  5. #5
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Magic toolbox,

    Thanks for replying. The slideshow you suggested is impressive, but unfortunately I am somewhat 'between jobs' at present (over a year) and have no money.

  6. #6
    SitePoint Member
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's free for non-commercial sites.

    http://www.magictoolbox.com/license/#free
    Simply gorgeous: Zoom | Magnify | Enlarge | Slideshow

  7. #7
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Magic Toolbox,

    I need it for commercial use. I'll keep it it mind though.

  8. #8
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  9. #9
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trying to create a javascript slideshow here... A program called Photo Flash Maker works well.

  10. #10
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Trilli,

    Thanks for your reply, I must confess I have not even begun to get my head around JQuery yet. It all seems very useful though; I might give it a go.

  11. #11
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Hallohimmel,

    I have just been experimenting with the Photo Flash Maker- most impressive. There's always something satisfying about getting your own code working, but then again, I'd have to do some serious learning to match that! Thanks for the link.

  12. #12
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Photo flash maker free is a good program, but as far as I can tell, you can't resize your pictures.


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
  •