For the adventurous ebay seller... use this technique to post a large picture and a gallery of thumbnail pictures that change the large pic when clicked.
Requirements:
1. no fear of simple html
2. a photobucket account
3. the ability to resize images so that multiple images have the same size.
Here\'s the theory. JavaScript can use the document object model (DOM) to change the \"src\" attribute of an \"img\" tag, which can force the same image area to show a different image. Using the built-in thumbnail capability of photobucket, a gallery of thumbmnails can be given an onclick() attribute to dynamically load the full image in a larger image area on the page.
If that didn\'t make sense, go >>here<< to see what I mean. Click on the thumbnails and the larger image is replaced. It\'s really simpler than it sounds. The pics are all different sizes in my example, so clicking on the thumbnails causes the page to jump around a little. The example is the same listing I used for my last auction, modified to use the new technique (original auction >>here<<.)
Step 1: Prepare your images.
Basically, just pick the set of images you want to show in your auction, then resample them in whatever image processor you like (Gimp, Photoshop, etc.) to all have the same *vertical* resolution. This way the page won\'t jump around on you when you click the thumbnails like my example does.
Step 2: Upload to Photobucket
This will provide permanent links to the images and thumbnails. I find it\'s easiest to create a specific subsection for each auction.
Step 3. Create the eBay listing.
I\'ll break this down a little.
a. Insert a \"script\" tag at the beginning of your auction description.
This little guy just takes an image (which we have named \"mainpic\" and changes it to point to whatever pic you have supplied as \"url\". Don\'t include any actual url\'s at this point; just include the script part verbatim.
b. add the main picture and gallery of thumbnails
At the appropriate place in your listing, begin centering (using \"<center>\") and insert your main picture. It will look roughly like this:
Obviously the \"your-pic-url\" will be the url of your actual starting pic, which ideally should be the first of your thumbnails. Make sure and put a couple <br> (line break) tags after the main image so that the thumbnails will line up under it.)
c. Insert the thumbnail image tags.
First off, here\'s the basic format:
There, not so bad, huh? It looks really messy when the urls are included though.
See? Note that the url differs only by a \"th_\" in the thumbnail url. Photobucket creates thumbnails automatically, and the just sticks a th_ at the beginning of the filename. Very handy. After each thumbnail, insert a couple (non-blanking spaces) to separate them a little. Also, make sure to end the centering after the thumbnails, using </center>.
That\'s it. It\'s just a cool little trick for people who want images in the middle of their listing, or who don\'t want to pay ebay to host multiple images, or who want to host images where you control the size. View the page source of the example for a cimplete view of the technique. The only things added to the example that wouldn\'t go in the ebay listing are the <html>, <head>, <title>, and <body> tags.
Disclaimer: I have not actually used this technique on an auction. I created a dummy test auction using this technique and the auction preview worked just fine. My next auction will utilize this technique, but I don\'t know when that will be.
Requirements:
1. no fear of simple html
2. a photobucket account
3. the ability to resize images so that multiple images have the same size.
Here\'s the theory. JavaScript can use the document object model (DOM) to change the \"src\" attribute of an \"img\" tag, which can force the same image area to show a different image. Using the built-in thumbnail capability of photobucket, a gallery of thumbmnails can be given an onclick() attribute to dynamically load the full image in a larger image area on the page.
If that didn\'t make sense, go >>here<< to see what I mean. Click on the thumbnails and the larger image is replaced. It\'s really simpler than it sounds. The pics are all different sizes in my example, so clicking on the thumbnails causes the page to jump around a little. The example is the same listing I used for my last auction, modified to use the new technique (original auction >>here<<.)
Step 1: Prepare your images.
Basically, just pick the set of images you want to show in your auction, then resample them in whatever image processor you like (Gimp, Photoshop, etc.) to all have the same *vertical* resolution. This way the page won\'t jump around on you when you click the thumbnails like my example does.
Step 2: Upload to Photobucket
This will provide permanent links to the images and thumbnails. I find it\'s easiest to create a specific subsection for each auction.
Step 3. Create the eBay listing.
I\'ll break this down a little.
a. Insert a \"script\" tag at the beginning of your auction description.
Code:
<script type=\"text/javascript\">
function change_pic(url)
{
document.mainpic.src = url;
}
</script>b. add the main picture and gallery of thumbnails
At the appropriate place in your listing, begin centering (using \"<center>\") and insert your main picture. It will look roughly like this:
Code:
<img name=\"mainpic\" src=\"your-pic-url\">c. Insert the thumbnail image tags.
First off, here\'s the basic format:
Code:
<img onclick=\"change_pic(full-size-img-url)\" src=\"thumbnaul-img-url\">
Code:
<img onClick=\"change_pic(\'http://i3.photobucket.com/albums/y57/hakoMike/Warmachine/Vilmon/vilmon_f3.jpg\')\"
src=\"http://i3.photobucket.com/albums/y57/hakoMike/Warmachine/Vilmon/th_vilmon_f3.jpg\">That\'s it. It\'s just a cool little trick for people who want images in the middle of their listing, or who don\'t want to pay ebay to host multiple images, or who want to host images where you control the size. View the page source of the example for a cimplete view of the technique. The only things added to the example that wouldn\'t go in the ebay listing are the <html>, <head>, <title>, and <body> tags.
Disclaimer: I have not actually used this technique on an auction. I created a dummy test auction using this technique and the auction preview worked just fine. My next auction will utilize this technique, but I don\'t know when that will be.
