PDA

View Full Version : Rounded corners/text overlay on slideshow?

gbrookshaw
Dec-28-2008, 10:45 PM
Hi,

Was really impressed with this page:

http://bigwebguy.smugmug.com/

Does anybody know how to get the rounded corners and text overlay on slideshows?

Thanks
gbrookshaw
Jan-05-2009, 01:05 PM
Anybody got any ideas on this?

Thanks
jfriend
Jan-05-2009, 01:28 PM
Anybody got any ideas on this?

Thanks I don't think there's a recipe floating around. The best way I can think of would be to do the following:

Change your slideshow so that all images are exactly the same orientation and aspect ratio. They need to end up exactly the same size when they are scaled to fit your slideshow dimensions.
Create a custom frame PNG image with rounded corners that is transparent in the middle and where the opening in the frame is exactly the dimensions of your slideshow.
Use DIVs and CSS to position the frame over the top of your slideshow. This could be done with a slight modification to the code that stops right-clicks on the slideshow as that code (described here (http://www.dgrin.com/showthread.php?t=115251)) just puts a transparent GIF over the top of the slideshow. All we'd really be doing differently here is putting your custom PNG over the top and making sure the alignment was exact.
TalkieT
Jan-14-2009, 04:19 AM
I don't think there's a recipe floating around. The best way I can think of would be to do the following:
Change your slideshow so that all images are exactly the same orientation and aspect ratio. They need to end up exactly the same size when they are scaled to fit your slideshow dimensions.
Create a custom frame PNG image with rounded corners that is transparent in the middle and where the opening in the frame is exactly the dimensions of your slideshow.
Use DIVs and CSS to position the frame over the top of your slideshow. This could be done with a slight modification to the code that stops right-clicks on the slideshow as that code (described here (http://www.dgrin.com/showthread.php?t=115251)) just puts a transparent GIF over the top of the slideshow. All we'd really be doing differently here is putting your custom PNG over the top and making sure the alignment was exact.

Oddly I had exactly this working before my most recent fixes :-) I do have that old code archived though so if I don't get any help in the next couple of days on what I hope is a quick fix, I'll reinstate some of the old code and see what I can do.

Cheers - N
TalkieT
Jan-14-2009, 04:27 AM
OK, reinstated a bit of my old code... It may not be the neatest, but this is what my relevant CSS looks like...


#bioBox .photo { display: none;
padding: 0; }

#userBio { text-align: center !important; }

#PSDSlidecontainer {
position: relative;
width: 730px;
height : 343px;
top: 0px;
margin: 0 auto; }

#PSDFrame { position: absolute;
width: 750px;
height : 363px;
top: -10px;
left: -10px;
background: url(http://talkiet.smugmug.com/photos/449272123_eu4Vu-O.png) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image src='/photos/449272123_eu4Vu-O.png'); }

And this is my Bio material...

<html>
<div id="PSDSlidecontainer">
<div id="PSDFrame"></div>
<div id="PSDslideshow">

********>
var ssConfig = {
AlbumID: '6861549',
newWindow: 'false',
transparent: 'true',
showLogo: 'false',
clickUrl: '',
showThumbs: 'false',
randomStart: 'true',
crossFadeSpeed: '500',
showButtons: 'false'
};

SM.flash.insertSlideshow(730, 343, ssConfig, 'transparent');
</********
</div>
</div>
</html>

The rounded corners of the frame (and website name) are simply made in Photoshop and saved as a 750*363 PNG...

http://talkiet.smugmug.com/photos/449272123_eu4Vu-O.png

The photos in the slideshow directory are all precisely sized to 730*343

CHeers- Hope I am able to help after receiving so much help from the forum myself over the last week or so!

Cheers -N