Addon: Hoverbox

[fadattf]

Support- & Helpthread for the "Hoverbox"-Addon:

Download: http://www.pixelpost.org/extend/addons/hoverbox-for-pixelpost/

Demo: http://photoblog.flanisoft.at/index.php?x=browse

[senpai]

Support- & Helpthread for the "Hoverbox"-Addon:

Download: http://www.pixelpost.org/extend/addons/search-addon/

Demo: http://photoblog.flanisoft.at/index.php?x=browse

Ops, I think you got it wrong?

But by the way, I really like it! Thanks!

[fadattf]

Thanks, fixed the link.

[witty]

Hi,

Really diggin' it. Nice addon.


-Witty

[Oettinger]

hm i'm a pixelpost/addons/tag-noob and i don't get it:
Place the tag <HOVERBOX> in your template file where you.

Where you...what? I mean where exactly should i place this tag.
Atm i only have pictures which are 200x150 - and no effects :/


Regards

[fadattf]

It is very simply!

1) Install the Plugin (like all other plugins) & Copy the CSS Files into a subdirectory of your style

2) Open the "browse_template.html" File

2a) Add the two lines into your HEAD Section
<link rel="stylesheet" href='templates/YOURTEMPLATE_NAME/styles/hoverbox.css' type="text/css" media="screen, projection" />
<!--[if IE]>
<link rel="stylesheet" href='templates/YOURTEMPLATE_NAME/styles/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
Replace "YOURTEMPLATE_NAME" with the real name of your template
2b) Replace the "<THUMBNAILS>"-Tag with:
<HOVERBOX>

3) Save your files and your done!


If you have questions to a specific part please let me know.

[BitBox Studio]

I love this addon. saw it on a friend's site...but I can't get it to work.

I don't have a <BROWSE> tag in any of my files. I'm looking in 'browse_template.html'. The only things that are close are:

<SITE_BROWSELINK>

and

<BROWSE_CATEGORIES>

any ideas?

[Oettinger]

Same problem here, so i still dont know where should i place the tag :/


Regards

[fadattf]

Hi there!

You have to replace the
<THUMBNAILS> - Tag with the <HOVERBOX> - Tag. Then should work everything fine.

If you have any further problems, please post (or pm me) the link to your blog and/or upload the browse_template.html file.

[BitBox Studio]

well...at least the hoverbox is working....but it did this with my template:

http://www.bitboxstudio.com/photography/index.php?x=browse

i tried moving the css links around in the header and the only thing it did when it was after all the other css references was center the mess. Any ideas? am i missing something? the ONLY change i made to the original css was the following for the header on the included horizon theme css file:

#header .inside {
background:url(../bitbox_p_logo.gif) top right no-repeat #000;
height:100px;

}

#header .inside h1 a {
float:right;
/*text-align:right;*/
color:#666;
padding-top:30px;
font-weight:normal;
width:300px;
height:60px;
display:block;
text-indent:-9999px;
}

but i don't think that would have anything to do with it. also the sizes of the unhovered boxes are a little weird....might be the same problem....thank you for all your help.

@Oettinger: you might have better luck. let us know how it comes out.

[fadattf]

I've just taken a quick look on your stylesheets!

To re-center your layout please remove the following part from your hoverbox.css file.


body
{
background: #fff;
color: #777;
margin: 0 auto;
padding: 50px;
position: relative;
width: 620px;
}


Note:
Since the Hoverbox-technique is a CSS only technique it comes already with some "defaults" in the hoverbox.css file.
If it doesn't fit perfect with the rest of your css it can be that some modifications are needed.

[BitBox Studio]

NOW we're gettin somewhere! thank you! but there's still 2 and a half more issues (and i'm writing here instead of private messaging you just in case someone else has this problem because horizon is a common theme and your addon is just that damn good)....the first one you probably can help me with easily is to center the thumbnails in their boxes. see how they're left and bottom aligned? the second is that dotted line on the top needs to be taken off and the half problem (not EXTREMELY important but good for nice design) is that the bottom dotted line on the bottom seems too close to the thumbnails. doesn't it? I SINCERELY appreciate all your help.

[fadattf]

So, here is the workaround for the horizon theme.
We have to apply some additional css because the horizon stylesheet has some values effecting the Hoverbox addon.

There are two ways to accomplish this:

Solution A)
Add the following lines to your hoverbox.css file (can be anywhere, but best place would be bevore the "/* =Hoverbox Code"-Line )


#page ul li {
list-style:none;
padding: 5px;
}

#page img {
background:#FFF;
padding: 2px;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
}

.thumbnails {
margin:5px 5px 5px 5px;
}



Be sure put the codeline where the horizon.css file is included before the lines where the hoverfile.css files are included.



Solution B)
Put the CSS direct into your browse_template.html file.
Open the browse_template.html file and put the following code before the "</head>"-Line


<style type="text/css">
#page ul li {
list-style:none;
padding: 5px;
}

#page img {
background:#FFF;
padding: 2px;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
}

.thumbnails {
margin:5px 5px 5px 5px;
}

</style>




P.S.: I'll update the addon and include the fixed css file into the hoverbox-addon zipfile so that no manual fixing is necessary.

[BitBox Studio]

damn you're good.....got the pictures centered.....but those dotted lines are still off...there should be no top dotted line. and possibly the bottom dotted line push down a couple (maybe 10 or 20) pixels. any ideas? I'll try to mess around with the margins of the pics so there's not that big border around each picture.......thanks again! i appreciate it. you rock the block.

[fadattf]

No problem. That's an easy fix. Seems as I've left some default css in the hoverbox.css file causing the dotted lines.

Just open your hoverbox.css file and replace the content with the following css-code.


*
{
border: 0;
margin: 0;
padding: 0;
}

/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}

.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}

PS: I've updated all the css files in the extension repository: http://www.pixelpost.org/extend/addons/hoverbox-for-pixelpost/

[BitBox Studio]

it looks beeeeeautiful....thanks! i just changed the border on each image to the same color as the background instead of them being in those 3d boxes....just a personal choice...thanks a lot for all your help. you're a gem and thanks again for a very important (should be a built in option) addon!

[BitBox Studio]

acutally is there a way i can get rid of those boxes and bring all the pics closer together? center it too? or is that just the way it's setup anyway?

[BitBox Studio]

while you're at it. i have an idea for the peoples. for some unfamiliar viewers of the web they might not make the connection that the hoverboxed image is still a link cause there's no stupid pointing finger thing and just an arrow. what do you think? i don't know....just a thought.

[fadattf]

Hi BitBox Studio!

Thanks for your imput!
All the things you've said are possible. But just because you like it that way not everybody must like it.

Perfect would be if it is customizable via the Admin Tool. Or maybe I'll document the CSS-File so that users can change the values by themself.

For the "hand" as you call it over the links open your hoverbox.css file and replace

.hoverbox a
{
cursor: default;
}



with

.hoverbox a
{
cursor: pointer;
}



To get the pics closer to each other change the 5px value to e.g. 1px or 0 in the following css part.



.thumbnails {
margin:5px 5px 5px 5px;
}

[BitBox Studio]

i completely agree. i don't like the finger pointer either....but the fact is, not many people know about how pixelpost works. what do you think? maybe i should hit up my mom's house and have her look through and see if she figures it out for a text run. haha. i'll let you know....all this code editing is completely worth it for the effect, but yeah...good idea on if you could make more documentation for customization.

ONE last thing. sorry i'm such a needy guy. Is there a way i can center all the thumbnails? they're all aligned to the left.

maybe i should've learned css instead of using your generous help. hehe. thank you SO much for the time you've put in to help me.

[fadattf]

A) What browser do you use?
I see the images centered in FF 2.x and IE 6.x

B) I'll document the css code for the next release (see C)

C) I think I'll make an update this week since I've added a pagination.
Now it is so, that if you have a lot of pics they are all shown on one singe page.
In the new version there will be a pagination (see http://photoblog.flanisoft.at/index.php?x=browse)

[BitBox Studio]

A) i'm using FF 2.0.0.14....see how the bottom dotted line is compared to the pics? pics look left justified.

B) nice.

C) extra nice! ....will taht be an option? cause personally i prefer to be on one page. unless you could set an option for how many on one page.....12 is too little for me on one page but 100 might be too much.....ya know? less clicking but it comes to a certain point where it's too much.

X) thanks again. hoverbox customer service is supreme. haha.

[fadattf]

A) Sorry, that's not possible (at least not so easy) - since the thumbs are "floated" to the left.

C) Yes it is configurable through the admin panel. I've already uploaded it into the repository (v 1.2).

[BitBox Studio]

hehehe.....alphabets are great.

A) i see what you mean....tried centering it...and the last row centers no matter how many....so unless the last row has five it doesn't line up. I was then thinking of putting "fake" boxes in there depending on the final count....but yeah....you're right....not easy. eh....i'll live with it for now....see how it feels.

B) haha...no even sure if i wanna mess around anymore....that'd probably bring you three more pages of questions from me (or is it just the 'hoverbox_browse.php' file that i need to change?). i'll take a look at it.

thanks for everything. a world of help and a GREAT addon.

[mhulett]

hi i'm new to all this and am having problems with my browse page layout when using this addon. i was able to get hoverbox to work but only by using the v1 php file, i originally started with v1.2 which was fine until i tried to change the amount of thumbs per page. no matter what number i input, everytime i clicked update it reset back to zero. if you can please check my site and let me know where i went wrong or how to fix this. thanks.

http://www.me1585.com/photoblog

[fadattf]

Hi mhulett!

Can you please download the latest version again - I made some minor bugfixes.

[rathmannm]

I've installed the Hoverbox addin but got two problems with it (I'm using the horizon template and have renamed the appropriate css file)

1) The enlarged view is overlapped by other small thumbnails. So basically the enlargement is not broght fully to the foreground

2) The page links start to the right of my last thumbnail row and are then broken to the next row below all thumbnails

I've only tried this out on my local PC and have not made the changes yet to my actual photoblog on the web so I don't have an example to show. If neccessary I'll make a complete backup and change it online...

Cheers,
Manuel

[rathmannm]

Just seen the two issue I described are exactly the ones that mhulett has so you can check his blog to see what I mean...

[fadattf]

Just seen the two issue I described are exactly the ones that mhulett has so you can check his blog to see what I mean...
The Problems with mhulett have been solved with the latest update.

Most problems exists because some css rules of the themes are interfering each other.
Maybe you can post (or send) a screenshot of your problem.
If this doesn't help me I'm afraid you've to upload your files so that I've can have a look at them.

PS: Maybe I'll find a minute this evening so that I can test it out using the Horizon Template on my own server. Do you have any other addons installed that are using additional CSS?

[fadattf]

I've just added it to my horizon template and it works fine.
Please have a look --> http://photoblog.flanisoft.at/index.php?x=browse&newtemplate=horizon

edit: just saw, that the pagination is on the very first row....will fix that in a moment.

[fadattf]

Fixed it. Please download the latest release again.
http://www.pixelpost.org/extend/addons/hoverbox-for-pixelpost/

btw: It was an mistake in the css file for the horizon template. I've used a wrong comment-decleration for css (used the php one line syntax instead :) ).

[pinkasimov]

Hi,
I've installed the last Hoverbox version and it works with an issue, the thumbnail are translucide ?!
Can you see why it's like this ?
http://maphoto.lautre.net/pixelpost/index.php?x=browse&pagenum=1
Thx

[fadattf]

Hi,
I've installed the last Hoverbox version and it works with an issue, the thumbnail are translucide ?!
Can you see why it's like this ?
http://maphoto.lautre.net/pixelpost/index.php?x=browse&pagenum=1
Thx

I haven't installed this template but try to open the hoverbox.css file and replace the following section


.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}



with

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
opacity:1;filter:alpha(opacity=100);
}



I'm not sure if this works for 100% - because I just had a quick look at your css files. But give it a try - if it doesn't work I'll look at it again.

[pinkasimov]

Thx for the try, but that's the same…

[fadattf]

Thx for the try, but that's the same…

Just had another look - this should help:
Extend your hoverbox.css file with the following line:

#archive-thumbnails a:hover{opacity:1;}

[pinkasimov]

Yeah, that's alrigth now !
I only got a problem with the display on the second page…

[fadattf]

Yeah, that's alrigth now !
I only got a problem with the display on the second page…

Try to disable the "archive_page_number" addon (and remove the according tag) - hoverbox has a built in pagination feature.

AND there is a closing </div> missing.

[ranmajen]

I have tried this addon, not working in the image page but ok in browse page. Is this my own problem or this addon is not assumed to be applied in image page?

[fadattf]

I have tried this addon, not working in the image page but ok in browse page. Is this my own problem or this addon is not assumed to be applied in image page?

You are right, this addon is only for the browse page not for the image page.

[ranmajen]

oh no...would you consider to include this addon to be used in image page also?

[fadattf]

It doesn't make to much sense on the image page - most user only have one picture on that page.
Or do you mean any filmstrip-like addons.

[ranmajen]

Actually, I have thumbnails on my image page, so that I would like have hoverbox in the image page.

If this addon confirmed that cannot be used in the image page, then I need to think about the work around.

[ranmajen]

Thanks God! I have found Photoblink Thumbnails: http://www.pixelpost.org/extend/addons/photoblink-thumbnails/

This can be used in image page, then I can use your addon and this one for all the pages!

[tilos]

Hi all!
I just install hoverbox ( I did tried 1.3 1.2 1.0 but same effect),the problem is when the thumb get enlarged the picture corner and side left under the neighborough thumbs at right side by down side,so its sides stay in cover. Its only under IE, FF is OK.
Any idea? May look at my test page http://bencefice.comyr.com/index.php?x=browse