|
How to set up the image gallery for your personal use in auctions or on your website.
If you are not used to working with html code it may seem daunting at first, but rest assured it is not that hard if we take it in steps, and will get easier as you do it. The first step, if you have not already done so, would be to download the rar file either the large one or the smaller one. If you do not have winrar you can get it here. You will need it to unpack the files. Once downloaded and unpacked you can get started on the changes we need to make to use this with your auctions. Once unpacked you will find 2 folders and 3 files. The 2 folders are: Swap_Background and Swap_Images. The swap images are only the images in the example and you won't need them anymore after we set this up and can be deleted if you want to. You will need to upload the swap_background files to your web/image host. If your host will allow it I would suggest leaving the swap background images in the same folder that they are in when you upload them to your host. It is just my personal way to do it as I like being able to find my images easier. Plus it gives you the added advantage of being able to easily find and edit these images to add color to them and have different color packs for the frame around the outside of the main image display. Once you have the images uploaded onto your web/image host then we need to open either the image_swap_gallery.html or the swap_code.txt file depending on whether you want to use this in a web page or an auction. fopr a web page use the html file. For an auction use the .txt file. For the purpose of showing you how it is done I am going to use the txt file. With your images uploaded onto the web and the url's of each we either scroll down the code or use the edit/find command and go to the first image. the first image in the code is: "Swap_Background/top_left.gif" Between the quotation marks, replace the image location with the URL to the image on your image host. For example, between the quotation marks you will have something like this: http://www.your_image_host.com/Swap_Background/bottom_left if you do not retain the folder as I have then it will be like this: http://www.your_image_host.com/bottom_left Go through the the code doing all 8 images this way. All .gif images should now be replaced. They all have side as part of their file name. Save this file into a folder without the other images in it as an html file. You do this by typing your_file.html and then selecting all files. Click Save and then we need to open our web browser to check the page. You should now have the page without any of the demo images but all of the gif images for the picture frame, and with places for your images for you auction. You now have the image gallery saved and ready to use in any auction by simply adding the images you want to use into it. It should now look like this;  Now for adding your images! The first image in the gallery needs to be replaced 3 times. Replace the location of the image (everything between the quotation marks) with the full URL to your image. like this: http://www.your_image_host.com/1st_auction_pic.jpg do it in all 3 locations. Using the Find function of notepad. Clicking images will go to full size.   Now we only have to change each of the other images 2 times. Scroll or use your search to find the next image and replace it in both locations in the code. It will be after the onclick command. replace the images with the URL of your image. Again make sure you have the complete URL in between the quotation marks. Do this for as many images as you need in your auction. If you do not need the 10 images as the gallery is set up for. You can remove them from the bottom up by going to the code: <td onmouseover="this.style.border = '1px dashed gray'" onmouseout="this.style.border = '1px solid white'" style="border: 1px solid white; padding: 1px 4px;" align="center"> <a onclick="document.getElementById('placeholder').src = 'swap_images/butterfly01.jpg'"><img src="swap_images/butterfly01.jpg" border="1" width="100"></a></td> and removing everything from the <a to the </a> this part: <a onclick="document.getElementById('placeholder').src = 'swap_images/butterfly01.jpg'"><img src="swap_images/butterfly01.jpg" border="1" width="100"></a> leaving the unused image section like this: <td onmouseover="this.style.border = '1px dashed gray'" onmouseout="this.style.border = '1px solid white'" style="border: 1px solid white; padding: 1px 4px;" align="center"> </td> This will insure that the place holder is still in place and you can add or remove images at anytime. To place this code in your auctions or webpage you can use the swap_code file as it has only the code from table to table in it. You would copy this code and place it in your auction or web page after making the nessasary changes to the images and their locations. If you have any questions , need help or wish to use my images anywhere you can email me at the link below Contact me if you still need any help. Best of luck and enjoy! Coleman |
|
