Hi Anthony,

Great Module. Thanks for sharing.

Have a problem centering the images right to the middle. All my paintings are different sizes. I know I could photoshop all the images to fit into the same size boxed area, but they'd have to be pngs (different backgrounds/dropshadows) so it would take a lot to load it.

Would prefer to find a css solution if possible. I've tried margin: 0px auto and text-align: justify, but I can't make them center.

Here is the problem in pictures.

Painting 1.



Painting 2 - less width. Aligns left rather than justified.



Any help appreciated.

Hi there,

Unfortunately margin: 0 auto wont work on this because the gallery is actually an unordered list with the items floated left. So the only way to position them would be to use margin-left:10px (or what ever you wanted) on each link/list item.

You could do this by adding a specific style attribute to each list item in the mod_hoverbox.php file.

Cheers Anthony

You are a legend mate, thank you.

uh ok lol. just looked at the php file. no style tags for simpletons like me to add html or css. if it's too much trouble dont worry about it, but if you have got a second can you please show me how?

Tried this

case 1:
echo '<a href="'.$directory.'/'.$image1.'" rel="lightbox" title="'.$t1.'" class="toolTipImg"><img src="'.$directory.'/'.$thumb1.'" alt="'.$a1.'" title="'.$t1.'"></a>';
break;
case 2:
echo '<a href="'.$link1.'" rel="lightbox" rev="width='.$width1.', height='.$height1.'" title="'.$t1.'" class="toolTipImg"><img src="'.$directory.'/'.$thumb1.'" alt="'.$a1.'" title="'.$t1.'"></a>';
break;
case 3:
echo '<a href="'. sefRelToAbs(substr($_SERVER["REQUEST_URI"],0))."#nogo" .'" title="'.$t1.'" class="toolTipImg"><img src="'.$directory.'/'.$thumb1.'" alt="'.$a1.'" ></a>';
break;
case 4:
echo '<a href="'.$link1.'" target="_blank" class="toolTipImg" title="'.$t1.'"><img src="'.$directory.'/'.$thumb1.'" alt="'.$a1.'" title="'.$t1.'" style="margin-left: 512px;"></a>';
case 5:
echo '';
break;
case 6:
echo '<a href="'. sefRelToAbs(substr($_SERVER["REQUEST_URI"],0))."#nogo" .'" class="toolTipImg" title="'.$t1.'"><img src="'.$directory.'/'.$thumb1.'" alt="'.$a1.'" class="thumbnoo h:'.$thumbnoo_height.' w:'.$thumbnoo_width.'" ></a>';
}

but it moved the thumbnail across too.

Ooops sorry its been a while since I looked at this code.

The solution might even turn out simpler

Add a class to the image you want to effect so instead of having style="margin ..." just my class="margin1" or whatever you want to call the class. If you need to adjust a few images then you will need to create multiple classes.

Then in the hoverbox.css file you need to add the class information with the extra margin.

So Ill use the thumbs_left css to illustrate.

Here is the default css for that option:


Now to get the new class in there just copy the last rule and add your new class in there like this:

.thumbs_left .margin1 a:hover img {position:absolute; width:auto; height:auto; right:195px; top:0; border:1px solid #ccc;padding: 4px;background: #fefefe;}

Then you can change the right position of the hover.

I havent checked this but Im pretty sure it should work - please let me know if it does

Anthony

It worked!

Thanks Anthony. Was up til 3 in the morning trying to get it happening. Not the sharpest tool in the woodshed, but I was finally able to get it happening as per your instructions.

I'll post the code for anyone who wants to do the same thing in the future.

mod_hover_box2.php

switch ($linkme1)
{
case 1:
echo '<a href="'.$directory.'/'.$image1.'" rel="lightbox" title="'.$t1.'" class="toolTipImg"><img src="'.$directory.'/'.$thumb1.'" alt="'.$a1.'" title="'.$t1.'"></a>';
break;
case 2:
echo '<a href="'.$link1.'" rel="lightbox" rev="width='.$width1.', height='.$height1.'" title="'.$t1.'" class="toolTipImg"><img src="'.$directory.'/'.$thumb1.'" alt="'.$a1.'" title="'.$t1.'"></a>';
break;
case 3:
echo '<a href="'. sefRelToAbs(substr($_SERVER["REQUEST_URI"],0))."#nogo" .'" title="'.$t1.'" class="toolTipImg"><img src="'.$directory.'/'.$thumb1.'" alt="'.$a1.'" ></a>';
break;
case 4:
echo '<div class="image1">
<a href="'.$link1.'" target="_blank" class="toolTipImg" title="'.$t1.'"><img src="'.$directory.'/'.$thumb1.'" class="photo3" alt="'.$a1.'" title="'.$t1.'" ></a></div>';
case 5:
echo '';
break;
case 6:
echo '<a href="'. sefRelToAbs(substr($_SERVER["REQUEST_URI"],0))."#nogo" .'" class="toolTipImg" title="'.$t1.'"><img src="'.$directory.'/'.$thumb1.'" alt="'.$a1.'" class="thumbnoo h:'.$thumbnoo_height.' w:'.$thumbnoo_width.'" ></a>';
}

hover_box2.css

.hb_custom {position:relative; }
.thumbs_custom {float:left; padding-top: 510px;}
.thumbs_custom a {display:block; float:left; margin:0 0 5px 5px; width:43px; height:43px; border:1px solid #ccc;}
.thumbs_custom a img {width:43px; height:43px; border:0;margin: 0;}
.thumbs_custom a:hover {border-color:#000;}
.thumbs_custom a:hover img {position:absolute; width:auto; height:auto; left: 290px; top: 80px; border:1px solid #000;padding: 4px;background: #ccc;}
.thumbs_custom .image1 a:hover img {position:absolute; width:auto; height:auto; left: 310px; top: 80px; background: #333;}

I haven't tested it in all browsers, just firefox. Will do that now.

The next step will be adding gradiated drop shadows to the hovered images.

If I figure out how that's possible, I'll let you know.

Thanks again.

So I tried to get this javascript working with the mod ...

www.tastypopsicle.com/dropshadow/

I added a style to the php.
It's calling the javascript.
It's calling the css.

This is the result.

img234.imageshack.us/my.php?image=exampleif0.jpg


If you get a moment, can you please have a quick look and tell me if there is there any way you can see that this is going to work, or am I back to pngs. :/ Don't want to be a bother mate. Not expecting help. Realise you must be busy.

This will essentially be a javascript clash I think and will depend on the template you are using. The hoverbox uses slimbox and mootips for its lightbox and tooltip effect so if you dont need to use that then you can remove it from the output of the module - otherwise Ill need a link to see what the error is.

Cheers Anthony

Hey Anthony,

The site is online. I used css for the frames in the end as I couldn't get the javascript dropshadows happening.

Integrating this gallery with glossy.js or something similar would be pretty amazing.

Here's a link if you want to have a squizz. http://www.sensart.com.au

Just wanted to say thanks again for the help.

My Pleasure ... looks amazing thats such a creative implementation!

Good luck with the site.