CarouselSpinner by Shipscript

Carousel Spinner
Create a 360° view of your item

  1. Host your images online. They should all have the same dimensions for best appearance.
  2. Paste your hosted image URLs or HTML codes in the first box.
  3. Click "show images" and the tool will sort through your image codes.
    Valid images will display in the second box.
  4. Look through the images and checkmark the ones you want to use in your carousel spinner.
  5. Make the code and preview in the popup window.
  6. Remake as needed and copy the code from the code window when satisfied.
  7. Three versions: CSS code for eBay, small script for one spinner, or advanced script for multiple spinners per page.

Use our sample images for testing 1. Paste your image codes here:
          2. Select from the images displayed below:

         3. Pick up your template code below:

How to make your own product spinner

1. There are a few basic concepts involved in spinning a product.

2. So to begin, we need three things.

3. Photo Prep

Set your Camera Image size

It is best to use your camera's lowest image size setting. That way you aren't filling your computer with giant photos that you have to shrink back down again. More camera pixels allow bigger PRINT photos from the drugstore, but do NOT translate into sharper web images. To shrink an image to fit on the web, all those extra pixels must be thrown away, so I generally set my camera to shoot 640x480 images, which is my camera's lowest setting. Some newer cameras only shoot as low as 1 or 2 megapixels, and you may simply have to deal with that and resize them afterwards.

For close shots of small items and collectibles, use your camera's Macro (closeup) setting. If you don't have macro and need to stand farther back to remain in focus, using your camera's lowest picture size setting may not be appropriate. In that case, you may need to shoot at a larger size so that, after cropping away a significant amount of background, your remaining image is still an appropriate size for viewing.

Crop and resize

If you can shoot your eight sides and avoid image editing, you are a few steps ahead. But in general, I usually need to at least shrink my photos from 640 down to something that won't overload the visitor's browser. With eight photos, the burden on the browser is multiplied by eight.

Crop: My first step is to crop the excess image. This is tricky because you have to trim every photo EXACTLY the same, so you may want to skip this step. For center-cuts, I use Clic*Pic (for Windows), preset my image size and shape, and then apply zoom-to-fill to automatically crop all photos identically as I drop them into the cells. Or I use free irfanView (for Windows), which has a cropper that remembers my settings, so I can apply the same crop to each photo.

Resize: The next step is to resize. The images in my sample spinner are 480 high, straight off the camera, and I cropped off the sides to make the images 480 wide as well, so I didn't feel I needed to resize them smaller - but I did so for the samples in this tool and this is where you would apply that step.

Compress: Then I applied a LOT of compression when I saved the file. I used 70% quality for these images because I want them to load quickly enough to start running when the user starts the spinner. eBay typically uses a higher 80% quality when they shrink and compress photos. By applying more compression (lower quality), I was able to get each photo down to about 25K in size. That means all eight photos will add up to about 200K bytes, which is tolerable for a spinner of this type. Also consider that a top view and bottom view of the item may be needed outside of this spinner.

4. The Carousel Spinner

The final step is to upload the set of eight photos to your website or online image host. Then add the image codes to this tool, which will generate the javascript code or css code for a spinner that you can add to your auction or website code. Only the CSS version is acceptable on eBay, and it will resize for mobile as well.

courtesy of eBay user shipscript
copyright 2009-2020 ©