Shadowbox3b
By ITLogic
Tutorial (Part 1) - Displaying Images
Displaying images is very easy. In the content area, just use the img tag.
// BeginWebWidget Shadowbox3b
function shadowbox3b_1(){
Shadowbox.open({
content: '<div id="welcome-msg"><img src="image.jpg" alt="hello" /></div>',
player: "html",
title: "Welcome",
height: 350,
width: 350,
gallery: ""
});
};
// EndWebWidget Shadowbox3b
Replace image.jpg with the name of your image. If it is in a folder, you can have something like images/image.jpg, of course with whatever your folder is named. The shadowbox will display the following image types:
- jpeg
- jpg
- png
- gif
- bmp
Remember to make the size (height and width) of your shadowbox equal or slightly larger than the size of your image for best results.
Subscribe to:
Post Comments (Atom)
Posts
Hey ComputerNinja, this is ITLogic. Thanks for blogging about my widget. I wanted to add something to your post. The way you are displaying the image with an img tag is technically correct, but there is a better way to do it. In the "content:" just put the image, like "myimage.jpg", then change the "player:" to "img". If you do it this way you don't have to worry about the width and height. In fact you can just delete those lines. Also, the "gallery:" argument can be removed. I uploaded a new version that omits the "gallery:" argument all together. I uploaded a new widget called Shadowbox3b Gallery for making galleries. Also see my blog at www.itlogic.org. I'm working on adding more examples for the shadowbox3b and shadowbox3b gallery widgets.
ReplyDelete