Addon: Image Reflection Generator

[jaywilliams]

http://labs.dview.us/other_files/files/admin_reflect.jpg (http://www.pixelpost.org/extend/addons/image-reflection-generator/download/)

Sites Using this Addon:
http://photoblog.xlv.nu/
http://www.32bitwonder.org/
http://www.sergiofdez.com/

[austriaka]

looks good!
But if I switch off JavaScript I am not able to read the last line "EXIF Data", it is hidden beneath the bottom of the page
(FF2 and IE7)
KArin

[mauritz]

Very, very nice. I'm not gonna use it on my blog, and haven't tried it, but on your blog it looks very nice.

[«XLV»]

Great work, thanks for releasing it!

For those considering downloading: Have tried (and still use (http://photoblog.xlv.nu)) and it works very well indeed. Easiest thing I've installed yet, and works for old photos too. One of my favourite add-ons.

[SnowScan]

Thanks, its a joy :)

[jaywilliams]

Thanks, its a joy :)
Glad you like it!
And, btw, with the border that you add on your photos, the refection looks amazing!

I also added your site to the list at the top of this thread.

[mike]

At first this is one of the best addons I've seen.
I have a little problem with the addon.
Arround the reflection I have a black border.
Could anyone tell me how I get this border away?

Thx in advance!

[mike]

Found it!
Thx anyway.

Mike

[Dennis]

Mike please share it with the rest of the people on the forum.

[mike]

It wasn't a problem with the addon.
Just a setting in the template.

[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]

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.