Web Analytics Made Easy -
StatCounter Need some help with making images pop up - CodingForum

Announcement

Collapse
No announcement yet.

Need some help with making images pop up

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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.
    Be yourself. No one else is as qualified.

    Comment


    • #3
      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>
      Be yourself. No one else is as qualified.

      Comment


      • #4
        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

        Comment


        • #5
          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

          Comment


          • #6
            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; Aug 24, 2011, 05:30 PM.
            Be yourself. No one else is as qualified.

            Comment


            • #7
              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

              Comment


              • #8
                That worked perfectly! Thank you so much for the help!

                Q

                Comment


                • #9
                  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; Aug 25, 2011, 05:04 PM.
                  Be yourself. No one else is as qualified.

                  Comment


                  • #10
                    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 !

                    Comment


                    • #11
                      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.
                      Be yourself. No one else is as qualified.

                      Comment


                      • #12
                        Thank you for finding that bug . You've been so helpful!

                        Q

                        Comment

                        Working...
                        X