Slideshow buttons & popular photos

[rubarb3]

1. I now have a slideshow on my homepage - nice, love it. But I would really like to have buttons below it. I have looked at the slideshow threads and I see that I need to copy the buttons from another site and then ... paste them to a new gallery on my site? How do I do that? And then, how do I get them to show and work under the slideshow itself?

2. When I go to my control panel, it keeps telling me that I don't have any popular photos. I do too! I've hit a few myself, but for some reason, it doesn't register them or something. Even when I go back to those photos, only the green thumbs up shows. Is there something that I've disabled to keep the pop photos from showing? Or am I supposed to create a separate gallery for them?

as always, thanks:help

[Mog]

1. I now have a slideshow on my homepage - nice, love it. But I would really like to have buttons below it. I have looked at the slideshow threads and I see that I need to copy the buttons from another site and then ... paste them to a new gallery on my site? How do I do that? And then, how do I get them to show and work under the slideshow itself?



Hope this helps.

I created a hidden gallery and placed my 4 control image files in that Gallery ( Play / Pause / Previous / Next )

I then have the following code in my CSS, note the 4 sections indicating the URL for each control image.

/* SLIDESHOW CONTROLS */
#ssControl {
padding-top: 5px;
margin-bottom: -15px;
text-align: center;
}
.ssBtn {
outline: none;
}
.ssBtn img {
height: 20px;
width: 25px;
}
#ssPlay {
display: none;
}
#ssPrev img {
background-image: url(http://Mog.smugmug.com/photos/132236100-L.png);
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=scale, src='http://Mog.smugmug.com/photos/132236100-L.png');
}
#ssPlay img {
background-image: url(http://Mog.smugmug.com/photos/132236098-L.png);
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=scale, src='http://Mog.smugmug.com/photos/132236098-L.png');
}
#ssPause img {
background-image: url(http://Mog.smugmug.com/photos/132236095-L.png);
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=scale,
src='http://Mog.smugmug.com/photos/132236095-L.png');
}
#ssNext img {
background-image: url(http://Mog.smugmug.com/photos/132236093-L.png);
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=scale, src='http://Mog.smugmug.com/photos/132236093-L.png');
}
body {
font-size: 12px !important;
font-family: arial, verdana, tahoma, helvetica, sans-serif !important;
font-style: normal !important;
}

Feel free to grab the image files from these links, save to your Hard Drive and then upload to your smugmug site.

http://Mog.smugmug.com/photos/132236100-L.png
http://Mog.smugmug.com/photos/132236098-L.png
http://Mog.smugmug.com/photos/132236095-L.png
http://Mog.smugmug.com/photos/132236093-L.png

Hope that makes some sort of sense...

[rubarb3]

Thanks for the detail and simplicity of your response.
Alrighty, so I (1) save the four images on my hard drive - check
(2) uploaded them onto my smug site in a separate, private gallery - check
(3) copied and pasted the code that you gave to me into my CSS box under customization - check
-nada-
So I think, well sure, I need to change Mog to eastlightphoto in every place that I see it...
-nada-
Then I just try to type http....eastlight... and the photo# in the address box on the internet and it automatically changes the eastlight part to Mog -:huh
Also, when I look in my gallery with the buttons, and open each button as though it were a photo, the url at the top of the screen is completely different. For instance, the previous button is now http://eastlightphoto.smugmug.com/gallery/3320982#185303379-L-LB
Man, I know I'm close. Any ideas?
thanks!

[Allen]

Thanks for the detail and simplicity of your response.
Alrighty, so I (1) save the four images on my hard drive - check
(2) uploaded them onto my smug site in a separate, private gallery - check
(3) copied and pasted the code that you gave to me into my CSS box under customization - check
-nada-
So I think, well sure, I need to change Mog to eastlightphoto in every place that I see it...
-nada-
Then I just try to type http....eastlight... and the photo# in the address box on the internet and it automatically changes the eastlight part to Mog -:huh
Also, when I look in my gallery with the buttons, and open each button as though it were a photo, the url at the top of the screen is completely different. For instance, the previous button is now http://eastlightphoto.smugmug.com/gallery/3320982#185303379-L-LB
Man, I know I'm close. Any ideas?
thanks! The buttons will not work from a passworded gallery, can
be private though.

Here is the direct link to that button/photo that's used in the CSS.
http://eastlightphoto.smugmug.com/photos/185303379-O.png

I just took the photo number below and inserted in the above.
http://eastlightphoto.smugmug.com/gallery/3320982#185303379-L-LB

You can click the share button it get the link also.

[rubarb3]

OK, that helps. I changed the part of the code in the CSS box (2 entries for each button) and still nada
boo hoo... anything else I'm missing?

[Allen]

OK, that helps. I changed the part of the code in the CSS box (2 entries for each button) and still nada
boo hoo... anything else I'm missing?
Ya need to turn them on. :D In your slideshow footer code
add the bold line.

/* optional slideshow variables */
slideControls = true;

Also make them all -O.png not -L.png
Only the originals are png. All other sizes are Smugmug generated jpg's
when uploaded.

Edit:
Add bold to keep buttons from repeating.

.ssBtn img {
background-repeat:no-repeat;
height: 40px;
width: 50px;
}


Add this to your CSS to keep your homepage from bouncing around.
#ssSlide {height: 400px;}

[rubarb3]

HOLY COW! It DOES work! Now stop laughing at me for a second and give me one last morsel before I call it quits for the night. Why is it that the controls are cut off a bit? You can't see the entire image, like something is in the way...?

[Allen]

HOLY COW! It DOES work! Now stop laughing at me for a second and give me one last morsel before I call it quits for the night. Why is it that the controls are cut off a bit? You can't see the entire image, like something is in the way...?
See my last edit in last post. Snuck it in on ya.:D

[Allen]

Add this to your CSS to hide the not needed page nav's on your about gallery

.gallery_3294095 #albumNav_top,
.gallery_3294095 #albumNav_bottom {display: none;}

[rubarb3]

No bouncy homepage - niiiice, thanks, who knew
Background repeat no repeat thingy - OK, I'm sure that's helpful. Buttons repeating doesn't sound good (But hey, did you notice that I changed the size Myself? Ha!)
The O-png vs L-png issue - but I did that already! Do you mean that it should be O-jpg? And is that supposed to get rid of the partial display of the buttons? They're still cut off a bit.
Lastly, should this code
.gallery_3294095 #albumNav_top,
.gallery_3294095 #albumNav_bottom {display: none;}
get rid of the eastlightphoto>Other>About Me line or something? I don't see what it's changing.
One more thing - how do I get rid of the "slideshow" option at the top of the about me page?
Sigh, thanks SO MUCH.

[Allen]

No bouncy homepage - niiiice, thanks, who knew
Background repeat no repeat thingy - OK, I'm sure that's helpful. Buttons repeating doesn't sound good (But hey, did you notice that I changed the size Myself? Ha!)
The O-png vs L-png issue - but I did that already! Do you mean that it should be O-jpg? And is that supposed to get rid of the partial display of the buttons? They're still cut off a bit.
Lastly, should this code
.gallery_3294095 #albumNav_top,
.gallery_3294095 #albumNav_bottom {display: none;}
get rid of the eastlightphoto>Other>About Me line or something? I don't see what it's changing.
One more thing - how do I get rid of the "slideshow" option at the top of the about me page?
Sigh, thanks SO MUCH. Should be -O.png, the -L is a jpg generated by Smug. You have them in
correctly. And they look ok in Firefox. I see IE6 now and they are cut off
because you increased their size. Use the actual size 25px × 20px and I
think they should be ok.


That CSS removes the "gallery pages: 1 " on the top and bottom.

To remove "eastlightphoto>Other>About Me" line and the slideshow button,
both are part of the breadcrumb, add bold to your CSS. Or just replace that with this and it'll also do your guestbook.

.gallery_3294095 #breadcrumb,
.gallery_3294095 #albumNav_top,
.gallery_3294095 #albumNav_bottom ,
.gallery_3287947 #breadcrumb,
.gallery_3287947 #albumNav_top,
.gallery_3287947 #albumNav_bottom
{display: none;}

If you want some space below your navbar add the bold.

#navcontainer ul {
margin: 0;
margin-bottom: 10px;
padding: 0;
list-style-type: none;
text-align: center;
}

[rubarb3]

[quote=Allen]I see IE6 now and they are cut off
because you increased their size. Use the actual size 25px × 20px and I
think they should be ok.


Beautiful, thanks. It's looking better and better.

The only thing that didn't work was the button cut-off thing. I changed the size back to the original and they're still cut off. Does it also need a bit of a margin below or something? I remember they were like that when I first put them in and I thought I might get rid of the problem by making them larger. Course that didn't work. At the current size, you don't really know what those little slash marks are below the slideshow.

[Allen]

[quote=Allen]I see IE6 now and they are cut off
because you increased their size. Use the actual size 25px × 20px and I
think they should be ok.


Beautiful, thanks. It's looking better and better.

The only thing that didn't work was the button cut-off thing. I changed the size back to the original and they're still cut off. Does it also need a bit of a margin below or something? I remember they were like that when I first put them in and I thought I might get rid of the problem by making them larger. Course that didn't work. At the current size, you don't really know what those little slash marks are below the slideshow.
It might be the margin-bottom that's causing it to clip in IE.

change this
/* SLIDESHOW CONTROLS */
#ssControl {
padding-top: 5px;
margin-bottom: -15px;
text-align: center;
}

to this
/* SLIDESHOW CONTROLS */
#ssControl {
padding-top: 5px;
margin-bottom: 15px;
text-align: center;
}

[iSYTE]

I followed the links to add controls on my HP slide show but am experiencing problems with the controls not showing and code appearing on my page. Direction is appreciated.:scratch

[Allen]

I followed the links to add controls on my HP slide show but am experiencing problems with the controls not showing and code appearing on my page. Direction is appreciated.:scratch
In your footer move these.

/* SLIDESHOW VARIABLES */

slideControls = true;


To here inside the show code.
slideshowUrl = "http://www.isyteimages.com/gallery/3283001";
/* SLIDESHOW VARIABLES */
slideControls = true;
/* see properties section */

[rubarb3]

Did it!! You are so totally the man.
Thanks for your persistence :clap

[Allen]

I followed the links to add controls on my HP slide show but am experiencing problems with the controls not showing and code appearing on my page. Direction is appreciated.:scratch
Looks like you got the buttons to show.

Add the dash in no repeat.

.ssBtn img {
background-repeat:no-repeat;
height: 20px;
width: 25px;
}

[iSYTE]

Made some changes and have run into some other problems. I added the "no repeat" code but the images appear to repeat. Also, I need to know where to locate the original files vs. the "L" files. I might be incorrect but I thought the png file had a transparent background thus blending with whatever bg color one chooses. I realize I need correct the padding for the text below the ss box and controls.

[Allen]

Made some changes and have run into some other problems. I added the "no repeat" code but the images appear to repeat. Also, I need to know where to locate the original files vs. the "L" files. I might be incorrect but I thought the png file had a transparent background thus blending with whatever bg color one chooses. I realize I need correct the padding for the text below the ss box and controls.
See my last post about repeat.

If you upload a png the original remains a png. All the sizes for viewing are
generated jpg's. Just change -L.jpg to -O.png and the png will link.

[iSYTE]

Enough web work for today. I changed all the hiccups and removed the ss controls until I can find files with black background to mesh with bg. Thanks for the help Allen; I always appreciate your patients and quick responses.

[Mog]

Enough web work for today. I changed all the hiccups and removed the ss controls until I can find files with black background to mesh with bg. Thanks for the help Allen; I always appreciate your patients and quick responses.

The SS images I posted previously have a transparent background, I've got them running on my black home page..

[photoshopsusieq]

Ok, so I got buttons AND they work! <woman doing a happy dance!> BUT.... they're out of order! <woman pulling her hair out!> Any suggestions? TIA

Photos By Hobbs (http://www.photosbyhobbs.com)

[Allen]

Ok, so I got buttons AND they work! <woman doing a happy dance!> BUT.... they're out of order! <woman pulling her hair out!> Any suggestions? TIA

Photos By Hobbs (http://www.photosbyhobbs.com)
In your javascript replace this. ............................... carefully :D

if (slideControls) {
slideshowContainer.innerHTML += '<div id="ssControl"><a title="Previous Slide" id="ssPrev" class="ssBtn" href="javascript: void(0);" onclick="prevSlide();"><img src="/img/spacer.gif" border="0" /></a><a title="Pause Slideshow" id="ssPause" class="ssBtn" href="javascript: void(0);" onclick="pauseSlideshow();"><img src="/img/spacer.gif" border="0" /></a><a title="Resume Slideshow" id="ssPlay" class="ssBtn" href="javascript: void(0);" onclick="resumeSlideshow();"><img src="/img/spacer.gif" border="0" /></a><a title="Next Slide" id="ssNext" class="ssBtn" href="javascript: void(0);" onclick="nextSlide();"><img src="/img/spacer.gif" border="0" /></a></div>';

[photoshopsusieq]

Works great now. Thank you! Thank you!