Announcement

**Old Pedant** · Aug 23, 2011, 04:12 PM

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.

**Old Pedant** · Aug 23, 2011, 05:58 PM

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>

**CGDesigns** · Aug 23, 2011, 06:35 PM

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

**CGDesigns** · Aug 24, 2011, 10:32 AM

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

**Old Pedant** · Aug 24, 2011, 05:20 PM

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.

**CGDesigns** · Aug 24, 2011, 06:12 PM

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

**CGDesigns** · Aug 25, 2011, 03:01 PM

That worked perfectly! Thank you so much for the help!

Q

**Old Pedant** · Aug 25, 2011, 03:17 PM

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.

**CGDesigns** · Aug 25, 2011, 04:49 PM

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

!

**Old Pedant** · Aug 25, 2011, 07:13 PM

Found a bug! MSIE 7 doesn't support getElementsByClassName, so I created a substitute function for when that's not there.

Code:

...

[COLOR="Red"]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;
}[/COLOR]

function startShow( )
{
[COLOR="Red"]    var imageObjs;
    if ( document.getElementsByClassName != null )
    {

        imageObjs = document.getElementsByClassName("randomPic");
    } else { 
        imageObjs = elementsByClassName( document, "img", "randomPic" );
    }[/COLOR]
    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.

**CGDesigns** · Aug 26, 2011, 03:18 PM

Thank you for finding that bug

. You've been so helpful!

Q

Announcement

Need some help with making images pop up

Need some help with making images pop up

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment