PDA

View Full Version : help please with centering image in slide show.

mjs
Oct-09-2009, 08:11 PM
I'm hoping somebody can help. I am running the Shizam slide show and before I added a ridge my pictures were feeding perfectly with no space around the picture at all. Now I have large dead space and I would like to know how to tighten things up. I came across this website http://www.joerallen.com/ and this is how I would like it to look.

Than You
J Allen
Oct-10-2009, 12:59 AM
I'm hoping somebody can help. I am running the Shizam slide show and before I added a ridge my pictures were feeding perfectly with no space around the picture at all. Now I have large dead space and I would like to know how to tighten things up. I came across this website http://www.joerallen.com/ and this is how I would like it to look.

Than You

Try this:




/*====Tighten Homepage====*/
#userBio {padding-top:25px;}
#homepage {padding-top:0;}
.homepage #breadcrumb
{display:none;}

.menu
{display:none;}




Looks like you might have been trying to add a drop-down nav-bar..that is what's taking up some space there....

:ear
mjs
Oct-10-2009, 07:36 AM
Try this:




/*====Tighten Homepage====*/
#userBio {padding-top:25px;}
#homepage {padding-top:0;}
.homepage #breadcrumb
{display:none;}

.menu
{display:none;}



Looks like you might have been trying to add a drop-down nav-bar..that is what's taking up some space there....

:ear

Thanks so much for responding. The responses are getting scarce these days. I did at one time have a drop down menu and would love to get rid of the extra code but afraid I would break something else.

I entered the code but as you can see there is still a lot of space beteewn the frame and the picture itself. Di I have to make the picture a certain size? or can I have it be auto sized? Thx.
J Allen
Oct-10-2009, 01:43 PM
Thanks so much for responding. The responses are getting scarce these days. I did at one time have a drop down menu and would love to get rid of the extra code but afraid I would break something else.

I entered the code but as you can see there is still a lot of space beteewn the frame and the picture itself. Di I have to make the picture a certain size? or can I have it be auto sized? Thx.


Yes, you would have to make the pictures in your slideshow gallery all the same ratio as your frame....

On my site. the frame I have, was made in Photoshop:

http://www.joerallen.com/photos/486617391_h4JNa-O.png


And any pictures I display in my slideshow are all "landscape" orientation, cropped at a 4x6 ratio.
mjs
Oct-10-2009, 03:35 PM
Yes, you would have to make the pictures in your slideshow gallery all the same ratio as your frame....

On my site. the frame I have, was made in Photoshop:

http://www.joerallen.com/photos/486617391_h4JNa-O.png


And any pictures I display in my slideshow are all "landscape" orientation, cropped at a 4x6 ratio.

If I'm understanding it correctly in order to have a full frame around the picture the frame has to be created in PS and then images sized to the frame? Once the frame is created then is it treated as any other image/object to get it on the front page? By that I mean the frame is uploaded to a gallery and from that gallery it is placed on the home page? If that is correct how then do I get it on the home page? Through the CSS box? Thx.
J Allen
Oct-10-2009, 04:09 PM
If I'm understanding it correctly in order to have a full frame around the picture the frame has to be created in PS and then images sized to the frame? Once the frame is created then is it treated as any other image/object to get it on the front page? By that I mean the frame is uploaded to a gallery and from that gallery it is placed on the home page? If that is correct how then do I get it on the home page? Through the CSS box? Thx.


If you make a frame in PS, or just download my frame, and maybe change the color of it in PS to match your web-site.....then upload it to an unlisted gallery on your smugmug site...maybe store it in your "smug-mug site files" gallery...then we'll just use some css to display it only on your home page, very easy to do...just post back if this is something you would like to try.....
mjs
Oct-10-2009, 04:20 PM
If you make a frame in PS, or just download my frame, and maybe change the color of it in PS to match your web-site.....then upload it to an unlisted gallery on your smugmug site...maybe store it in your "smug-mug site files" gallery...then we'll just use some css to display it only on your home page, very easy to do...just post back if this is something you would like to try.....

First off you have no idea how much I appreciate this. Trust me if you lived close I'd buy you a beer.

Here is the gallery where my frame is located.
http://mjsaba.smugmug.com/gallery/9918917_QBZaY#676330238_mpQwk
J Allen
Oct-10-2009, 05:07 PM
First off you have no idea how much I appreciate this. Trust me if you lived close I'd buy you a beer.

Here is the gallery where my frame is located.
http://mjsaba.smugmug.com/gallery/9918917_QBZaY#676330238_mpQwk


In order for this to work, your frame needs to be a transparent .png....I got this one working on your site, but it covers your slide-show up, cause it's a .jpeg.


So here is the basic lay-out........


Change your bio-box to this:




<html>

<center>
<div id="PSDSlidecontainer">
<div id="PSDFrame"></div>
<div id="PSDslideshow">
<script>
var ssConfig = {
AlbumID: '5529104',
AlbumKey: 'f3ta9',
newWindow: 'false',
transparent: 'true',
splash: 'http://mjsaba.smugmug.com/photos/673409988_iKB97-X3.jpg',
showLogo: 'false',
clickUrl: 'http://mjsaba.smugmug.com/galleries ',
showThumbs: 'false',
showButtons: 'false',
borderThickness: '',
borderColor: 'cccccc',
borderCornerStyle: 'square',
crossFadeSpeed: '650'
};

SM.flash.insertSlideshow(800, 495, ssConfig, 'transparent');
</script>

</div>
</div>
</center>

</html>






Then add this to your CSS box, changing the red, to your new transparent .png URL:







/*=====Slide-Show-Frame=====*/
#PSDFrame
{background: url(/photos/676330238_mpQwk-X3.jpg) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=image src='/photos/676330238_mpQwk-X3.jpg');
width: 775px;
height: 520px;
position: relative;
margin: 0px auto;
left: 0px;
z-index: 13;
text-align: center;}

#PSDSlidecontainer
{position: relative;
right: 0px;
_right:0px;
margin-top: 10px;
margin-bottom: -10px;}

#PSDslideshow
{text-align: center;
position: absolute;
left: 5px;
_left: -15px;
top: 16px;}

#PSDFrame
{display: none;}

.homepage #PSDFrame
{display: block;}

.notLoggedIn #PSDSlidecontainer
{margin-top: -30px;}

#homepage {width:1100px !important;
text-align:center !important;
margin: 0 auto !important;}
#bioBox {margin: 0 auto !important;}






It will need a little tweaking to match IE & FF, but post back when you get your .png up loaded and I'll give you a hand...
mjs
Oct-10-2009, 06:05 PM
In order for this to work, your frame needs to be a transparent .png....I got this one working on your site, but it covers your slide-show up, cause it's a .jpeg.


So here is the basic lay-out........


Change your bio-box to this:




<html>

<center>
<div id="PSDSlidecontainer">
<div id="PSDFrame"></div>
<div id="PSDslideshow">
<script>
var ssConfig = {
AlbumID: '5529104',
AlbumKey: 'f3ta9',
newWindow: 'false',
transparent: 'true',
splash: 'http://mjsaba.smugmug.com/photos/673409988_iKB97-X3.jpg',
showLogo: 'false',
clickUrl: 'http://mjsaba.smugmug.com/galleries ',
showThumbs: 'false',
showButtons: 'false',
borderThickness: '',
borderColor: 'cccccc',
borderCornerStyle: 'square',
crossFadeSpeed: '650'
};

SM.flash.insertSlideshow(800, 495, ssConfig, 'transparent');
</script>

</div>
</div>
</center>

</html>





Then add this to your CSS box, changing the red, to your new transparent .png URL:







/*=====Slide-Show-Frame=====*/
#PSDFrame
{background: url(/photos/676330238_mpQwk-X3.jpg) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=image src='/photos/676330238_mpQwk-X3.jpg');
width: 775px;
height: 520px;
position: relative;
margin: 0px auto;
left: 0px;
z-index: 13;
text-align: center;}

#PSDSlidecontainer
{position: relative;
right: 0px;
_right:0px;
margin-top: 10px;
margin-bottom: -10px;}

#PSDslideshow
{text-align: center;
position: absolute;
left: 5px;
_left: -15px;
top: 16px;}

#PSDFrame
{display: none;}

.homepage #PSDFrame
{display: block;}

.notLoggedIn #PSDSlidecontainer
{margin-top: -30px;}

#homepage {width:1100px !important;
text-align:center !important;
margin: 0 auto !important;}
#bioBox {margin: 0 auto !important;}





It will need a little tweaking to match IE & FF, but post back when you get your .png up loaded and I'll give you a hand...


Ok ready for the tweaks. The slide show box looks huge. I'm assuming there is some way to resize it to a smaller box? Would that be in the bio with this line:SM.flash.insertSlideshow(800, 495, ssConfig, 'transparent');
J Allen
Oct-10-2009, 06:46 PM
Your frame isnt showing, can you give me a link to your new .png frame, looks like you just have the wrong URL in your css rule


:ear
mjs
Oct-10-2009, 06:51 PM
Your frame isnt showing, can you give me a link to your new .png frame, looks like you just have the wrong URL in your css rule


:ear

http://msabatini.com/Other/website-banners/9919996_UxZK7#676429741_zPwB4
J Allen
Oct-10-2009, 07:06 PM
http://msabatini.com/Other/website-banners/9919996_UxZK7#676429741_zPwB4


Change these rules:


/*=====Slide-Show-Frame=====*/
#PSDFrame
{background: url(/photos/9919996_UxZK7#676429718_GJ7vc-X3.png) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=image src='/photos/9919996_UxZK7#676429718_GJ7vc-X3.png');
width: 775px;
height: 520px;
position: relative;
margin: 0px auto;
left: 0px;
z-index: 13;
text-align: center;}

#PSDSlidecontainer
{position: relative;
right: 0px;
_right:0px;
margin-top: 10px;
margin-bottom: -10px;}

#PSDslideshow
{text-align: center;
position: absolute;
left: 5px;
_left: -15px;
top: 16px;}

#PSDFrame
{display: none;}

.homepage #PSDFrame
{display: block;}

.notLoggedIn #PSDSlidecontainer
{margin-top: -30px;}

#homepage {width:1100px !important;
text-align:center !important;
margin: 0 auto !important;}
#bioBox {margin: 0 auto !important;}







To these:








/*=====Slide-Show-Frame=====*/
#PSDFrame
{background: url(/photos/676429741_zPwB4-X3.png) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=image src='/photos/676429741_zPwB4-X3.png');
width: 775px;
height: 520px;
position: relative;
margin: 0px auto;
left: 0px;
z-index: 13;
text-align: center;}

#PSDSlidecontainer
{position: relative;
right: 30px;
_right:30px;
margin-top: 10px;
margin-bottom: -10px;}

#PSDslideshow
{text-align: center;
position: absolute;
left: 5px;
_left: -15px;
top: 14px;}

#PSDFrame
{display: none;}

.homepage #PSDFrame
{display: block;}

.notLoggedIn #PSDSlidecontainer
{margin-top: -20px;}






Then remove this rule:



#bioBox{
border : 12px ridge;
border-color : #B79567;
}





Lets see how that looks in IE..
mjs
Oct-10-2009, 07:10 PM
Change these rules:


/*=====Slide-Show-Frame=====*/
#PSDFrame
{background: url(/photos/9919996_UxZK7#676429718_GJ7vc-X3.png) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=image src='/photos/9919996_UxZK7#676429718_GJ7vc-X3.png');
width: 775px;
height: 520px;
position: relative;
margin: 0px auto;
left: 0px;
z-index: 13;
text-align: center;}

#PSDSlidecontainer
{position: relative;
right: 0px;
_right:0px;
margin-top: 10px;
margin-bottom: -10px;}

#PSDslideshow
{text-align: center;
position: absolute;
left: 5px;
_left: -15px;
top: 16px;}

#PSDFrame
{display: none;}

.homepage #PSDFrame
{display: block;}

.notLoggedIn #PSDSlidecontainer
{margin-top: -30px;}

#homepage {width:1100px !important;
text-align:center !important;
margin: 0 auto !important;}
#bioBox {margin: 0 auto !important;}






To these:








/*=====Slide-Show-Frame=====*/
#PSDFrame
{background: url(/photos/676429741_zPwB4-X3.png) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=image src='/photos/676429741_zPwB4-X3.png');
width: 775px;
height: 520px;
position: relative;
margin: 0px auto;
left: 0px;
z-index: 13;
text-align: center;}

#PSDSlidecontainer
{position: relative;
right: 30px;
_right:30px;
margin-top: 10px;
margin-bottom: -10px;}

#PSDslideshow
{text-align: center;
position: absolute;
left: 5px;
_left: -15px;
top: 14px;}

#PSDFrame
{display: none;}

.homepage #PSDFrame
{display: block;}

.notLoggedIn #PSDSlidecontainer
{margin-top: -20px;}





Then remove this rule:



#bioBox{
border : 12px ridge;
border-color : #B79567;
}




Lets see how that looks in IE..

Wow, getting closer. I looked in IE and it looks the same as in FF. Both need some alignment OR I need to resize my ohots to the 4x6 ratio.
J Allen
Oct-10-2009, 07:17 PM
Try changing the red in this rule:







/*=====Slide-Show-Frame=====*/
#PSDFrame
{background: url(http://msabatini.com/photos/676429741_zPwB4-X3.png) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=image src='http://msabatini.com/photos/676429741_zPwB4-X3.png');
width: 775px;
height: 520px;
position: relative;
margin: 0px auto;
left: 0px;
z-index: 13;
text-align: center;}
mjs
Oct-10-2009, 07:23 PM
Try changing the red in this rule:







/*=====Slide-Show-Frame=====*/
#PSDFrame
{background: url(http://msabatini.com/photos/676429741_zPwB4-X3.png) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=image src='http://msabatini.com/photos/676429741_zPwB4-X3.png');
width: 775px;
height: 520px;
position: relative;
margin: 0px auto;
left: 0px;
z-index: 13;
text-align: center;}





Not sure i understand. Change by dropping the http reference?
J Allen
Oct-10-2009, 07:33 PM
Looks like it'll only show with the full URL


Now, lets tweak a few margins...and make sure all the pictures in your slideshow gallery are at a 4x6 ratio.
mjs
Oct-10-2009, 07:42 PM
Looks like it'll only show with the full URL


Now, lets tweak a few margins...and make sure all the pictures in your slide show gallery are at a 4x6 ratio.

OK changed to the full url and the three pic's in the slide show are all 4x6 ratio
J Allen
Oct-10-2009, 07:53 PM
OK changed to the full url and the three pic's in the slide show are all 4x6 ratio


Change the items in red for FF, after that, we'll see how it looks in IE


/*=====Slide-Show-Frame=====*/
#PSDFrame
{background: url(http://msabatini.com/photos/676429741_zPwB4-X3.png) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=image src='http://msabatini.com/photos/676429741_zPwB4-X3.png');
width: 775px;
height: 520px;
position: relative;
margin: 0px auto;
left: 15px;
z-index: 13;
text-align: center;}

#PSDSlidecontainer
{position: relative;
right: 30px;
_right:30px;
margin-top: 10px;
margin-bottom: -10px;}

#PSDslideshow
{text-align: center;
position: absolute;
left: 0px;
_left: -15px;
top: 14px;}

#PSDFrame
{display: none;}

.homepage #PSDFrame
{display: block;}

.notLoggedIn #PSDSlidecontainer
{margin-top: -20px;}
mjs
Oct-10-2009, 07:54 PM
OK changed to the full url and the three pic's in the slide show are all 4x6 ratio

Ok I got the pic's lined up in the frame and all looks good. I want to get rid of the white line at the top but I think I just do that in the custom header box.
J Allen
Oct-10-2009, 07:57 PM
Ok I got the pic's lined up in the frame and all looks good. I want to get rid of the white line at the top but I think I just do that in the custom header box.


Just remove your "HR" tag in your custom header box:


<hr size="1" width="750" color="#ffffff">
mjs
Oct-10-2009, 07:59 PM
Just remove your "HR" tag in your custom header box:


<hr size="1" width="750" color="#ffffff">




I removed it and now which param to move the box down so I can see my nav bar?


I found it and it all looks great. You do good work.:) Seriously I am very appreciative of what you have done for me tonight. I wish I could return the favor. This has been an exasperating experience. Seems like lately that it is rare to get assistance. Again thank you.
J Allen
Oct-10-2009, 08:02 PM
Just add your "br" back in the bottom of your custom header box:




<br>
mjs
Oct-10-2009, 08:18 PM
Just add your "br" back in the bottom of your custom header box:




<br>



:bow I found it and it all looks great. You do good work.:thumb Seriously I am very appreciative of what you have done for me tonight. I wish I could return the favor. This has been an exasperating experience. Seems like lately that it is rare to get assistance. Again thank you.