The Details of Image Crawls 2

In my previous article, I discussed the basics of image crawls – selections of thumbnails that move across the site to display photos, graphics, jewelry, or whatever other products or items you want to show.  I talked about their uses, how they are ideal for giving people a look at images and products for sites where visual appear is important, such as photography and jewelry sites, and their main weaknesses.  In this article, I’ll be going into more of the details regarding some potential pitfalls or challenges when coding image crawls, and how to get around them.  This is not meant as a strict tutorial on creating the code, but rather, some advice for how to properly implement it and avoid problems.

First, you might run into your crawl being choppy.  In most cases, this is because you’re moving it too far and not often enough.  Something moving 100 pixels every second is looking to look like an image jumping across the screen; a crawl is more likely to move 1 pixel every hundredth of a second.

Now, if you have a database full of jewelry pieces or photographs, of which several come up in your image crawl, the last thing you want to do is try to move each one individually with a loop.  This process is incredibly taxing on computer resources, and as such, incredibly slow.  If our crawl is moving 1 pixel every ten miliseconds, that means that a hundred times a second, the computer has to run through the piece of Javascript code that moves the image.  If that code includes a loop to move 10, 20, 50, 100 images one pixel to the left, it becomes incredibly taxing.  Add in the extraneous checks required to make sure each image hasn’t reached the point where it is supposed to loop around, and you have a massive strain.  As a result, the crawl will move significantly slower, may have a slightly jittery look, and is more subject to glitches, especially after several revolutions.

The solution?  Put all your photos, jewelry pieces, whatever, into a single div or table, and just move <i>it</i>.  Simple enough, but it brings us to two new challenges.  First: you’re dynamically loading thumbnails from a database.  They may have varying widths (or heights, for vertical crawls), and you may not know how many are going to be on the page.  So, the challenge becomes figuring out how to decide when to wrap the image crawl.  The next problem is, you can’t wrap it cleanly; either it winds up skipping, or you get a long blank spot waiting for the div to trail off before it loops back to the start.

I find the simplest solution to the second is to create two trains, one after the other.  You can have two duplicate trains if you’d like, or to save on loading time, simply load half your images into one train, and half into the next.  As far as calculating <i>where</i> to loop, I suggest cutting out the middlemen and making calculations based on the height and width of the divs.  If you haven’t had opportunity to figure out how to dynamically calculate that yet, use document.getElementById(“DivName”).offsetHeight or document.getElementById(“DivName”).offsetWidth.  Note that floating and absolutely positioned elements <i>will not count</i> towards offsetHeight and offsetWidth, so make sure your thumbnails are relatively positioned (tables work well enough for this purpose).  The general calculation is, when the div’s “left” value is greater than the length of the containing div (when moving right) or less than 0 – the length of the div itself (when moving left), change it to the other.  Similar rules apply for vertical crawls.  So for example:

if (CrawlLeft <= (0-CrawlWidth) && Moving == “Left”)
{
CrawlLeft = CrawlWidth
}
else if (CrawlLeft >= CrawlWidth && Moving == “Right”)
{
CrawlLeft = (0-CrawlWidth)
}

As a side note, you want to make sure your crawl is in an “overflow:hidden” container div.  Otherwise, especially for a crawl moving right or down, as the crawl moves, a scrollbar will appear and start getting longer.  Very disruptive.

So, that should be enough to get a basic crawl going without any major glitches.  In the final article in this trilogy, I’ll get into some extras you can place in the crawl, such as speed and direction modification.

Dustin Schwerman is the head web designer for Truly Unique Website Design. Truly Unique works on websites of all varieties; their clients may offer products and services ranging from religious jewelry to glamour photography.

Article Source: http://bb-articles.com

Tagged with: image crawls • images • website design

Filed under: Web Design & Development

Like this post? Subscribe to my RSS feed and get loads more!