HELP
I need more help. What if we have different img urls for every image we want to add to this gallery???
body { background: #222; //changes background color of the body margin-top: 20px; // top margin of the document expressed in pixel. }
h3 { //title is displayed using <h3> tag color: #eee; //color of the title font-family: Verdana; //font family for the Title }
.thumbnails img { //thumbnails is the name of style class for <img> tag. height: 80px; border: 4px solid #555; //border around the thumbnail is 4 pixel wide and color used is the one with 555 color code. padding: 1px; // amount of space left between the image edge and it's border margin: 0 10px 10px 0; // amount of space left between a border and the image or any content around it. }
.thumbnails img:hover { border: 4px solid #00ccff; cursor:pointer; }
<h3>
tag is used, for which style is already created.
Step 2: Creating and Displaying Thumbnails
Division is created with <img>
tag) with "preview" id will be changed to that of src of the thumbnail(image) with specified id, i.e same image will be displayed.
Step 3: Division for enlarged image:
Division is created and style of preview class css style is applied. In the beginning first image is loaded.
Note: src attribute value format is for Linux OS, for windows OS should be used.