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

Posted on 2011-10-09
Last Modified: 2013-11-19
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.

Question by:jecommera
    LVL 26

    Accepted Solution

    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.

    LVL 11

    Assisted Solution

    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    Read about why website design really matters in today's demanding market.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
    Learn how to download your full Prezi presentation for offline presenting. Prezi doesn’t have to be viewed and shared in a web browser, even with a free account you can download your full presentation to share with others. Be sure to download any vi…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now