My thumbnail rollover next/prev buttons
|
mrwilly123
Joined: 2005-07-23
Posts: 57 |
Posted: Sun, 2005-09-11 17:59
|
|
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: Here are what my two frames looked like: |
|
Posts: 16504
Very nice! Yes, please post the code. Then I'll create a link from the User Contribs. Then perhaps someone can take the code and try to make it work with IE.
Again, very nice!!!
Posts: 57
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]
Posts: 16504
I just tried this,
http://gallery.menalto.com/and it didn't create a link and I used BBCode [ code ] ,,, [ /code ] tags.Posts: 57
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]
Posts: 383
If you use the hover property for the anchor element I can see the prev/next buttons working in both IE and FF. Something like a:hover div { some opacity thing, or your solution }
Slightly offtopic:
W3 never actually mentions which elements can have the hover state. So in only specifying it for anchors IE is not wrong...
I took a look at your site, and your statement about IE is in error.
It is not because IE sucks that your theme doesn't fully support it. There is nothing on the page that cannot be done in IE as well. And nothing that won't work on both IE and FF.
Consider that most people will think your site sucks because it doesn't look very good in their browser which does display all the other websites they visit correctly.
Posts: 16504
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?
Posts: 57
I know...it's just that IE is so much more difficult to get working right, especially with the mess of PNGs that is my site. I am really doing this more as a fun personal project than a website I want the world to be able to see.
Maybe later I will work on IE-compatibility, but for now I'm too busy, and it's not a very fun thing to work on.
Will post code soon, btw.
[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]
Posts: 57
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]
Posts: 5
Hi i got this error while trying to add this great feauture
"Render Error: Mising Entity"
Where should i put the images ? ( i mean previous_combo.png and the next_combo.png)?
Please help me because I am not getting on it.
Posts: 57
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]
Posts: 5
Hi, thanks for the reply
I added the navThumbnails and it loaded teh prev next thumbnail but the thing still doesnt work. Can you help me please?
Posts: 57
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]
Posts: 5
I cannot show you an url because i am testing it localy but i am using siriux template
Can you take a look at its photo.tpl template?
There no more a Missing Entity error. And at the prev/next links is shown the thumbnail.
Thank You for helping.
Posts: 57
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]
Posts: 5
Seeing the default siriux template it would be better.
Because i have made some changes and you have to install the modules that it work.
If you give me the code for the default siriux template, you'll help me a lot
Thank You
Posts: 57
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]
Posts: 18
So, has anyone had an opportunity to port this to IE yet? I love the mod but most of my site visitors are using IE. I'd do it myself, but not sure how.
Cheers
Pete
Posts: 16504
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
Posts: 57
The code that I posted is actually based on that mod...what I did differently is (and I think the reason it doesn't work in IE) instead of having the image be 10,000 pixels to the left, and have it move back into place on :hover, as in that mod, I made the image display: none, and become display: block on :hover. It shouldn't be very difficult to port to IE.
[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]
Posts: 383
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
Posts: 57
In the CSS, :hover is used here:
.prevhalf:hover img, .nexthalf:hover img { display: block; }the classes "prevhalf" and "nexthalf" apply to "a" elements! Do you think that it would work if I referred to them in the CSS as "a.prevhalf:hover img, a.nexthalf:hover img"?
Also, when I was looking back at the code I noticed some blatant and embarassing typos. They're fixed.
[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]
Posts: 57
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]
Posts: 383
mrwilly123,
If you try it you find out if it works or not, quite honestly I do not know it without trying myself. Good idea is to make a simple one time html page+css to try out if the principle itself should workl to be sure not some other style setting is messing stuff up...
Statistics can be very weird beings. They change from person to person and are strongly dependent on the reference group. Your site may be much more likely to be visited by FF users then by IE users. I would say that the Firefox extentions page from mozilla gets a lot of FF hits instead of IE to, where microsoft update might have completely different statistics. How weird is that...
Airplanes are (by far) the safest mode of transportation according to the companies depending on public air traffic. They are measuring this by miles traveled divided by the number of accidents. But airplanes go a lot faster and make a lot more miles per trip. So when you would divide the number of trips divided by the number of accidents the airplane isn't that much safer any longer (if it is any safer at all). How weird is that?
______________________
I made a theme for G2, try it
Posts: 57
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]
Posts: 383
Nope, it doesn't work, unless you didn't change iton your site yet.
could you perhaps like remove the "because it sucks" part and change it into "because I am not willing to make it work in IE?"
______________________
I made a theme for G2, try it
Posts: 57
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]
Posts: 383
Euhm, yes, but I develop sites for a living and make them both firefox and internet explorer compatible.
IE has never misbehaved when I was browsing it. I don't install random plugins or just click yes without reading. IE just as secure as firefox or FF is just as secure as IE. In the last few months more bugs and problems where found in FF then in IE, which is good because IE has been around a lot longer. But then again, FF is based on older technologies itself...
I hope IE7 will make IE become up-to-date again. Because IE doesn't suck, it just has some issues that were never solved...
ps, IE is slower then FF?? I can't really say that FF loads webpages faster then IE (it doesn't)
______________________
I made a theme for G2, try it
Posts: 57
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]
Posts: 560
so guys..
HOW to make it IE COMPATIBLE? ;)
nice discussion but we wanna profit of it! :P
(good work anyway
Posts: 383
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
Posts: 560
well the thumbs simply does not show up in IE, the problem is not the pngstuff :O
Posts: 383
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
Posts: 974
I fixed the original post.
Posts: 6
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.
Posts: 57
That CSS is quite a piece of work...nice job! I'd love to see how it works out for others.
[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]
Posts: 6
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.
Posts: 5
First of all, nice job with this feature.
I have attempted to integrate this into my site with some success: http://www.dwpoore.com/gallery
On your Eggdropper site I noticed you also made a change to the Siriux album view to create a mouseover info box (looks like it's called "willys_actual_tooltip")
Would it be possible to share that code as well?
Posts: 57
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]
Posts: 5
sweeeeeeeeeeeeeeeeeeeeeet
works fantabulously
thanks for the help
Posts: 57
No problem, I love feeling useful.
[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]
Posts: 27300
wlanni,
Did you ever get this to work properly in IE? Even non-multi-site.
If you have then can you update your post.
Cheers,
Dave
Posts: 118
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.
Posts: 57
That's exciting, thanks! Hope it makes it in!
[img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426]