Addon: Image Reflection Generator

[jaywilliams+]

Glad you got everything figured out. :-)

If you send me your Photoblog address, I will add it to the list of sites that use the addon.

[mike]

Hi Jay,

I'll send you the site after I have finish it.

Cheers, Michael

[Ariel]

That's really spiffy!

[jaywilliams+]

Originally Posted by trebor31

Great Add-on. Good work - clearly you are a Mac man!

I have one question, which is probably a dumb one and I know is about html/css rather than the add-on...but is there any way of placing the reflection as a background, so I can have the Image Title over the top of it?

Sure it's possible with CSS & some HTML.

Add this to your main css file, or just include it in the header:

<style type="text/css">
.image_reflection {
	padding: 0;
	margin: 0 auto;
	background-repeat: no-repeat;
}
.image_reflection h2, .image_reflection p{
	margin: 0;
	padding: 5px;
	text-align: left;
}
</style>

Then instead of using the standard IMG tag for the reflection, use this:

<div class="image_reflection" style="background: url(<IMAGE_REFLECTION_PATH>); width: <IMAGE_WIDTH>px; height: <IMAGE_REFLECTION_HEIGHT>px;">
	<h2>Image Title</h2>
	<p>Hello</p>
</div>

Obviously, you can tweak the CSS & HTML to fit your template, but this will get you in the ballpark.

[trebor31]

Jay - thanks for the reply - that is really helpful

And apologies that my post with the question is gone - as soon as I posted I remembered z-index in css so deleted my post and went off to try it - couldnt get it to work tho so your reply is even more appreciated (and made me realise something I didnt know could be done with CSS - so it has been an education!)

Thanks again.

[jaywilliams+]

I'm glad you found my post helpful. :-)

Once you get your site up, let me know and I'll add it to the list of photoblogs that use the Reflection Generator addon.

[ERQS]

Hi!

Great addon!
I have one question:
Since my template (Delicious) has a dark & light theme I was wondering whether it is possible to use the generator appropiately in both themes? Now I have a dark reflection in a white template...

Thanks in advance!

[jaywilliams+]

As you know the addon doesn't support this out of the box, but I'm sure it could be modified to do something like this.

But to tell you the truth, if you want reflections on multiple background colors, you should check into pure javascript methods. Such as: http://cow.neondragon.net/stuff/reflection/

The down side to the JS methods: Javascript is required for it to work, and it requires more CPU to create the reflection, but to be honest with most modern PCs, that shouldn't be a problem, unless you want a lot of reflections on a single page.