Application help
| Project: | jQuery Eye Candy |
| Version: | 6.x-1.x-dev |
| Component: | Documentation |
| Category: | support request |
| Priority: | minor |
| Assigned: | Unassigned |
| Status: | postponed (maintainer needs more info) |
Jump to:
I would really like to be able to insert an image in a page and have a drop shadow applied, but I'm afraid that I'm really not at all up to speed on php and css. I can get the image in the page. I can get the plugins installed. I see the usage instructions in the readme but I don't know if I need to tailor the text there to the specific module that I'm applying. When I look at the samples at the demo site I'm afraid that I see css for a page element, but don't know what sort of class I might need to add to css in order to 'tag' images.. whether the class would need to be defined inside the image tag or what. Any more help with explicit user directions would be much appreciated since this looks to be a wonderful contribution. Care and appreciation!
#1
Did you get this resolved? Adding a shadow to a picture is actually a pretty simple thing (i'll have to add an example to my demo pages).
The easiest way is to add a class to your img tags for those images you wish to have a shadow:
<img id="image-shadow" src="/files/myimage.png" />And then in the code box for the drop shadow plugin, put something like:
$(document).ready(function(){
$("#image-shadow").dropShadow({left: 8, top: 8, blur: 3, opacity: 0.8});
})
Let me know if that works for you....
#2
#3
The easiest way to use dropshadow on images is to use a class.
If you're using a WYSIWYG you can probably right click on the image to get it's properties, then add a class to it. For example, if FCKEditor, I add the class "mydropshadow" to any images I bring into the editor.
Then the jquery is pretty straightforward.
$(document).ready(function(){$('img.mydropshadow').css({border:'1px solid #9a9a9a', margin: '0 15px 15px 10px', background: '#3f3f3f'}).dropShadow({left: 5, top:5, blur: 1, color: 'black', opacity: 1, swap: false});
To break down the code:
img.mydropshadow get the image of class "mydropshadow"
.css - adds a border 1pixel wide, solid of the color #9a9a9a (light gray). I want a margin around the picture and I want to set the background of the image to #3f3f3f (a darker gray);
IMPORTANT NOTE: dropshadowing an image will give you a ghostly image as a shadow. If do not want this and you simply want a solid color shadow then you have to set a background color for the image.
.dropshadow does the dropshadow.