[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 394
  • Last Modified:

is it possible to animate a slideshow of images with transparent backgrounds (gifs?) on a background using jquery

is it possible to animate a slideshow of images with transparent backgrounds (gifs?) on a single background using jquery?

I would like to create a slideshow of products which all appear on the same background. It will not be enough to draw the products onto the same background as the product images should be pull from a large image database. (a CDN)

The backgrounds of the products are the issue as they all have square white backgrounds.

2 Solutions
David BruggeCommented:
When I read your title, I understand you to be asking if you can make a slide show of gif's that have had their background made transparent, however when I read the question, it seems like you would like to leave the images alone and remove the white background with a script.

The answer to the first understanding is yes, easily. Just treat the gifs as any other image in your favorite slide show script and the background will show. However, some scripts may have their own background layer built in, which may come into play.

The second understanding of the question is technically yes, but may not be practical, depending on the images.

If the image background is indeed entirely white, and not a sprinkling here and there of "almost" white, then yes, that background can be dropped out with a script. If that same shade of white shows up anywhere else in the subject area of the image, that part will be transparent as well.

In addition, because only one shade of white is transparent, you will often be left with either a halo around the image where the pixels are anti-aliased, or the edges will be chopped off and look ragged. If all of the subject matter is rectangular objects with no rounded corners and no shadows, then this isn't a problem.

If, on the other hand, you have images of objects with rounded corners, soft edges, and cast shadows, you may want to consider using transparent png's instead. Png's are now supported in all major browsers and support varying levels of transparency. As such, you can have a shadow that will darken the background color the way a shadow normally would, and an image whose edges blend smoothly into the background instead of looking jagged.

One caveat is that older versions of Internet Explorer did not support transparency on png files. If you have a user base that never updates their browsers, you may have to make some hard decisions.

The easiest way to do this is to remove the backgrounds in Photoshop, and save each image in PNG format. Then the images will have transparent backgrounds and you can use them wherever you want - the web, PowerPoint, InDesign, Flash, and so on.

To remove white backgrounds is easy:

1. Open the layers palette
2. Double click on a layer. This will bring up a dialogue box. Click OK. This process unlocks a layer
3. Use the magic wand. Set it to contiguous, tolerance 32, and click on the white are.
4. Press delete.
5. Crop away unnecessary space around the object.
6. Save as PNG

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now