My thumbnail rollover next/prev buttons
mrwilly123
Joined: 2005-07-23
Posts: 57 |
![]() |
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: |
|
nivekiam
![]()
Joined: 2002-12-10
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!!! |
|
mrwilly123
Joined: 2005-07-23
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] |
|
nivekiam
![]()
Joined: 2002-12-10
Posts: 16504 |
![]() |
I just tried this, |
|
mrwilly123
Joined: 2005-07-23
Posts: 57 |
![]() |
Try putting an anchor tag in: 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? |
|
RwD
![]()
Joined: 2005-01-09
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: 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. |
|
nivekiam
![]()
Joined: 2002-12-10
Posts: 16504 |
![]() |
mrwilly123 wrote:
Try putting an anchor tag in: 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? |
|
mrwilly123
Joined: 2005-07-23
Posts: 57 |
![]() |
RwD wrote:
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 } 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] |
|
mrwilly123
Joined: 2005-07-23
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] |
|
djdashi
Joined: 2005-09-27
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. |
|
mrwilly123
Joined: 2005-07-23
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? |
|
djdashi
Joined: 2005-09-27
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? |
|
mrwilly123
Joined: 2005-07-23
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. |
|
djdashi
Joined: 2005-09-27
Posts: 5 |
![]() |
I cannot show you an url because i am testing it localy but i am using siriux template There no more a Missing Entity error. And at the prev/next links is shown the thumbnail. Thank You for helping. |
|
mrwilly123
Joined: 2005-07-23
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] |
|
djdashi
Joined: 2005-09-27
Posts: 5 |
![]() |
Seeing the default siriux template it would be better. Thank You |
|
mrwilly123
Joined: 2005-07-23
Posts: 57 |
![]() |
I'm not sure what you're asking. In the default photo.tpl, you would replace with the HTML I posted above. [img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426] |
|
pnear
Joined: 2003-08-12
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 |
|
nivekiam
![]()
Joined: 2002-12-10
Posts: 16504 |
![]() |
Perhaps try incorporating it with one of the other floating image solutions as several have been posted now: http://codex.gallery2.org/index.php/Gallery2:UserContributions |
|
mrwilly123
Joined: 2005-07-23
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] |
|
RwD
![]()
Joined: 2005-01-09
Posts: 383 |
![]() |
For whoever wants to change it: |
|
mrwilly123
Joined: 2005-07-23
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] |
|
mrwilly123
Joined: 2005-07-23
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] |
|
RwD
![]()
Joined: 2005-01-09
Posts: 383 |
![]() |
mrwilly123, 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? |
|
mrwilly123
Joined: 2005-07-23
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] |
|
RwD
![]()
Joined: 2005-01-09
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?" |
|
mrwilly123
Joined: 2005-07-23
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] |
|
RwD
![]()
Joined: 2005-01-09
Posts: 383 |
![]() |
Euhm, yes, but I develop sites for a living and make them both firefox and internet explorer compatible. 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) |
|
mrwilly123
Joined: 2005-07-23
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] |
|
joe7rocks
![]()
Joined: 2004-10-07
Posts: 560 |
![]() |
so guys.. nice discussion but we wanna profit of it! :P |
|
RwD
![]()
Joined: 2005-01-09
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... |
|
joe7rocks
![]()
Joined: 2004-10-07
Posts: 560 |
![]() |
well the thumbs simply does not show up in IE, the problem is not the pngstuff :O |
|
RwD
![]()
Joined: 2005-01-09
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] Did I mention it is IE and FF compatible? |
|
jmullan
![]()
Joined: 2002-07-28
Posts: 974 |
![]() |
I fixed the original post. |
|
wlanni
Joined: 2006-01-23
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. |
|
mrwilly123
Joined: 2005-07-23
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] |
|
wlanni
Joined: 2006-01-23
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: |
|
dporgie
Joined: 2006-01-24
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? |
|
mrwilly123
Joined: 2005-07-23
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! <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] |
|
dporgie
Joined: 2006-01-24
Posts: 5 |
![]() |
sweeeeeeeeeeeeeeeeeeeeeet works fantabulously thanks for the help |
|
mrwilly123
Joined: 2005-07-23
Posts: 57 |
![]() |
No problem, I love feeling useful. [img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426] |
|
floridave
![]()
Joined: 2003-12-22
Posts: 27300 |
![]() |
wlanni wrote:
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. wlanni, Cheers, Dave |
|
nicokaiser
Joined: 2004-10-04
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. |
|
mrwilly123
Joined: 2005-07-23
Posts: 57 |
![]() |
That's exciting, thanks! Hope it makes it in! [img:1c25401426]http://www.eggdropper.com/img/ED_ad.png[/img:1c25401426] |
|