In the previous two articles, we covered the basics of image crawls, and how to avoid some of their weaknesses and design them without major glitches or problems.  For this final article, we’ll discuss a few extra options for these crawls.  As a reminder (or to bring you up to speed if you are not reading the series sequentially), an image crawl is a form of code that causes thumbnails to slowly move across the screen.  As we’ve discussed, image crawls are great for websites where you want people to get a good view of a wide variety of product images, such as with jewelry, photography, and graphic design.

One of the weaknesses we had discussed earlier was the speed at which the image crawl moves.  This makes them poor choices for general shopping navigation; they’re great for browsing your photographs, not so much for finding the perfect piece of jewelry to buy as an anniversary gift.  This can be exasperated if the crawl only moves in one direction at a fixed rate.  If something catches a user’s eye and they don’t click it in time, they would have to wait for the entire crawl to loop around before they see it again.  User-friendly that ain’t.

It can be a useful idea, thus, to allow users to control the crawl.  The first way to do this is a simple “onmouseover” function that causes the crawl to stop, generally by clearing the timer.  When the mouse moves off, another function restarts the timer, continuing the crawl.

In some cases, though, you might have other animations or functions that are going off that same timer (it’s easier on the computer to track everything on one timer rather than having to keep multiple timed functions going simultaneously).  In this case, you can use a Speed variable to determine how many pixels the crawl moves with each instance of its function being called.  On mouse over, the Speed is set to 0, causing it to stop.  It returns to 1 (or whatever) on mouse out.

Even if you stop and start the crawl with timeouts, though, a Speed variable can be useful.  People have different preferences, and having buttons or a control that lets them change the speed can easily make the site a bit more dynamic and convenient.  It’s also not hard to set the crawl up to go forward or backward, so if someone sees a photo or piece of jewelry they like and just miss hitting it, they can just reverse the crawl’s direction.  In fact, the code snippet from the previous article is designed for calculating the loop in both directions.

A speed and direction control is the last piece of a good image crawl.  All told, it’s a fairly simple piece of functionality, easily doable with less than a hundred lines of code, and probably less than fifty.  It adds a nice touch to photography, graphic design, jewelry, and other sites where visual appeal and an aethetic product presentation are critical.

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

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

An image crawl is a nice way to display a selection of thumbnail images without resorting to a big table that takes up most of the page.  Ideal for sites that have a lot of images, such as those offering photography or graphic design services, or for those where the appearance of the product is a major selling point, as with jewelry sites, these crawls are a simple way to add some animation and interactivity.

An image crawl basically works as follows: you have a selection of thumbnails (photographs you’ve shot, pieces of jewelry you’re selling, etc) that go across the screen either vertically or horizontally.  Those images move slowly across the screen, allowing a viewer to browse the images.  Typically, the crawl will be set up with links, so that when the viewer clicks an image, it will go to a larger view of the photograph, the jewelry piece’s purchase page, or the like.

These functions have their weaknesses, as well as options that can minimize and mitigate them.  Generally, image crawls are made to move fairly slowly, making them poor choices for getting people to the product they need.  Image crawls should not generally be used as a main store display.  Rather, they are a supplemental display intended to give a look at the products offered or the website owner’s photography, graphics, and other work, as well as the ability to go to the actual jewelry piece, photo, design, or other item that catches a user’s eye.  Since image crawls take up much less space than a typical catalog section, they are great for placing on every page of a site, keeping the products at the forefront of the visitor’s attention.

Image crawls are also often made up of several images.  This can result in a high loading time, even with tiny thumbnails.  Using pre-sized thumbnail images is a must; not only will quality suffer drastically if you simply set the width and height properties of a full-size image to thumbnail size, but this will not actually reduce the size of the image being downloaded.  Even then, you want to keep the number of images to a manageable size.  You don’t want the entirety of a large jewelry database to be appearing, for example.  Good solutions are to choose specific featured images, or, if you want every image to potentially display, use a random selection from a database with a limit.  This can be particularly effective if the images show up on different pages, giving a visitor a new selection each time they change the page.  Other options include displaying only from a page-appropriate (or random) category.  One final note regarding the difficulties of image number: if you have a lot of images in your crawl, and especially if your crawl appears on every page of the site, your “hits” will skyrocket.  Moreso than ever, visitors should be your primary stat to look at if you want accurate statistics (or, as accurate as they get on the web).

Although those are the most notable weaknesses of image crawls, there are also some potential pitfalls that one should be aware of when creating them, and methods of coding that will minimize the impact of such problems.  I discuss these in the next article on the details of image crawls.

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