Thursday, October 29, 2009

[jQuery] Need help creating updated Onion Skin Dropshadow

I am trying to update the onion skin dropshadow technique for the
latest version of WordPress using jQuery to insert the necessary
div's.

This is my first foray into jQuery, and I think I've got the feel of
it, but am unsure. I really would appreciate it if someone with more
experience could take a look at the following code and suggest better
or more efficient ways of accomplishing my task. In particular, I am
not sure if I'm doing my selecting correctly.

Alex Polski had written a plugin for WordPress incorporating the onion
skin method of providing images with a dropshadow. That method was
originally created by Brian Williams in a must-read article for anyone
wanting to achieve high-quality dropshadows (http://www.alistapart.com/
articles/onionskin/
).

Alex's plugin doesn't work with the latest versions of WordPress (I'm
using 2.8.5). I believe the reason has to do with the way WordPress
now supports image alignment.

After analyzing the potential html code output from the TinyMCE
advanced image dialogue in WordPress, I determined that there are two
primary modalities:

1) The image tag does not contain an alignment class (i.e. alignleft,
alignright, or centered).
2) It does contain one.

Also, as Alex did a good job of spotting, if the image is linked, then
the div wraps must go around the links.

The first two lines of the function address scenario 1. The lines that
follow the first two are meant to address all images that contain an
alignment class. My idea is to translate that alignment into an
additional wrapper div, and then remove the class from the image (so
it doesn't interfere with the dropshadow).

So, with all that said, here is my take. Any image I want the
dropshadow on, I give a class of 'dropshadow.'

Please, suggest away.

$("img.dropshadow").not("img.alignright img.alignleft img.centered a
img").wrap("<div class='wrap1'><div class='wrap2'><div class='wrap3'></
div></div></div>");

$("a img.dropshadow").not("img.alignright img.alignleft
img.centered").parents('a').wrap("<div class='wrap1'><div
class='wrap2'><div class='wrap3'></div></div></div>");

$("a img.dropshadow img.alignright").parents('a').wrap("<div
class='wrapright'><div class='wrap1'><div class='wrap2'><div
class='wrap3'></div></div></div></div>");
$("a img.dropshadow img.alignright").removeClass("alignright");

$("a img.dropshadow img.alignleft").parents('a').wrap("<div
class='wrapleft'><div class='wrap1'><div class='wrap2'><div
class='wrap3'></div></div></div></div>");
$("a img.dropshadow img.alignleft").removeClass("alignleft");

$("a img.dropshadow img.centered").parents('a').wrap("<div
class='wrapcentered'><div class='wrap1'><div class='wrap2'><div
class='wrap3'></div></div></div></div>");
$("a img.dropshadow img.centered").removeClass("centered");

$("img.dropshadow img.alignright").not('a img').wrap("<div
class='wrapright'><div class='wrap1'><div class='wrap2'><div
class='wrap3'></div></div></div></div>");
$("img.dropshadow img.alignright").not('a img').removeClass
("alignright");

$("img.dropshadow img.alignleft").not('a img').wrap("<div
class='wrapleft'><div class='wrap1'><div class='wrap2'><div
class='wrap3'></div></div></div></div>");
$("img.dropshadow img.alignleft").not('a img').removeClass
("alignleft");

$("img.dropshadow img.centered").not('a img').wrap("<div
class='wrapcentered'><div class='wrap1'><div class='wrap2'><div
class='wrap3'></div></div></div></div>");
$("img.dropshadow img.centered").not('a img').removeClass("centered");

No comments: