How the LightBox works....


Author Message
Unglood

Posted: 1/31/2013
Quote message 

Here's the way the Lightbox works in Artisteer 4.1.0.59782.

Lets say you want to add a picture - w/Lightbox effect - to your Web Page or Blog Post. It's handy to keep a code "snippet" around and just copy and paste the content into your page. For example:

<div class="image-caption-wrapper" style="width:80%; float:left">

<img alt="Your Alt Text" style="width:640px;height:480px;border:none; max-width:740px" class="art-lightbox" src="http://yourwebsitename.com/wp-content/uploads/2013/01/yourpicture.jpg">
<em>This'll be the Caption at Bottom of Picture</em>
</div>


Here's what it all means:

The width:80% refers to the width of your picture's (invisible) container.
If the container's width is wider than your picture's width - then the Caption will start on the bottom right edge of the picture and fill right to the containers specified width

The width: and height: in the <img> code are going to be the width and height dimensions of your picture on the screen - for the viewer or end-user.

The max-width: is the maximum width of your picture when displayed in the Artisteer Lightbox. You'll never know about the users Browser size - only their screen size :)

That's how I see it anyways.

Again, Copy and pasting a code snippet is handy after the initial Artisteer export.

Correct me if I'm incorrect please or add something that enhances the detail. Thanks.