Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Need some help with making images pop up

    Hi all,

    I have a client who wants a gallery of images to pop up on her enter page similar to this site, http://bit.ly/mUscmo . It won't be identical, but she likes the way the images all pop up and then just stay there.

    I know how to function JavaScript, but I don't know how to write it from scratch. Is there any where I could find a code that does something similar to this? Or, does anyone know the basic coding that I'd need for this?

    Thanks!
    Q

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,719
    Thanks
    80
    Thanked 4,514 Times in 4,478 Posts
    Man, I hope you can do better than that crappy page!!!

    Until an image appears, that page shows the little "X" image place holder. Ugly.

    Anyway, yes, this would be pretty easy to do. And better than that.

    The thing that page you showed is *not* doing is it is not hiding the images until they are ready.

    Let me see if I can create a mini-demo. Later.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,719
    Thanks
    80
    Thanked 4,514 Times in 4,478 Posts
    This is a little crude, but it shows the idea:
    Code:
    <html>
    <head>
    <style type="text/css">
    table#pix img {
        visibility: hidden;
        height: 150px;
        width: 250px;
    }
    </style>
    <script type="text/javascript">
    var names = [
        "OldBlueEyes", "Jowie", "Shasta", 
        "SignatureCalico", "MesmerEyes","Antidepressant",
        "HarlequinDane", "Pug", "CanusAngelicus"
        ];
    var ordering = [ 0,1,2,3,4,5,6,7,8];
    
    names    = names.sort( function() { return Math.random() > 0.5; } );
    ordering = ordering.sort( function() { return Math.random() > 0.5; } );
    
    var picnum = 0;
    
    function nextPic( )
    {
        var inum = ordering[picnum];
        var image = document.getElementsByTagName("img")[inum];
        var name = names[picnum];
        image.id = "IM" + inum;
        image.src = "http://www.ClearviewArts.com/thumbnails/" + name + ".jpg";
        ++picnum;
        if ( picnum < names.length ) setTimeout( nextPic, 1000 );
    }
    function showme(image)
    {
        image.alt = "0";
        image.style.opacity = 0;
        image.style.filter  = "alpha(opacity=0)";
        image.style.visibility = "visible";
        setTimeout( "fadein(" + image.id.replace(/IM/,"") + ")", 40 );
    }
    function fadein(which)
    {
        var image = document.getElementsByTagName("img")[which];
        var op = parseInt(image.alt) + 1;
        image.alt = op;
        image.style.opacity = op / 100;
        image.style.filter  = "alpha(opacity=" + op + ")";
        if ( op < 100 ) setTimeout( "fadein(" + which + ")", 40 );
    }
    
    window.onload = nextPic;
    
    </script>
    </head>
    <body>
    <table id="pix">
    <tr>
        <td><img onload="showme(this)" onerror="alert('oops');" /></td>
        <td><img onload="showme(this)" /></td>
        <td><img onload="showme(this)" /></td>
    </tr>
    <tr>
        <td><img onload="showme(this)" /></td>
        <td><img onload="showme(this)" /></td>
        <td><img onload="showme(this)" /></td>
    </tr>
    <tr>
        <td><img onload="showme(this)" /></td>
        <td><img onload="showme(this)" /></td>
        <td><img onload="showme(this)" /></td>
    </tr>
    </table>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks so much! I will mess around with that code tomorrow and see if I can get it to do what I need to. I will be posting back, I'm sure!!

    Q

  • #5
    New Coder
    Join Date
    Feb 2010
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Alright I have one issue and I can't figure out why it's doing this! I'll be able to customize and tweak the code quite well for what I need it to do, I think.

    The only problem I'm having is I separated the table where the pictures are popping up, so that I can put just a still image in between them (like an enter type of button/image). So that the images will then pop up around that enter image.

    Well, it keeps having one of the pictures pop up over that image - in that image space. I assigned a different ID to that still image and it's still doing it. Even if I reduce the picture amount that's popping up, it still does it. I can't figure out why it's doing that!

    Here's the code and any help would be greatly appreciated!

    Code:
    <html>
    <head>
    <style type="text/css">
    table#pix img {
        visibility: hidden;
        height: 201px;
        width: 262px;
    }
    table#enter {
    	height: 109px;
    	width: 847px;
    }
    </style>
    <script type="text/javascript">
    var names = [
        "onegirl", "twogirls", "threegirls", 
        "fourgirls", "threegirlsagain","onewhitegirl",
        "oneblackgirl"
        ];
    var ordering = [ 0,1,2,3,4,5,6];
    
    names    = names.sort( function() { return Math.random() > 0.5; } );
    ordering = ordering.sort( function() { return Math.random() > 0.5; } );
    
    var picnum = 0;
    
    function nextPic( )
    {
        var inum = ordering[picnum];
        var image = document.getElementsByTagName("img")[inum];
        var name = names[picnum];
        image.id = "IM" + inum;
        image.src = "http://www.domainnameishere.org/pictures/" + name + ".jpg";
        ++picnum;
        if ( picnum < names.length ) setTimeout( nextPic, 1000 );
    }
    function showme(image)
    {
        image.alt = "0";
        image.style.opacity = 0;
        image.style.filter  = "alpha(opacity=0)";
        image.style.visibility = "visible";
        setTimeout( "fadein(" + image.id.replace(/IM/,"") + ")", 40 );
    }
    function fadein(which)
    {
        var image = document.getElementsByTagName("img")[which];
        var op = parseInt(image.alt) + 1;
        image.alt = op;
        image.style.opacity = op / 100;
        image.style.filter  = "alpha(opacity=" + op + ")";
        if ( op < 100 ) setTimeout( "fadein(" + which + ")", 40 );
    }
    
    window.onload = nextPic;
    
    </script>
    </head>
    <body bgcolor="#000000">
    <div align="center">
      <table id="pix">
        <tr>
        <td><img onload="showme(this)" onerror="alert('oops');" /></td>
        <td><img onload="showme(this)" /></td>
        <td><img onload="showme(this)" /></td>
    </tr>
    </table>
      <table width="900" height="76" border="0" align="center" id="enter">
        <tr>
          <th scope="row"><img src="lasttimeenter.gif" width="847" height="109" /></th>
        </tr>
      </table>
      <table id="pix">
        <tr>
          <td><img onload="showme(this)" /></td>
          <td><img onload="showme(this)" /></td>
          <td><img onload="showme(this)" /></td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    You can see what I'm talking about here: http://bit.ly/pbO4oI.

    Thanks!
    Q

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,719
    Thanks
    80
    Thanked 4,514 Times in 4,478 Posts
    Oh, that's easy.

    Several possibilities. The easiest is probably to put a class name on all the blank <img> tags and then something like this:
    Code:
    <html>
    <head>
    <style type="text/css">
    img.randomPic {
        visibility: hidden;
        height: 150px;
        width: 200px;
    }
    </style>
    <script type="text/javascript">
    var names = [
        "OldBlueEyes", "Jowie", "Shasta", 
        "SignatureCalico", "MesmerEyes","Antidepressant",
        "HarlequinDane", "Pug", "CanusAngelicus"
        ];
    var images = [];
    var picnum = 0;
    
    function nextPic( )
    {
        var image = images[picnum];
        var name = names[picnum % names.length];
        image.id = "IM" + picnum;
        image.src = "http://www.ClearviewArts.com/thumbnails/" + name + ".jpg";
        ++picnum;
        if ( picnum < images.length ) setTimeout( nextPic, 300 );
    }
    function showme(image)
    {
        image.alt = "0";
        image.style.opacity = 0.0;
        image.style.filter  = "alpha(opacity=0)";
        image.style.visibility = "visible";
        setTimeout( "fadein(" + image.id.replace(/IM/,"") + ")", 40 );
    }
    function fadein(which)
    {
        var image = document.getElementById("IM"+which);
        var op = parseInt(image.alt) + 1;
        image.alt = op;
        image.style.opacity = op / 100;
        image.style.filter  = "alpha(opacity=" + op + ")";
        if ( op < 100 ) setTimeout( "fadein(" + which + ")", 40 );
    }
    
    function startShow( )
    {
        var imageObjs = document.getElementsByClassName("randomPic");
        for ( var i = 0; i < imageObjs.length; ++i )
        {
            images[i] = imageObjs[i];
            images[i].onload = function() { showme(this); };
        }
    
        names  = names.sort( function() { return Math.random() > 0.5; } );
        for ( var n = 1; n <= 4; ++n )
        {
            images = images.sort( function() { return Math.random() > 0.5; } );
        }
        nextPic( );
    }
    
    
    window.onload = startShow;
    
    </script>
    </head>
    <body>
    <table id="pix">
    <tr>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
    </tr>
    <tr>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
    </tr>
    <tr>
        <td><img class="randomPic" /></td>
        <td colspan="3" align="center"><img src="http://www.ClearviewArts.com/images/ClearviewArtsText.gif" /></td>
        <td><img class="randomPic" /></td>
    </tr>
    <tr>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
    </tr>
    <tr>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
        <td><img class="randomPic" /></td>
    </tr>
    </table>
    </body>
    </html>
    Notice that I changed the code so that you don't have to have as many image names as there are images. Just like that site you showed me, if the code "runs out" of images then it starts re-using the list from the beginning.

    The more image "slots" you have (and the more image names) the more random the effect will be. With only 22 slots in this demo, and only 9 images, it doesn't look too random, but it is.

    I'm sure you've noticed you can adjust the timeouts and/or the opacity increments to get whatever effects you need.
    Last edited by Old Pedant; 08-24-2011 at 10:30 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    CGDesigns (08-25-2011)

  • #7
    New Coder
    Join Date
    Feb 2010
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Cool, thanks! I figured it was probably something easy . I'll play around with it in the morning, Lord willing and will report back as to how it's working!

    Thanks again!
    Q

  • #8
    New Coder
    Join Date
    Feb 2010
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That worked perfectly! Thank you so much for the help!

    Q

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,719
    Thanks
    80
    Thanked 4,514 Times in 4,478 Posts
    And you will notice that you don't get the ugly "X" for images that haven't been loaded yet.

    The simple trick is to make the image invisible (visibility: hidden;) until it finishes loading, which is what all the onload calls are for.
    Last edited by Old Pedant; 08-25-2011 at 10:04 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Feb 2010
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    And you will notice that you don't get the ugly "X" for images that haven't been loaded yet.

    The simple trick is to make the image invisible (visibility: hidden until it finishes loading, which is what all the onload calls are for.
    Yes, I noticed that! Awesome, thank you !

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,719
    Thanks
    80
    Thanked 4,514 Times in 4,478 Posts
    Found a bug! MSIE 7 doesn't support getElementsByClassName, so I created a substitute function for when that's not there.
    Code:
    ...
    
    function elementsByClassName( where, tag, name )
    {
        var elems = where.getElementsByTagName( tag );
        var results = [];
        for ( var e = 0; e < elems.length; ++e )
        {
            if ( elems[e].className == name ) results.push( elems[e] );
        }
        return results;
    }
    
    function startShow( )
    {
        var imageObjs;
        if ( document.getElementsByClassName != null )
        {
    
            imageObjs = document.getElementsByClassName("randomPic");
        } else { 
            imageObjs = elementsByClassName( document, "img", "randomPic" );
        }
        for ( var i = 0; i < imageObjs.length; ++i )
        {
            images[i] = imageObjs[i];
            images[i].onload = function() { showme(this); };
        }
    
        names  = names.sort( function() { return Math.random() > 0.5; } );
        for ( var n = 1; n <= 4; ++n )
        {
            images = images.sort( function() { return Math.random() > 0.5; } );
        }
        nextPic( );
    }
    Actually, I guess you could always us the substitute function, but w.t.h., more elegant to do it as above, I think.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Feb 2010
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for finding that bug . You've been so helpful!

    Q


  •  

    Posting Permissions

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