Why settle for the boring same old, same old?

http://www.moonriverphotography.com/Now%20Showing

You can pimp the photo that shows, and you can pimp the lock.

Here's how:

.locked {
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://www.smugmug.com/photos/XXXXXX-O.png');
background-image: none;
}

.locked[class] {
background-image: url(http://www.smugmug.com/photos/XXXXXX-O.png);
height: 14px;
width: 14px;
}

.passwordalbum_ti {
	background: transparent url(
http://www.smugmug.com/photos/XXXXXX-O.jpg) no-repeat;
	width: 100px;
	height: 100px;
}

You can also pimp the empty gallery and empty category thumbs in the same way, if you wish. These are my images, the key and the photo, you'll need to make your own

Ok, I have been trying, but i just cant get it, something is just not working, i went throught andys code and used firefox, still not working,
here is what i have for my css
my site is www.tmosleyphotography.smugmug.com

#scrollbox {width:750px; height:80px;}
a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; margin:3px; float:left;}
a.slidea {background:url(http://tmosleyphotography.smugmug.com/photos/67843469-M.jpg);}
a.slideb {background:url(http://tmosleyphotography.smugmug.com/photos/67843484-M.jpg);}
a.slidec {background:url(http://tmosleyphotography.smugmug.com/photos/67843475-M.jpg);}
a.slided {background:url(http://tmosleyphotography.smugmug.com/photos/67843494-M.jpg);}
a.slidee {background:url(http://tmosleyphotography.smugmug.com/photos/67972387-M.jpg);}
a.slidef {background:url(http://tmosleyphotography.smugmug.com/photos/67972397-M.jpg);}
a.slideg {background:url(http://tmosleyphotography.smugmug.com/photos/67972405-M.jpg);}
a.slideh {background:url(http://tmosleyphotography.smugmug.com/photos/67972417-M.jpg);}
a.slidei {background:url(http://tmosleyphotography.smugmug.com/photos/67972425-M.jpg);}
a.slidej {background:url(http://tmosleyphotography.smugmug.com/photos/69977061-M.jpg);}


a.gallery span {display:block; position:absolute; left:150px; top:-1px; width:1px; height:1px; overflow:hidden; background:#efedec; z-index:100;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}

a.gallery:hover span {display:block; position:absolute; width:402px; height:290px; top:39px; left:170px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:100;}
a.gallery:active {border:1px solid #eee;}
a.gallery:active span, a.gallery:focus span {display:block; position:absolute; width:402px; height:290px; top:39px; left:170px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:50;}
#thumbs {width:840px; height:60px;}
#pad {height:310px; width:100px;}



and here is what i have for my HTML

<div id="pad"/>

<div class="slidek"/>

<div id="scrollbox">
<div id="thumbs">
<a class="gallery slidea" href="#nogo" title=""><span><img src="http://tmosleyphotography.smugmug.com/photos/67843469-M.jpg"</a>
<a class="gallery slideb" href="#nogo" title=""><span><img src="http://tmosleyphotography.smugmug.com/photos/67843484-M.jpg"</a>
<a class="gallery slidec" href="#nogo" title=""><span><img src="http://tmosleyphotography.smugmug.com/photos/67843475-M.jpg"</a>
<a class="gallery slided" href="#nogo" title=""><span><img src="http://tmosleyphotography.smugmug.com/photos/67843494-M.jpg"</a>
<a class="gallery slidee" href="#nogo" title=""><span><img src="http://tmosleyphotography.smugmug.com/photos/67972387-M.jpg"</a>
<a class="gallery slidef" href="#nogo" title=""><span><img src="http://tmosleyphotography.smugmug.com/photos/67972397-M.jpg"</a>
<a class="gallery slideg" href="#nogo" title=""><span><img src="http://tmosleyphotography.smugmug.com/photos/67972405-M.jpg"</a>
<a class="gallery slideh" href="#nogo" title=""><span><img src="http://tmosleyphotography.smugmug.com/photos/67972417-M.jpg"</a>
<a class="gallery slidei" href="#nogo" title=""><span><img src="http://tmosleyphotography.smugmug.com/photos/67972425-M.jpg"</a>
<a class="gallery slidej" href="#nogo" title=""><span><img src="http://tmosleyphotography.smugmug.com/photos/69977061-M.jpg"</a>
</div>
</div>


<div id="ads">
<object width="728" height="90" data="../ads.htm" type="text/html"/>
</div>



can someone please point me in the right direction

Thanks

Originally Posted by Tmosley Ok, I have been trying, but i just cant get it, something is just not working, i went throught andys code

It's Stu Nichols' code

Originally Posted by Tmosley can someone please point me in the right direction Thanks

A gallery link? What, exactly, are you trying to do? We can't tell

Originally Posted by Andy It's Stu Nichols' code A gallery link? What, exactly, are you trying to do? We can't tell

Andy

My mistake,

I am trying to make this gallery http://www.tmosleyphotography.com/gallery/1428327 do the rolover image thing,
I was under the impression you are sapposed to take the code from the site using firefox web dev, and then change the links to your own links, and well its not working as you can see,

Thanks for the quick reply

ok, i got it going here http://tmosleyphotography.smugmug.com/gallery/1428327 now the only issues i have is the pic is too small its only showing a thumnail on rollover and it covers up my header,

im playing with firefox but not finding the thing i need to chage,

can omeone help me, i want to make the picture bigger when you hover over it, center it and move it down as to not cover my header.

thanks

Originally Posted by Tmosley ok, i got it going here http://tmosleyphotography.smugmug.com/gallery/1428327 now the only issues i have is the pic is too small its only showing a thumnail on rollover and it covers up my header, im playing with firefox but not finding the thing i need to chage, can omeone help me, i want to make the picture bigger when you hover over it, center it and move it down as to not cover my header. thanks

on hover, you are calling the same image - you'll need to call a larger size image on hover ...

Originally Posted by Andy on hover, you are calling the same image - you'll need to call a larger size image on hover ...

Andy, great thanks

this is what i did, i changed the photos ending with Ti to M now they are perfect size
then i changed the background clor to transparent which helps,
but i still need to bring it down, and firefox is not helping me right know, i am changing the values of stuff and nothing is hapening,

thanks

Originally Posted by Tmosley Andy, great thanks this is what i did, i changed the photos ending with Ti to M now they are perfect size then i changed the background clor to transparent which helps, but i still need to bring it down, and firefox is not helping me right know, i am changing the values of stuff and nothing is hapening, thanks

and know it doesnt work in FF

Originally Posted by Tmosley Andy, great thanks this is what i did, i changed the photos ending with Ti to M now they are perfect size then i changed the background clor to transparent which helps, but i still need to bring it down, and firefox is not helping me right know, i am changing the values of stuff and nothing is hapening, thanks

I know it sounds h arsh, but I simply don't have the hour or more it will take to debug this. This is REALLY ADVANCED CSS and we can only support it on an as available basis - it's really just a lot of trial and error in FF Web Dev. It looks like you are making progress! The portrait images will mess you up, so be careful about that.

That said, keep at it and if you ping this thread on Thursday maybe I or one of the other guys will have time...

I wish I had a better answer for you, I really do.

Troy, I'm confused by some of your html. You obviously got what you're using from Andy who got it from Stu Williams but your html is a bit different. I've highlighted the odd parts in red. Can you enlighten me on why you used them so maybe I can understand what you're trying to do a bit better?

<div align="center">
<div id="pad"></div></div>
<br>
<br>
<br>
<div id="scrollbox">
<div id="thumbs">
<a class="gallery slidea" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67843469-M.jpg"
alt="Troy"/></span></a>
<a class="gallery slideb" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67843475-M.jpg"
alt="Troy"/></span></a>
<a class="gallery slidec" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67843484-M.jpg"
alt="Troy"/></span></a>
<a class="gallery slided" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67843494-M.jpg"
alt="Troy"/></span></a>
<a class="gallery slidee" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67972387-M.jpg"
alt="Troy"/></span></a>
<a class="gallery slidef" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67972397-M.jpg"
alt="Troy"/></span></a>
<a class="gallery slideg" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67972405-M.jpg"
alt="Troy"/></span></a>
<a class="gallery slideh" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67972417-M.jpg"
alt="Troy"/></span></a>
<a class="gallery slidej" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67972425-M.jpg"
alt="Troy"/></span></a>
<a class="gallery slidej" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/69977061-M.jpg"
alt="Troy"/></span></a>
</div>
</div>						</div>

Originally Posted by Mike Lane Troy, I'm confused by some of your html. You obviously got what you're using from Andy who got it from Stu Williams but your html is a bit different. I've highlighted the odd parts in red. Can you enlighten me on why you used them so maybe I can understand what you're trying to do a bit better? <div align="center"> <div id="pad"></div></div> <br> <br> <br> <div id="scrollbox"> <div id="thumbs"> <a class="gallery slidea" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67843469-M.jpg" alt="Troy"/></span></a> <a class="gallery slideb" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67843475-M.jpg" alt="Troy"/></span></a> <a class="gallery slidec" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67843484-M.jpg" alt="Troy"/></span></a> <a class="gallery slided" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67843494-M.jpg" alt="Troy"/></span></a> <a class="gallery slidee" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67972387-M.jpg" alt="Troy"/></span></a> <a class="gallery slidef" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67972397-M.jpg" alt="Troy"/></span></a> <a class="gallery slideg" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67972405-M.jpg" alt="Troy"/></span></a> <a class="gallery slideh" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67972417-M.jpg" alt="Troy"/></span></a> <a class="gallery slidej" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/67972425-M.jpg" alt="Troy"/></span></a> <a class="gallery slidej" href="#nogo"><span><img src="http://tmosleyphotography.smugmug.com/photos/69977061-M.jpg" alt="Troy"/></span></a> </div> </div> </div>

I really dont know where i got that code from, i just cut and past mostly, i have read your turorials on css and html, i got a little idea as to what im doing but not really,

Andy,
Dont worry about it, i thought maybe it was a quick fix, maybe a number i had was too big, or something, eventually i will figure it out sometime down the line,

for know ill just save the code in notepad and go back to normal for that gallery.

Thanks
Troy

I have been tweaking around with getting a gallery to show an image after scrolling over an icon of the image.
I used the CSS and HTML that Andy had given me a while back, but still could not get it all "right," so I wanted to try a different one.
I tried to find where Andy got his original coding from, CSS PLAY, and to my surprise I cannot find the CSS Code any where, and when I am looking for the code with firefox, I don't know what to look for.

Can anyone lead me to find the CSS code that displays these icons/rollover pictures http://www.cssplay.co.uk/menu/scroll_gallery.html taught here, or supported by Andy on a couple of his pages?
Or maybe I could just be told what to look for when I am looking for the codes.
Thanks

I may have missed them but a few of my links are for friends and I am sure I can get them to provide an image for me to display as their link as long as that put a littl eborder with photo by: or Photo courtesy of:

NOw about sites like this Dgrin. What image do I use or is a screen grab ok?

Originally Posted by rex I may have missed them but a few of my links are for friends and I am sure I can get them to provide an image for me to display as their link as long as that put a littl eborder with photo by: or Photo courtesy of: NOw about sites like this Dgrin. What image do I use or is a screen grab ok?

i should hink useing a small grab from the front page would be ok?

Originally Posted by Andy i should hink useing...

Wow, someone needs to get a bit more rest.

Originally Posted by SamirD Wow, someone needs to get a bit more rest.

OK

"think using" yeah, that too

Originally Posted by DavidTO Here you go.

that is so sweet!!!!

Originally Posted by Andy So, you put the photodex linkage code in your gallery description of a gallery - no photo in the gallery needed btw. use this to suppress the "no photos" message: .gallery_XXXXXX .nophotos {display: none;} and this code goes in the description or caption <html> ******** language="javascript" src="http://www.photodex.com/presenter.js"></******** ********> PhotodexObject("ProShow","objectname","showname.px",640,480); PresenterControls("objectname",640); </******** </html> It works - Windows only I believe. BTW, this would be cool with say, a few, 3 or 4, on a journal style gallery. Put the code for each, in the captions. DON'T forget the <html> and </html>

I am not that savvy about all of this, but this is what I have to work with:
Gary's Album Showcase software creates a folder for me with these folders and files in it for the slideshow I created:

images (folder)
tn (thumbnail folder)
albumshowcase.swf
albumshowcase.xml
index.html
music.mp3

I see the example above, but can't figure out where to "point" my src line link to...

Any ideas? I am desperate and appreciate any and all help. Thanks so much!

Originally Posted by dianabphotography I am not that savvy about all of this, but this is what I have to work with: Gary's Album Showcase software creates a folder for me with these folders and files in it for the slideshow I created: images (folder) tn (thumbnail folder) albumshowcase.swf albumshowcase.xml index.html music.mp3 I see the example above, but can't figure out where to "point" my src line link to... Any ideas? I am desperate and appreciate any and all help. Thanks so much!

Hi,

All of those files have to be hosted somewhere on the next (not SmugMug). Once you have them hosted, they can probably be played via your SmugMug site.

OK?

Originally Posted by Andy Yeah, pimp it! You can force a viewing view style in your Popular Gallery. So, the linkage is this: nickname.smugmug.com/popular yourcustomhostname.com/popular OK Fine. But how about forcing a starting style? Sure - why not? I want you to start in traditional view, maybe... it's all explained here: http://www.dgrin.com/showpost.php?p=117058&postcount=3 The actual link is huge: http://www.moonriverphotography.com/homepage/templatechange. mg?TemplateID=4&origin=http://www.moonriverphotography.c om/popular

Okay, it appears this is geared towards a customized homepage where you have created your our nav to other pages/galleries. Is there any way to change the popular photos url in the standard smugmug generated homepage in order to force a style?