any thoughts on my late night coding session?

Just put together a little test code, kind of just for fun, but perhaps to eventually replace what I've got on the main page of my website. It's a square of thumbnails change by that slide in and out randomly. Set up so that when the new image slides in the link changes too. Just something so my site is a bit more dynamic.

Also, finished coding some stuff the other day that resizes the image on the page so that it scales to fit your screen size. That way the image doesn't suffer from goldielocks syndrome.

anyway, the page for tonight's random coding session is http://www.paulparduephotography.com/test3.php

I'd love to hear some thoughts, if you'd care to give them... And clicking on the image will take you to the portfolio page, where you can see the other bit of code for the resize

angelwatt said:

Good work there. Looks pretty nice.

You randomly choose one of the 25 squares each pass for transition. You might want to consider making an array 25 long that you randomized and go through, which will make sure each square is changed once per 25 transitions. You can re-randomize that list after you get to the end of it as well.

Another potential idea you may want to consider, since you have a good number of pictures on the page, doing multiple transitions at a time could provide a more interesting effect. This isn't quite as easy as it sounds to do with your code in its current state, but could be cool.

Some code simplifications:

PHP:

if (dir == 1 ) {...}
if (dir == 2 ) {...}
...

// Change to
switch (dir) {
case 1: ... break;
case 2: ... break;
...
}


x = x + xd
// Change to
x += xd;


document.getElementById(div)
// Is used a few times, so you should capture it in a local variable so
//   it's cheaper to use in terms of speed
var theDiv =document.getElementById(div);
theDiv.style. ...


imagearray = new Array()
imagearray[0]="20091217_201406_546240";
imagearray[1]="20091217_201142_546225";
...

// Change to
var imagearray = [
  "20091217_201406_546240",
  "20091217_201142_546225",
...
];

I also recommend using a semicolon at the end of each code line. JavaScript doesn't require it technically, but it's good practice. Also be sure to use the var bit on new variables to better declare their scope. This will also improve performance.

Click to expand...

thanks for the pointers. I'd read that using var creates a local variable to only the function that created it. That caused a problem in the other code I'd finished the other day so I left that off. also, I'd read that using a ; was bad practice so i've been leaving those off as well.

I've still got a bunch of tweaking to do before I consider it good enough to be used, but it's a fun proof of concept.

I'm considering changing how the direction works since that's a lot of if statements. I'm thinking of doing a a random selection for both directions of -1, 0, and 1; setting that as the xd and yd. that way I'd only have to pass that variable to the functions rather than have the functions run a sequence of ifs every time they run, which I'm sure is a performance hit. the only thing, is that if I do that I stand to have some of the tiles move at diagonals if both the x and y values are changed, and I'm not sure I'd care for that to happen though i'm sure I could program it so that it wouldn't.

as for having two or more slides sliding at once, yeah that'd be nice.