PDA

View Full Version : I want tiny favorites!

photogmomma
Jul-31-2007, 01:52 PM
Help! I want favorites that looks like this: http://www.photoscapedesign.com/ (see the bottom - cool!)

I searched, but I'm obviously not searching for the right thing since i know I saw the code here once before. Can anyone point me to that code?

Thanks a ton!
Andy
Jul-31-2007, 03:08 PM
Hi Andi,

We're kinda swamped today, but I've given your post to Barb, she will reply at somepoint within the next 24 hours.
denisegoldberg
Jul-31-2007, 04:01 PM
I don't know how Barb selected the photos for her tiny thumbs display - I'd love to know that too. I suspect she did something elegant.

But if you know what pictures you want, or what galleries you want to pull them from, you can put together a series of <img src= statements that will build the line of thumbs. For example, in an html-only gallery, I used the following to generate the attached line of 4 thumbs by pulling random photos from 4 different galleries and specifying a size of 100x100:


<html>
<img src="/photos/random.mg?AlbumID=3024411&Size=100x100">
<img src="/photos/random.mg?AlbumID=2653118&Size=100x100">
<img src="/photos/random.mg?AlbumID=2817311&Size=100x100">
<img src="/photos/random.mg?AlbumID=2335443&Size=100x100">
</html>


I haven't used bulk zoom thumbnail to build square thumbs - and square thumbs would probably look better than my mixture... maybe this will give you something to play with anyhow.

But - Barb? You did do something more elegant than that, didn't you?

--- Denise
Allen
Jul-31-2007, 04:16 PM
All her photo thumbs have been squared so they will be that way in the
popular gallery. Then in the CSS she formated the popular photo box to fit
the one line by chosing how many to show. Also set the size for the thumb and the hover thumb.

This is what she did for the photos, the popular box would have to be sized
also. This is just to see how the different things are effected.

#popularPhotosList .photo {
width: 52px !important;
height: 52px !important;
margin: 0px !important;
position: relative;
}

#popularPhotosList .photo img {
width: 50px;
height: 50px;
border: 1px solid #fff;
position: absolute;
left: 0px; top: 0px;
}

#popularPhotosList .photo img:hover {
width: 60px;
height: 60px;
z-index: 999;
left: -5px; top: -6px;
}
denisegoldberg
Jul-31-2007, 04:30 PM
...Then in the CSS she formated the popular photo box to fit
the one line by chosing how many to show. Also set the size for the thumb and the hover thumb.

...This is just to see how the different things are effected.
Allen -
Thanks for satisfying my curiosity! I'm constantly amazed by how many different effects can be created with CSS. And I really get a kick out of learning new stuff, never know when or where I'll need to put it to use!

--- Denise
Allen
Jul-31-2007, 04:44 PM
Allen -
Thanks for satisfying my curiosity! I'm constantly amazed by how many different effects can be created with CSS. And I really get a kick out of learning new stuff, never know when or where I'll need to put it to use!

--- Denise
Denise, long time ago I gave you a link to fix the IE hover, now I can't find it.
You wouldn't still have it would you?
photogmomma
Jul-31-2007, 04:45 PM
Thanks to all! If Barb has more to add, I'm perfectly fine waiting a day or two.... But I'm about to redo my site and definitely like the way she did hers. :clap

Thanks for all the code, everyone! I'll play around and see what I can get to show up. I really appreciate it!!! :thumb
Barb
Jul-31-2007, 04:46 PM
All her photo thumbs have been squared so they will be that way in the
popular gallery. Then in the CSS she formated the popular photo box to fit
the one line by chosing how many to show. Also set the size for the thumb and the hover thumb.

This is what she did for the photos, the popular box would have to be sized
also. This is just to see how the different things are effected.

#popularPhotosList .photo {
width: 52px !important;
height: 52px !important;
margin: 0px !important;
position: relative;
}

#popularPhotosList .photo img {
width: 50px;
height: 50px;
border: 1px solid #fff;
position: absolute;
left: 0px; top: 0px;
}

#popularPhotosList .photo img:hover {
width: 60px;
height: 60px;
z-index: 999;
left: -5px; top: -6px;
}

Yep, this is how I did this :) You can do all sorts of fun things with CSS!
denisegoldberg
Jul-31-2007, 04:50 PM
Denise, long time ago I gave you a link to fix the IE hover, now I can't find it.
You wouldn't still have it would you?
Yup! I'm using it for my Kaleidoscope gallery. I don't fully understand why it works, and if I remember correctly you said something about specifying a setting that wouldn't be used. I'll try to find the post. In the meantime, here's the code:
/* "fix" for IE not showing borders as desired, red color does not show */
#albumDescription a:hover{
color:red;
}
#albumDescription a:link img,
#albumDescription a:visited img{
border:2px solid #36C;
}
#albumDescription a:focus img,
#albumDescription a:hover img,
#albumDescription a:active img{
border:2px solid #C0F;
}


>>> update: here's a link to the original thread where you provided the answer: http://www.dgrin.com/showthread.php?t=66103. And here's the link to the page that you referenced on applying image borders in IE: http://locusoptimus.com/css-trickery/ie-image-border-styles-on-hover.php.

--- Denise
Allen
Jul-31-2007, 05:05 PM
Thanks Denise, want to see if it will apply the the popular thumbs somehow. The
thumbs do not change size on hover in IE6 on my site or Barbs.