My thumbnail rollover next/prev buttons

Hi guys, I just finished my project to make thumbnail rollover next/prev buttons. You can see it here: http://www.eggdropper.com/gallery2/v/rockcreek/DSC02815.JPG.html or at any photo page on my site.

No Javascript, and it is not IE-friendly, or at least my implementation of it is not.

The HTML http://www.eggdropper.com/picdrop/thumbrollovers_html.txt goes in photo.tpl, where the main image usually goes.

The CSS http://www.eggdropper.com/picdrop/thumbrollovers_css.txt goes in your style sheet, duh.

Two things:
I took out the positioning CSS values, because they're not very interesting and will be different for your site, obviously.
Also, I don't know why, and I know it's ugly, but in-line styling seemed to be the only way I could get my frames to move around and change opacity.

Here are what my two frames looked like:
[img]http://www.eggdropper.com/img/previous_combo.png[/img]
[img]http://www.eggdropper.com/img/next_combo.png[/img]

I want to and am ready to post my code, but even if I put my source in a < code > or a [ code ] tag, it turns my links into actual links.

[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

Try putting an anchor tag in:
<a href="gallery.menalto.com/">Gallery</a>

The links in my code are....fairly important if you actually want the buttons to work.

Should I just put a space before the a?
[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

Try going back to your original post and clicking on the edit link. Then attaching the files as text files. Also, what are the different formatting options you have available to you below these reply buttons?

Ok, I added the code to my original post. I was getting errors when attaching the txt files, so I just put them on my server. If the HTML looks rendered (like it is not plain text), just view the source.

[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

If you are using Siriux, you have to add 'navThumbnails' to the array in ShowPhotoPage in themes/sirux/theme.inc.

Otherwise, it won't load the navthumbs.

Does that work?
[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

You should put the image frames in the 2 <a> tags. In the HTML I posted, they are referred to as next_image_frame.png and prev_image_frame.png...sorry about the inconsistency.

Do you still get a Missing Entity error?

Please show me your site so I can see your code and try to help.
[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

You want me to take a look at your template? Yeah, I can do that. PM it to me if you want.

Or are you saying I should take a look at the default siriux template? What do you mean?

[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

I'm not sure what you're asking. In the default photo.tpl, you would replace
{g->image item=$theme.item image=$image fallback=$smarty.capture.fallback usemap=#prevnext}

with the HTML I posted above.

[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

Perhaps try incorporating it with one of the other floating image solutions as several have been posted now:
http://gallery.menalto.com/node/35744

http://codex.gallery2.org/index.php/Gallery2:UserContributions
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

For whoever wants to change it:
:hover is only supported for "a" elements in IE. (and like I said before this is not a mistake or bug from IE)
______________________
I made a theme for G2, try it

Oh, and by the way, I get 7 times as many hits from Mozilla (Firefox) users as IE users. how weird is that?

[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

Alright, doing the above change like I posted before (changing .prevhalf:hover to a.prevhalf:hover) does not break compatibility with Mozilla/Safari. And maybe it will allow this mod to work in IE? I don't know though, because the rest of my gallery does not work with IE.

[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

Nah, IE DOES suck! Is there a less secure, slower, less powerful browser you can get?

My site is pretty much standards-compliant except for a small handful of harmless issues, and IE destroys it (this is partly because of the PNGs, though).

Do you use IE as your primary browser?

[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

Do you know when IE7 is supposed to come out? I haven't been following it very closely. If it handles PNGs correctly, then I might actually make a jab at getting my site to work.

[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

If you don't have the png's named in your css file you van for now at a very simple javascript to your site as a temporary solution for IE6. You can find it in my theme...
______________________
I made a theme for G2, try it

joe7rocks, I am not going to change the eggdropper theme, mrwilly123 should do that. That's why I made the remark about the png's because it is a reason why he doesn't want to make the theme compatible right now.

[funmode]
[commercial]
In the mean time use my theme instead ;)
It also cleans your house and does the dishes, guaranteed!

Did I mention it is IE and FF compatible?
[/commercial]
[/funmode]
______________________
I made a theme for G2, try it

I've been working on an IE compatible hack. Unfortunately, this isn't going to work too well with people using a multi-site installation, because IE stupidly is not looking for images trully relative to the style sheet. I HATE IE. worst browser ever.

EDIT: If you'd like to see the results, go to http://www.mikelanni.com and check in multiple browsers.

I had to do a lot of edits to a lot of places, and I didn't keep track. If I get some time I'll come back and paste them in, but for now at least you can grab the style sheet and look at the source.

I found a bunch of problems all ready -- specifically win IE stuff. when I finish I'll repost.

issues I can think of off the top of my head:
-- :hover area of divs canceled out by the main image due to absolute positioning. even with z-index set this happened. Fixed by creating a clear gif and setting it to the background of the divs
-- hover over the actual next/previous images doesn't work. -- fixed this by removing absolute positioning of next/previous and setting to relative positioning, but I'm still working on this.

Your implementation of it looks great! Thanks for the link.

Okay, here's the code for the mouseover box. I took out my obnoxious self-referential CSS. And of course, it's still not the most efficient or clean CSS in the world, AT ALL. But it works (in non-IE browsers, of course). Edit as you see fit, please!
In album.tpl, find your "gallery-thumb" div. It's the one inside the "gallery-items" div, not under the "gallery-items" div. Replace it with this:

<div class="gallery-thumb">
	<a class="tooltip_link" href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">
		{if isset($child.thumbnail)}
			{g->image item=$child image=$child.thumbnail class="gcBorder1"}
		{else}
			{g->text text="no thumbnail"}
		{/if}

	 	<div class="actual_tooltip">
	 		<strong>{$child.title}</strong>
	 		{g->block type="core.ItemInfo"
				item=$child
				showName=true
				showDate=true
				showViewCount=true
			}
		</div>
	</a>
</div>

In your CSS, add

a.tooltip_link div.actual_tooltip {
	display: none;
	border: 1px dashed #7bbce6;
	background-color: #e0edef;
	opacity: .75;
	position: absolute;
	top: -38px;
	left: 10px;
	width: 110px;
	text-indent: 0em;
	color: #448;
	z-index: 100;
	text-align: left;
	padding-left: 2px;
	}

.actual_tooltip {
	display: none;
	}

a.tooltip_link {
	position: relative;
	text-decoration: none;
	}

a.tooltip_link:hover div.actual_tooltip {
	display: block;
	}

Let me know if this works out for you.

[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

No problem, I love feeling useful.

[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]

Great, love this effect! Especially the album page info rollovers look nice! I'll have a look at it and try to include it into the upstream siriux theme.