simple HTML template for Virtual Coin Album (VCA)

[James_OldeTowne]

I have been asked numerous times about how to set up a simple Virtual Coin Album (VCA). By no means am I a professional website designer, but it isn't difficult to do. Credits: Thanks to "Grade_It" for letting me use some of his dimes as the coins in this example.

 

Here is a link to a VCA with sixteen Roosevelt dimes , just to give you an idea of what one looks like in a web browser. The small images can be clicked to view a large, detailed version of each side of each coin.

 

You can "view source" (or something like that) from your browser to see my HTML code. In FireFox, click [View] and [Page Source], highlight the resulting code dump, right-click and [Copy], then paste into your favorite TEXT editor. I hereby officially relinquish copyright, and give my permission for anyone to freely use my code, as-is or in modified format.

 

Here are the basic concepts:

 

(1) Create a background image of some sort. In my example, I sampled an actual DANSCO album, but brightened up the resulting image to give a nice, light background, which is particularly useful if you plan to print the album.

 

(2) Image your coins at whatever blown-up size you like - the "primary" image, so to speak.

 

(3) Create thumbnail images of each "primary" image. Convert the thumbnails into GIFs, and make the white cropped areas "transparent". This will allow the "DANSCO" background to complete surround the coin.

 

(4) Use the code that I've linked above and make appropriate changes. Basically, make sure you change image links to point to your background and coin images, and change hypertext references to point to your own website.

 

This should get you started. I gladly welcome all refinements or suggestions, and will try to answer questions if I can. Naturally, this basic example can be greatly enhanced to include additional text, graphics overlays, etc. Let your imagination take over!

[TonerGuy]

Thank you ! I have been searching for something just like this ! Nice job !

[jesbroken]

James,

One additional item that I would add, please use high quality photos so that when you place the photo page in your windows photo viewer or whatever you use that allows enlargement you can make the image larger by many, many times in order to see each individual coins defects, flaws or spectacular components even. In my virtual albums you can enlarge 20x. It really makes looking at your coins enjoyable and even stops you from missing them while in your SDB.

Jim

 

[jerseycat10]

I've actually been contemplating doing something similar, but with jQuery, to offer more dynamics.

 

Here is a sample page flipping plugin:

 

http://builtbywill.com/code/booklet/

 

I do happen to be a professional web developer, and I will implement this, this weekend.

[Bruceswar]

I've actually been contemplating doing something similar, but with jQuery, to offer more dynamics.

 

Here is a sample page flipping plugin:

 

http://builtbywill.com/code/booklet/

 

I do happen to be a professional web developer, and I will implement this, this weekend.

 

Good luck with that. Lets see what you come up with...

 

 

On the other hand James has a simple nice layout. Should anybody need help setting this up feel free to PM me! I to have done many of these and they can be done many ways. James does a nice job here with his.

 

 

Edited to add... Since James is going to let people use his template... here is the background image he used.

 

Background image

 

 

 

[James_OldeTowne]

Bruce, thanks.

 

One benefit of simplicity is that my HTML example requires no javaScript, Flash, or anything else fancy. Therefore, it should be pretty doggone smooth and fast.

[Bruceswar]

Bruce, thanks.

 

One benefit of simplicity is that my HTML example requires no javaScript, Flash, or anything else fancy. Therefore, it should be pretty doggone smooth and fast.

 

I agree with you. Sometimes though people which to have more complex layouts. I am trying one now. They can also be fun.

 

 

On a side note, people can have combined front and back images into 1. Such as the image below...

 

 

 

Which can lead to an image like this...

 

 

[DC Dawg]

James:

 

Why don't you check out Lytebox v3. Lytebox may require JavaScript, but it is light and really does well with galleries. This will allow you to create a gallery that will allow for overlaid images without opening new pages.

 

I've used Lytebox and it's real easy to integrate. You can find it at http://dolem.com/lytebox/. Give it a try!

 

Scott

[Bruceswar]

Here is a text file with the needed code to make this work.

 

 

Text File

[James_OldeTowne]

One more thing: I wrote the code that Bruce kindly linked entirely from scratch in NotePad. If you are familiar with HTML code, the you already know that you can manipulate the code in any text editor. However, if you use something like FrontPage, or other application for making websites, this code should easily import or cut&paste into your application. It's so straightforward that it will be easy for any system to parse.

[DC Dawg]

I would also put quotes (preferably double quotes) around URL, even relative URLs in on the src= and href= parameters.