Inline image - Mail

Hi there,
I have 2 problems with inline image in Mail app.
1. When I reply an email with inline image, they will be replaced with actually file name such as <image001.jpg>.
There is option for include image when forward email, but not for reply.
2. When I send an email with picture(s), it display (in Outlook) as attachment, not inline the body.
I have also tried with many other mail clients but not success.
This is really make me crazy, how come other OS (BB, WP,...) can do it while iOS cannot?

Can anybody help me

Similar Messages

How to save inline images and attachments separatley?

Hi,
I want to save all inline images into a certain directory and all attachments into another directory.
I use the following code to do this:
Multipart multipart = (Multipart) message.getContent();
        for (int x = 0; x < multipart.getCount(); x++) {
            BodyPart bodyPart = multipart.getBodyPart(x);
            String disposition = bodyPart.getDisposition();
            if(disposition != null){
                 log.debug("Disposition: " + disposition);
                 if (disposition.equals(BodyPart.ATTACHMENT)) {
                      log.debug("Mail has attachment: ");
                     DataHandler handler = bodyPart.getDataHandler();
                     log.debug("FILENAME: " + handler.getName());
                     saveAttachment(session, bodyPart, emailData);
                 else if(disposition.equals(BodyPart.INLINE)){
                      log.debug("Mail has inline attachment: ");
                     DataHandler handler = bodyPart.getDataHandler();
                     log.debug("Inline FILENAME: " + handler.getName());
                     saveInlineAttachment(session, bodyPart, emailData);
            else {
                 log.debug(bodyPart.getContent());
        }This approach works when the email has inline images only or attachments only.
It does not work when the email has both inline images and attachments. (Only the attachments are saved).
Come someone please help me correct my solution so that it can process an email that has both inline images and attachments and save them in different directories.
Thank you

Thanks bshannon.
It took me a while to understand what you meant but I think I finally got it.
I modified the getText method in order to save the embedded images:
private Image getImages(Part p, EmailData emailData, String ext) throws MessagingException, IOException {
         if (p.isMimeType("image/*")) {
            InputStream is = p.getInputStream();
            BufferedImage im = ImageIO.read(is);
            String fileName = "attachments/inline/body " + inlineImageNumber++ + "." + ext;
            File imageFile = new File(fileName);
            ImageIO.write(im,ext,imageFile);
            is.close();
            emailData.getInlineAttachments().add(fileName);
            return null;
        if (p.isMimeType("multipart/related")) {
            Multipart mp = (Multipart)p.getContent();
            Image image = null;
            for (int i = 0; i < mp.getCount(); i++) {
                Part bp = mp.getBodyPart(i);
                if (bp.isMimeType("image/jpeg")) {
                    if (image == null){
                        image = getImages(bp, emailData, "jpg");
                    continue;
                else if (bp.isMimeType("image/gif")) {
                    if (image == null){
                        image = getImages(bp, emailData, "gif");
                    continue;
                else if (bp.isMimeType("image/bmp")) {
                    if (image == null){
                        image = getImages(bp, emailData, "bmp");
                    continue;
                else if (bp.isMimeType("image/png")) {
                    if (image == null){
                        image = getImages(bp, emailData, "png");
                    continue;
            return image;
        else if (p.isMimeType("multipart/*")) {
            Multipart mp = (Multipart)p.getContent();
            for (int i = 0; i < mp.getCount(); i++) {
                Image image = getImages(mp.getBodyPart(i), emailData, "");
                if (image != null){
                    return image;
        return null;
    }

IChat Inline Images No Longer Working After a Fresh Install of Snow Leopard

My roommate and I share the same computer network and iChat through Bonjour. This is mostly for us to drop data to each other as we both work - urls, images, etc. He upgraded to Snow Leopard as a completely fresh upgrade and reinstalled his existing software with no new software added. As soon as he upgraded, he could no longer receive inline images from me, and he has to go into the file transfer window to see the images. I can see inline images from him with no problems. I can't upgrade to Snow Leopard at this time. How do we fix his image problem?

I have not set my Snow Leopard computer to Not Start Up iChat if it is Quit (unstarted on computer start up) when someone IMs me. (Off line Messaging.)
I get sent a File when I am Off line on a Sunday if I miss a particular group chat on Saturdays.
I never seem to get a Chat started as this Group Chat has finished.
The Last Group chat I was in though does pop up as per my Setting for Saved Transcripts.
It is a File not a pic.
It is not "in a Chat" either.
I am not sure how close my situation is to what you describe as to Closed Windows for the Bonjour Buddy list or other factors (there is no Off Line Messaging for Bonjour but the Buddy List Window can be closed)
I regard it a a partial replication.
It may give clues.
7:59 PM Sunday; September 27, 2009
Please, if posting Logs, do not post any Log info after the line "Binary Images for iChat"

How to add a link to a report inline image?

Hi,
I use apex 3.1.2
I have made a report where I show a small inline image. The image is stored as a blob in the db (IMAGE:XXSMALLPICS:PICTURE:ID::::::inline:Download). It works fine, but I would like to add a link to the small image so that if I click on the image a larger image shows in a popp up window.
How can that be done?
I don't succeed to add any type of link to the image.
/Erik

Hi Sam,
Firstly, you have an error in your SQL statement:
SELECT FILE_NAME,
'<img onclick="javascript:showImage(this);" >src="#OWNER#.DISPLAY_IMAGE?inID=' || NVL(IMAGE_ID, 0) || '" >height="50" width="50" />' IMAGE
FROM A_IMAGES
ORDER BY FILE_NAMEYou have an extra > - it should be:
SELECT FILE_NAME,
'<img onclick="javascript:showImage(this);" src="#OWNER#.DISPLAY_IMAGE?inID=' || NVL(IMAGE_ID, 0) || '" height="50" width="50" />' IMAGE
FROM A_IMAGES
ORDER BY FILE_NAMEFor the Region Header - I just click on the report in the page definition and scrolled down to the setting called "Region Header". Then I pasted in:
<div id="imagediv" style="display:none; position:absolute; top:0px; left:0px; height:0px; width:0px; margin:0px; padding:0px; border:0px; background-color:whitesmoke;" align="center" onclick="javascript:closediv();"><table style="border:0px; padding:0px; margin:0px; width:100%; height:100%;" cellpadding=0 cellspacing=0><tr><td style="vertical-align:middle; text-align:center">
<img id="largeimage" src="" style="border:3px double darkblue;">
</td></tr></table>
</div>
<script type="text/javascript">
var iDIV = document.getElementById("imagediv");
var iIMG = document.getElementById("largeimage");
function showImage(i)
iIMG.src = i.src;
iDIV.style.width = document.body.clientWidth;
iDIV.style.height = document.body.clientHeight;
iDIV.style.display = "block";
function closediv()
iDIV.style.width = 0;
iDIV.style.height = 0;
iDIV.style.display = "none";
iIMG.src = "";
</script>If you go back to my page, you will see that I have added two screenshots (Page41ReportSource.gif and Page41RegionHeader.gif) that show you what I have done on my report.
Andy

In the paragraph after a conditional build tag, an inline image gets wrapped in a div tag

Hi,
TCS5, so FM 12 and RH11. I have successfully applied some conditional build tags by turning off the apply conditional build tag setting and using the Conditional Build Expression in the WebHelp properties instead.
In RoboHelp, everything looks correct. I generate WebHelp and suddenly, a div tag is wrapped around the inline image in the paragraph that followed the text marked conditional.
This did not happen with TCS 4 (FM11, RH10). I am not sure why this div tag is applied only when I generate the help. Any thoughts on what to check?
Lauren

Hi lauren,
I tried to replicate the above mentioned issue, but did not get the <div> around the image in Webhelp output. Would it be possible for you to provide more information on this:
At what point does the <div> start appearing around the image, as soon as the CBT expression is applied?
If yes, what is the expression?
What happens when expression is set to None again and individual CBT is under application
Is there a spacing or the CBT text just follows the inline image?
Please send us a sample file for the same, if possible. Thanks!
Amit

View an inline image

How do i view an inline image?
Requirement is as follows:
When clicked on the image, it should open as inline image with comments and close button at the end .

For example, if we click on the photo of the person to view the image in a bigger size, then it will open the photo on the same page (inline) without refreshing the underlying jsp and it makes the underlying jsp as opaque.

How can I make numbers align with the baseline in ordered lists with inline images?

When I use inline images in an ordered list, the number for every line that has an inline image is offset from the baseline to align with the top of the image. Here is a screen shot from Preview mode (same behavior on real devices):
List entries 1 and 3 are normal. Entries 2 and 4, which contain inline images, have their numbers offset above the baseline.
I guess the line-height gets redefined based on the inline image, and then the numbers align based on line-height. Is there a way to change this within Muse so the numbers will consistently sit at the baseline even when the line includes an image? Is it something that needs to be addressed by modifying style sheets?

Hi,
You are correct in observing that inline objects affect line height, which in turn affects alignment of the bullet/number with the line.
To address this, you can use negative wrap offsets on the inline (specifically top offset) using the Wrap panel: adjust the value until the inline no longer adversely affects line height.
Hope this helps.
Abhishek

[CS2][JS] Search text & replace with inline Image

I am working with a large layout with many entries. There is a text "placeholder" that I need to search for and replace with an inline image in that exact spot.
I need to apply an Object Style to that image.
There is a loop above this for each find/replace to perfom
I have supplied samples to show what the variables will hold
The following assumes that an Objectstyle named "image" exists
//places the image
app.changePreferences = null;
findName = "OR-00014500-24-0000-1";
fileName = "Ads:OR-00014500-24-0000-1:OR-00014500-24-0000-1.eps"
myFinds = app.search(findName)
for (j = myFinds.length - 1; j >= 0; j--) {
app.select(myFinds[j]);
app.place(fileName, false,{appliedObjectStyle:"image"});
This doesn't apply the style to the placed object and I have tried many different ways to apply this in the properties.
Any help would be appreciated.

I've seem to hit another hurdle....
The code works well for searching and replacing the images. It applies the style to the image, but these images are not inline they are anchored. I ended up with a nice stack of images in the same corner.
Ok... I need to then apply styles based on the images that have been placed already..
This works well for cycling through the pages and with a bit more will change the style...
myDoc = app.activeDocument;
pagecount = myDoc.pages.length;
for ( page=0; page < pagecount; page++){
if (myDoc.pages.item(page).textFrames.length != 0){
app.select(myDoc.pages.item(page).textFrames.item(0));
piccount = app.selection[0].rectangles.length;
if (piccount != 0){
for ( bob=0; bob < piccount; bob++){
app.select(myDoc.pages.item(page).textFrames.item(0));
app.select(app.selection[0].rectangles.item(bob));
// Get geometric bounds
// alert(app.selection[0].geometricBounds);
// Get object Style
// alert(app.selection[0].appliedObjectStyle.name);
// Do more here....
I can't use this though :(
I need to determine how many images have already been placed on the page before placing the image in the search and replace....
myFinds = app.search(replaceName)
for (j = myFinds.length - 1; j >= 0; j--) {
app.select(myFinds[j]);
myStory = myFinds[j].parent;
myIndex = myFinds[j].index;
//This will change using a series of Case Switches
// Here is where I need to find the page and run the previous script or something like it myStyle = app.activeDocument.objectStyles.item("image");
app.place(fileName, false);
myStory.characters[myIndex].pageItems[0].applyObjectStyle(myStyle);
app.select(myStory.characters[myIndex].pageItems[0]);
//alert(app.selection[0].appliedObjectStyle.name);
What I need to do is kind of combine the two....
But I can't seem to get the current page of the selected image....
I could use the page by page script, but it moves the character anchor point of images and pushes them to the next page. This throws off the pretty layout I'm going for.
What am I doing wrong here ?

Email an APEX4.2 Chart as an inline image?

Hi
I have created a few flash charts using APEX4.2. Is there a way for the user to view the chart and then email it as an inline image to someone?
I know that the user can save the chart as PDF file, then send it as an attachment via Outlook ( or similar system), but can I integerate these manual steps to one ( template), similar to the IR report's download feature ?
Susanna

Just noticed this suggested FAQ from a related post.
http://java.sun.com/products/javamail/FAQ.html#sendmpr
I'll have a look at it.

Problem with large inlined images

One of the annoying aspects when inlining images is the fact that it seems to be possible to blow the margins by any amount with no limit. Once a thread contain an image a few thousand pixels wide, all posts in the thread will wrap the text at a width of several screens wide, putting entire paragraphs on single lines and forcing the reader to constantly scroll left and right while reading.
Lithium really should find a solution for this. Other forums automatically reaplace inlined images above a certain size with a smaller thumbnail version, which, when clicked would open the full-sized image in a new window.
LabVIEW Champion . Do more with less code and in less time .

P.S.
altenbach wrote:
Other forums automatically reaplace inlined images above a certain size with a smaller thumbnail version
That's an important point. I find it a bit annoying that LAVA (for example) does this even for relatively small images. Ideally, it should depend on the client's resolution, but I don't remember whether web browsers receive that information or not.
Try to take over the world!

Placing MS Word inline images onto the Baseline Grid

Products:
InDesign CC
MS Word 2013
Hi everyone.
I'm placing a MS Word docx (default style formatting, images pasted inline with the text, each on a separate line) into an InDesign document with a baseline grid.
The document places without any difficulty, except that the images are piled on top of each other. I can see tht the image is being placed on its own line on the baseline grid, so technically it's being positioned properly, but I need the text to Jump Object or Wrap Around Bounding Box. When I change any image from No Text Wrap to one of the aforementioned, nothing happens. The bottom portion of the image remains inserted and aligned to the baseline grid.
How do I get the text to Jump Object or Wrap Around Bounding Box when using the baseline grid?
Thanks

Ah, I seem to have found a solution to the problem. Not sure if it is the best or most efficient, but it seems to work:
1. Create new paragraph style.
2. Set Basic Character Format Leading to Auto.
Then, rather than select the image as I was doing, position the cursor in the respective line hosting the inline image, and apply the new paragraph style.
That caused the text to have the Jump Object appearance.

Working with inline images: How to get them to the edge of the page.

I'm making an epub and unfortunatly that means inline images. The thing is i want the images to go right to the very edge of the pages and nto have like a 2cm gap from all the edges. I have tried moving the margins however thhe image still remains firmly in the center of the page. Can I change this as it is really annoying me? Thanks .

I tried and found that you have to in Page Setup choose a paper size that is borderless. in view menu click on Show Layout. You will get a grey border on the"paper". That is the part you printer can write on. I thin this could be the problem. If you have a borderless version choose it. I don't do ePub so I can't check if this the solution for you.
Borderless version Border

Inline images in BSP

HI,
I have created a web page in BSP with some images in it. now i want the images to display some values that change with the user. can anyone tell me if it is possible to do in BSP. i have heard that it is possible to do in HTML and is called 'inline images' but dont know how to implement. it would be good if someone could tell me if it is possible or not, and if possible, then how?
thanks in advance,
pushpa

sure raja, the code that i used is as under:
<div >
<span style='mso-ignore:vglayout;position:absolute;z-index:-1;margin-left:2px;margin-top:0px;width:624px;height:357px'>
<img src="Logon.jpg"/></span>
<p><span> </span></p>
<p><span> </span></p>
<p><span> </span></p>
<p><span> </span></p>
<p><span> </span></p>
<p><span> </span>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td>                </td>
<td>                </td>
<td>
</td>
<td width=101 bgcolor="white" COLOR="black"><font size=-4>C123456789</font></td>
     </tr>
    </table>
    </p>
    </div>
this is it..and now i have to pass a value to the page and that particular value has to be displayed on the image. can u tell me how i can do that. i have to take input from user and display it on the image.
thanks,
pushpa

[CS2][JS] How to scale all inline images to 70%

To all the script gurus out there. can you help me make a script that scale all inline images to 70%? 'coz we got this client and they supply us with lots of eps files then the instruction would be to reduce the size of all images without touching the original ones. it takes time to process all of them in indesign manually.
help please.

Thank you so much guys. I'll try it later. Although I have one more problem. I got this LabelGraphics script from Indesignsecret.com modified for CS2 (originally from CS3), and it works fine for displayed figures but for inline it only labels the figures in first page.
here's the code:
//LabelGraphics.jsx
main();
//=============================================================\\
function main(){
if(app.documents.length != 0){
if(app.documents.item(0).allGraphics.length != 0){
myDisplayDialog();
else{
alert("Document contains no graphics.");
else{
alert("Please open a document and try again.");
//=============================================================\\
function myDisplayDialog(){
var myLabelWidth = 100;
var myStyleNames = myGetParagraphStyleNames();
var myDialog = app.dialogs.add({name:"Graphics name"});
with(myDialog.dialogColumns.add()){
//Label type
with(dialogRows.add()){
with(dialogColumns.add()){
staticTexts.add({staticLabel:"Label Type", minWidth:myLabelWidth});
with(dialogColumns.add()){
var myLabelTypeDropdown = dropdowns.add({stringList:["File name", "File path", "XMP description", "XMP author","Paste from clipboard"], selectedIndex:0});
with(dialogRows.add()){
with(dialogColumns.add()){
staticTexts.add({staticLabel:"Label Offset", minWidth:myLabelWidth});
with(dialogColumns.add()){
var myLabelOffsetField = measurementEditboxes.add({editValue:0});
//Style to apply
with(dialogRows.add()){
with(dialogColumns.add()){
staticTexts.add({staticLabel:"Label Style", minWidth:myLabelWidth});
with(dialogColumns.add()){
var myLabelStyleDropdown = dropdowns.add({stringList:myStyleNames, selectedIndex:4});
//=============================================================\\
var myResult = myDialog.show();
if(myResult == true){
var myLabelType = myLabelTypeDropdown.selectedIndex;
var myLabelHeight = 24; // A generic label height that will be adjusted later
myPasteFailure = false;
var myLabelOffset = myLabelOffsetField.editValue;
var myLabelStyle = myStyleNames[myLabelStyleDropdown.selectedIndex];
myDialog.destroy();
var myOldXUnits = app.documents.item(0).viewPreferences.horizontalMeasurementUnits;
var myOldYUnits = app.documents.item(0).viewPreferences.verticalMeasurementUnits;
app.documents.item(0).viewPreferences.horizontalMeasurementUnits = MeasurementUnits.points;
app.documents.item(0).viewPreferences.verticalMeasurementUnits = MeasurementUnits.points;
try{
myAddLabels(myLabelType, myLabelHeight, myLabelOffset, myLabelStyle);
catch(e){
alert("Unable to add lables. " + e);
try{
resizeOverset() ;
catch(e){
alert("Unable to correct overset text. " + e);
if (myPasteFailure == true){
alert("Unable to paste from clipboard.");
app.documents.item(0).viewPreferences.horizontalMeasurementUnits = myOldXUnits;
app.documents.item(0).viewPreferences.verticalMeasurementUnits = myOldYUnits;
else{
myDialog.destroy();
//=============================================================\\
function myAddLabels(myLabelType, myLabelHeight, myLabelOffset, myLabelStyleName){
var myDocument = app.documents.item(0);
myStoriesArray = new Array();
if (app.selection.length == 0) // If nothing is selected apply caption to all graphics in the document
var myConfirmation = confirm("Add captions to all images in the document?", false, "LabelGraphics.jsx" );
if (myConfirmation == true)
var myGraphics = myDocument.allGraphics;
else
{ // If graphics are selected, just add captions to the selected items, as long as they are rectangles(image frames)
var myConfirmation = true;
var mySelections = app.selection;
myGraphics = new Array();
for(i = 0; i < mySelections.length; i++){
if(mySelections[i] == "[object Rectangle]"){ //Check to make sure selection only includes rectangles
myGraphics.push(mySelections[i].allGraphics[0]);
else{
//alert("Objects other than graphics were selected!");
//Nothing happens if you don't select at least one graphic
myLabelStyle = myDocument.paragraphStyles.item(myLabelStyleName);
if (myConfirmation == true){
for(var myCounter = 0; myCounter < myGraphics.length; myCounter++){
try{
myAddLabel(myDocument, myGraphics[myCounter], myLabelType, myLabelHeight, myLabelOffset, myLabelStyle, myStoriesArray);
catch(e){};
//=============================================================\\
function myAddLabel(myDocument, myGraphic, myLabelType, myLabelHeight, myLabelOffset, myLabelStyle, myStoriesArray){
var myLabel;
var myLink = myGraphic.itemLink;
var myPasteFromClipboard = false;
//Create the label layer if it does not already exist.
var myLabelLayer = myDocument.layers.item("Grapiks");
try{
myLabelLayer.name;
catch (myError){
myLabelLayer = myDocument.layers.add({name:"Grapiks"});
//Label type defines the text that goes in the label.
switch(myLabelType){
//File name
case 0:
myLabel = myLink.name;
break;
//File path
case 1:
myLabel = myLink.filePath;
break;
//XMP description
case 2:
try{
myLabel = myLink.linkXmp.description;
catch(myError){
myLabel = "No description available.";
break;
//XMP author
case 3:
try{
myLabel = myLink.linkXmp.author
catch(myError){
myLabel = "No author available.";
break;
//Paste from the clipboard
case 4:
try{
myPasteFromClipboard = true;
catch(myError){
myLabel = "No clipboard data available.";
break;
var myFrame = myGraphic.parent;
myX1 = myFrame.geometricBounds[1];
myY1 = myFrame.geometricBounds[2] + myLabelOffset;
myX2 = myFrame.geometricBounds[3];
myY2 = myY1 + myLabelHeight;
if (myPasteFromClipboard ==true)
try{
var myTextFrame = myFrame.parent.textFrames.add(myLabelLayer, undefined, undefined,{geometricBounds:[myY1, myX1, myY2, myX2]});
myTextFrame.insertionPoints.item(0).select();
app.paste();
catch(e){
myTextFrame.remove();
myPasteFailure = true;
else{
var myTextFrame = myFrame.parent.textFrames.add(myLabelLayer, undefined, undefined,{geometricBounds:[myY1, myX1, myY2, myX2], contents:myLabel});
myTextFrame.textFramePreferences.firstBaselineOffset = FirstBaseline.leadingOffset;
myTextFrame.paragraphs.item(0).appliedParagraphStyle = myLabelStyle;
myFrameParentStory = myTextFrame.parentStory;
myStoriesArray.push(myFrameParentStory);
//=============================================================\\
function myGetParagraphStyleNames(){
var myStyleNames = app.documents.item(0).paragraphStyles.everyItem().name;
return myStyleNames;
function resizeOverset() {
for (var j = myStoriesArray.length - 1; j >= 0; j--) {
myLastFrame = myStoriesArray[j].texts[0].parentTextFrames[myStoriesArray[j].texts[0].parentTextFrames.l ength - 1];
myNewY2 = myLastFrame.geometricBounds[3]; //get the width of the text frame before doing fit()
myLastFrame.fit(FitOptions.FRAME_TO_CONTENT);
myNewY1 = myLastFrame.geometricBounds[1];
myNewX1 = myLastFrame.geometricBounds[2];
myNewX2 = myLastFrame.geometricBounds[0];

Div content, inline images, contain scroll methods

MacPro, DW CS6
Swap Image function
Using inline image row, responsive divs, as secondary navigation (Back-Home-Next text navigation in div above) for swap image pages. I would like to contain the div to the div container width, but avoid the stacking on down size to notePad, then mobile. Do not want to use scrollbars, but would like to emulate slideshow type of function, to allow nav images to move left or right as needed by viewer, with remainder hidden until appearance is needed.
Although I could use PowerPoint, Bridge or easyRotator, I would prefer to use pages as I've coded as I intend to use throughout site for art presentations.
View on server at: http://www.satgraphics.com/SR-71/pages/gallery1_pg1.htm
Thanks in advance,
Joe Satterwhite
SatGraphics.com
ScreamingEagles.com

I require different (text) information in its own div to display with each image, and have created a different page for each, to enable navigation through entire series sequentially.
IMO, that's a very clumsy approach to gallery presentation. You could just as easily create one page for each gallery using jQuery and Fancybox with inline content. To illustrate my point, copy & paste this code into a new, blank document. Save & preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 with Divisions</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
/**this styles thumbnail container**/
#thumbs p {
    float: left;
    width: 180px;
    margin: 10px;
    padding: 10px;
    text-align: center;
    border: 1px solid silver;
    /**optional rounded borders**/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
/**use same size thumbnail images throughout**/
#thumbs img {
    width: 160px; /**adjust width to thumbnail**/
    height: 120px; /**adjust height to thumbnail**/
    opacity: 0.75;
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
    content: "";
    clear: left;
    display: block;
/**content**/
#detail-01, #detail-02, #detail-03 {
    display:none;
img {max-width:100%; margin:0 auto; display:block}
</style>
</head>
<body>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2 Gallery</a> with images & divs</h1>
<h2>Details are hidden until thumbnails are clicked.</h2>

<div id="thumbs">

<p><a class="inline" data-fancybox-group="gallery" href="#detail-01"><img src="http://placehold.it/160x120&text=THUMBNAIL 01" alt="Thumbnail 01" />
</a></p>

<div id="detail-01">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 01"><h3>Heading 3</h3>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>

<p><a class="inline" data-fancybox-group="gallery" href="#detail-02"><img src="http://placehold.it/160x120&text=THUMBNAIL 02" alt="Thumbnail 01" />
</a></p>

<div id="detail-02">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 02"><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>

<p><a class="inline" data-fancybox-group="gallery" href="#detail-03"><img src="http://placehold.it/160x120&text=THUMBNAIL 03" alt="Thumbnail 01" />
</a></p>

<div id="detail-03">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 03"><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>
</div>

<script>
$(document).ready(function() {
$("a.inline").fancybox({
'transitionIn'    :    'elastic',
'transitionOut'    :    'elastic',
'speedIn'        :    600,
'speedOut'        :    400,
'autoScale'            : true,
'overlayOpacity'    : 0.8,
'overlayColor'    : '#505050'
</script>
</body>
</html>
Nancy O.

Inline image - Mail

Similar Messages

Maybe you are looking for