9 replies [Last post]
john.poliquin
john.poliquin's picture
Offline
Regular
Last seen: 4 years 37 weeks ago
Timezone: GMT-8
Joined: 2008-07-23
Posts: 11
Points: 3

Hey everyone,

I badly need help finding a template I can tweak into working for me. I'm fairly new at CSS so I'm trying to find one that doesn't require advanced knowledge.

A demo of what I want can be found here: http://www.cssplay.co.uk/menu/photo_album#nogo
However, I can't find a way to download just the gallery, when I try to save the page I get everything.

My goal is to tweak it into a CSS site similar in layout to this: http://www.grayscott.com/

Some details I need:
1. the displayed images to be 850x580
2. images instead of numbers for thumbnails (both horizontal and portrait if possible)

Thanks for any help you can give me! I owe you big.

John

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 6 years 4 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Yeah. There is a very long,

Yeah. There is a very long, and very steep learning curve to CSS. If you are working on a drop-dead due date to produce a sophisticated image gallery, you may want to explore other technolgies to make it happen instantly. And peck away at learning CSS in your spare time...

Best, and good luck...

john.poliquin
john.poliquin's picture
Offline
Regular
Last seen: 4 years 37 weeks ago
Timezone: GMT-8
Joined: 2008-07-23
Posts: 11
Points: 3

I have made a bunch of sites

I have made a bunch of sites in CSS so I'm not a complete beginner. I know I'll be able to figure this out I just need a standalone template that I can go from.

Any help is appreciated.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 9 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9190
Points: 3195

Stu is a css genius. Some

Stu is a css genius. Some of his stuff is therefore beyond us mere mortals. In this case, I'll try to describe what's happening.

There's a container, #album that holds the ul and a bg image, the deer. Its width is sufficient for the images.

The ul has a top margin large enough to create a vertical space for the images. It is also made relative position to act as the positioned containing block for the images. By setting its width, hasLayout is triggered to accommodate IE's additional requirement (a bug).

Within the lis, anchor elements are used because they can receive focus, and are clickable. The images are normally set to hidden visibility, and are absolute position. When the a element is clicked or otherwise receives focus, the image is made visible. The negative offset shoves the image into the space preserved by ul's margin.

Other than having to differentiate an additional image, one not AP, offset or hidden, there is no reason you can't use thumbnails instead of Stu's text numerals.

You might also consider a more common approach, DOM scripting. See swapping images with javascript.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

john.poliquin
john.poliquin's picture
Offline
Regular
Last seen: 4 years 37 weeks ago
Timezone: GMT-8
Joined: 2008-07-23
Posts: 11
Points: 3

Ok. I've worked on it a bit.

Ok. I've worked on it a bit. Here's what I have:

http://www.johnpoliquin.com/tiff/test.html

I've been working on making thumbnail images work instead of the numbers but to little success. Thanks for the advice Gary, I looked at the javascript method and I may take that root. I just really like how this works and feels. I really only have to solve this last issue and I'm home free. Additionally, it would be really cool to make it so I can have both landscape and portrait-sized thumbnails.

Thanks for your tips!

john.poliquin
john.poliquin's picture
Offline
Regular
Last seen: 4 years 37 weeks ago
Timezone: GMT-8
Joined: 2008-07-23
Posts: 11
Points: 3

Arg, I still can't get

Arg, I still can't get thumbnails to work instead of these numbers. Any ideas?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 9 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9190
Points: 3195

Not tested. .gallery li a

Not tested.

.gallery li a img<span style="color:red">.pic</span> {
position:absolute; 
top:-580px; 
left:0; 
visibility:hidden; 
border:0;
}
 
/* make the images visible on active/focus */
.gallery li a:active img<span style="color:red">.pic</span>, 
.gallery li a:focus img<span style="color:red">.pic</span> {
  visibility:visible;
  }
=================
<div id="album">
  <ul class="gallery">
    <li>
      <a href="#nogo">01<img class="landscape <span style="color:red">pic</span>" 
           src="photo_album_files/img/faces/website_faces-1.jpg" 
           alt="landscape image 1" 
           title="landscape image 1">
        <span style="color:red"><img src="path/face-1-tnail.jpg"
           alt="face-1-tnail"></span></a>
    </li>
 
    <li>
      <a href="#nogo">02<img class="landscape <span style="color:red">pic</span>"  
           src="photo_album_files/img/faces/website_faces-2.jpg" 
           alt="landscape image 2" 
           title="landscape image 2">
        <span style="color:red"><img src="path/face-2-tnail.jpg"
         alt="face-2-tnail"></span></a>
    </li>
  </ul>
</div>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

john.poliquin
john.poliquin's picture
Offline
Regular
Last seen: 4 years 37 weeks ago
Timezone: GMT-8
Joined: 2008-07-23
Posts: 11
Points: 3

Thanks Gary! Works like a

Thanks Gary! Works like a charm! http://www.johnpoliquin.com/tiff/test2.html

The weird thing I just noticed is that even the original script by Stu doesn't want to work in Safari 3.0. When you click the thumbnails the large images appear but do not stay. You have to hold down the thumbnails to see it. Does anyone know if there is a fix for this?

Thanks again so much.
John

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 9 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9190
Points: 3195

I don't know Safari all that

I don't know Safari all that well, so ….

It appears that the anchors are not receiving focus, even when clicked. I can't even get focus by tabbing to the links. That's in Safari3 in Vista.

In Linux, Konqueror works as expected, using the khtml engine (Webkit's parent). Epiphany, using the Webkit engine, works as expected.

There appears to be an issue in Safari's UI. Maybe a Safari user will be able to tell us why the links don't gain focus when they should.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 6 years 4 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Mac OS X 10.4.11

Mac OS X 10.4.11 Safari/3.1.2

Possibly a bug and worth checking the Safari bug reports to see if it is listed. If not file a bug report.

Last night's WebKit nightly shows same issue so it's not corrected there either.

You are good to go in Camino/1.6.1
Same for Mac Opera/9.51

Win Safari lags behind Mac Safari in any number of ways depending on what is at stake from my viewpoint...