Problems with thumbnail viewer

christinalkc · Joined: 28 Jun 2009 Posts: 10

Hi,

I am very new to web design and trying to put together some images in a thumbnail format which can be clicked to view the larger image on an allocated space.

I have done my layout on Photoshop and Dreamweaver and can't figure out how and where to put in the codes so the thumbnail viewer would work. My thumbnail images and larger images are separate files, done on photoshop. I have very specific frames where the thumbnails and viewer go, that's why I find it confusing as to where to put the codes.

I found a code here but tried to put on my site and it messed everything up.

To better understand, this is my site where the images are:

http://www.autoreconditioner.com/bumper.htm

It's still incomplete because I am stuck with the thumbnail viewer.

Can anyone advise? Thank you in advance!

Cheers.

sticks464 · Joined: 31 Dec 2006 Posts: 2630

This would be a good place to start.

Your going to have to slice up your image into pieces and use the pieces as backgrounds to hold your large images and thumbnails.
Get rid of the absolute positioning so your layout works with screen resizing. Using a fluid layout will work better.

christinalkc · Joined: 28 Jun 2009 Posts: 10

Wow.....thanks for the quick reply. That sounds harder than I thought. Sad

I was thinking the div for the thumbnails will make it easier. I checked out the site you sent and that's what I would like but the codes...Wow, I don't even know what I am looking at! Maybe I should just stick to the old fashioned click and opens a new link thing Sad

As for the absolute positioning... Do I just get rid of them completely or do I need to replace them with something?

What is a fluid layout?

I am sorry with all these questions. I am trying to learn as much as I can since this is my first website.

Thanks for the help!!!

Cheers.

sticks464 · Joined: 31 Dec 2006 Posts: 2630

Give me some time today (or maybe until tomorrow) and I'll have something you can work with that is only one page for all the galleries.

christinalkc · Joined: 28 Jun 2009 Posts: 10

Thank you for your reply once again!!! Should have gotten back earlier but something happened..

I really do want and need to learn how to work on my website because I can't just go back to you and have you fix everything whenever something goes wrong so I do appreciate if you could point me to the right direction.

Now, with so many things I need to change on my site, I guess I can only do one at a time. First thing I am going to do is to remove the absolute positioning. I will get all of that removed by tonight.

What should the next step be?

Thanks again!!

Cheers..

sticks464 · Joined: 31 Dec 2006 Posts: 2630

Ok, I will tutor you through this a little at a time.
First thing, did yo save your image as a psd in photoshop?

It is easier with a psd but will work using a jpg also except for the resizing.

Turn off all your layers except the main image that has the image of the car and the text 'Complete Auto Reconditioning'. Resize the text 'Complete' to about 36 pixels and position it to the left top with about 20px from the top and left side. Resize the text 'Auto Reconditioning' to 18pixels and position it under the 'Complete' text centered with 20pixels spacing. Resize the car image to about 100 pixels in height and leave it all the way to the right. Now your layer or logo image should be only 100pixels in height. Make a slice of just the text that is 100pixels high and wide enough to include all the text. Save this slice as logo_text.jpg. Make another slice that is only of the auto image 100pixels high and wide enough to include all of the image. Save this as logo_bg.jpg. If the bottom red and black lines are part of this layer make a new slice that is 10pixels wide by the height of the two lines. Save this slice as spacer.jpg.
Turn off this layer and turn on all layers except text layers. Make a new splice 10pixels wide and high enough to include the stripes of the top layer that will hold the home, about and contact us links. Stop your slice 1pixel below the grayish stript. Save this slice as menu_bg.jpg. Do the same thing for the footer including the red stripe at the top of the footer. Save this as footer_bg.jpg. Now create a new file 10pixels wide by 900pixels high. Make a gradient duplicating the center portion of your old image, red at the top graduating to black at the bottom. Save this image as gody_bg.jpg.
Now you should have all your images to re-create your layout with html and css.

The whole purpose is to create a layout that will work in a resolution of 1024x768 or greater.

christinalkc · Joined: 28 Jun 2009 Posts: 10

I really owe you big time for your help!!! Thank you so much.

Okay, I have done the images separately as instructed. I have the logo_text, logo_bg, spacer, gody_bg, menu_bg, footer_bg. I hope I did the right thing....

I believe those are the images for the "universal" layout for all my pages, right?

CSS.. hmm I have never done anything on CSS, so this should be interesting to learn. Thank you again!!

I'll be waiting for the next lesson.

Cheers..

sticks464 · Joined: 31 Dec 2006 Posts: 2630

Next step:
Create a folder to hold all site content, give it any name you want.
Inside this folder create two folders, one named css and one named images.
Put all your images inside the images folder.
We will enter all xhtml coding before we attempt to do any styling.

The layout we will use is a universal two column xhtml layout. Copy the code and save it in a new file and name it bumper.html

code

christinalkc · Joined: 28 Jun 2009 Posts: 10

I am amazed!!! Thanks very much. Looks easy but I need to study everything to make sure I know what is going on Smile

I am still not entirely done with all the images but will get them sorted out this afternoon - both small thumbnail and larger image.

I am all ready for the next lesson..... Smile

Cheers.

sticks464 · Joined: 31 Dec 2006 Posts: 2630

I haven't deserted you. There are some problems getting the gallery working correctly with this layout. As soon as I iron it out I will post the rest of the css and any changes.

Just to let you know before we get too far into this only to find it is not cross browser compatible.

christinalkc · Joined: 28 Jun 2009 Posts: 10

No worries Smile

Take your time.

I was working on the rest of the pages (index, about and contact) and tried to remove the absolute positioning and everything went haywire. Sad

Cheers..

sticks464 · Joined: 31 Dec 2006 Posts: 2630

I have fixed the image gallery and fixed IE also. However this comes with some compromises. The layout works fine if I do away with the left sidebar. To compensate for no sidebar I made the galleries inside a tabbed menu layout, centered. There is only one page and works the same as with a sidebar. The gallery also does not use thumbnail images, it uses the large image as a thumbnail, eliminating the need for thumbnail images.

If you want I can put all the files and images I use on my website and let you download them. Then if you have questions or want to make changes we want have to make so many post in the forum.

Keep the page layout I posted earlier as you can probably use it with the other pages that do not have the gallery.

Let me know so I can either continue with the tuts or link you to the code.

AFTER THOUGHT:
I just happened to think maybe I'm on the wrong track doing an image gallery for each of the links in the side bar. Is the bumper repair the only gallery and the other links for pages with no gallery? I don't want to give you the wrong code.

christinalkc · Joined: 28 Jun 2009 Posts: 10

Hmmm.. I replied to your post two days ago and it didn't show up???

christinalkc · Joined: 28 Jun 2009 Posts: 10

Sorry for the long delay. I posted my reply two days ago and I didn't know it didn't get posted right!! Okay, let me do this again. Hopefully it gets posted this time......

Yes, I can do without the sidebar.

I am not sure if I am able to imagine the layout with the centered tabbed menu... do you have a screenshot that I can perhaps see? I do like the idea of just one page where the gallery is. I was just thinking and this is just a suggestion, what do you think if we have a link "Gallery" on the top menu and the footer alongside the HOME, ABOUT US and CONTACT US. Then it clicks to a new page of gallery.

No thumbnails sounds fine to me but if it makes things easier, I am all up for it.

There are 8 links on the sidebar. There will never be any pics available for ODOR REMOVAL and DETAILING. Currently I have 8 pics for BUMPER REPAIR and 8 pics for HEADLIGHT RESTORATION. I am still waiting for pics for the rest of the 4 links (SCRATCHES, WINDSHIELD, CIGARETTE and TOUCH-UP) I hope I will be able to add them to the page in the future or whenever I get them.

So please go ahead and put the files and images up on your site.

Do let me know anything that I could do at the meantime?

sticks464 · Joined: 31 Dec 2006 Posts: 2630

I thought you gave up on me. Ok I'll get the up after I make changes and remove the tabs for the ones that will never have links. The rest of the site can have the sidebar except for this page which will have all the galleries. I'll post up a link tomorrow. I'm off to bed right now.

I just happened to think of this , what page are you putting the script links on since your using frames?