Square thumbnails in web gallery?

I love the ease of Aperture's web galleries but they would look so much more professional if there was an option to crop the thumbnails to a square without changing the large image. Does anyone know of a way to do this with Aperture?

I'm not clear why it would look more professional if
portrait shots and landscape shots were all cropped
to square. I'm no pro, but I can't imagine posting my
photos that way even for friends & family, even as
thumbs.
I just like the way it looks, I edited a web gallery after exporting as an example:
http://homepage.mac.com/greenldr/Portfolio2/index.html
This took a lot of time after the export and would have to be redone each time I updated the page, thus I was looking for a way to do this in Aperture. I would definately appreciate any help.
MacBook & MacBook Pro Mac OS X (10.4.8)

Similar Messages

Web gallery thumbnails missing

when I publish a web gallery it seems to work. I can go to the gallery online and view photos.
When I go to another one of my computers to work in iPhoto the gallery shows up, but the thumbnails are showing up as question marks. What's up with that?
Am I missing something?
Thanks

I am having the same problem. On my second computer (ibook), when I go to iPhoto, I see the Web Galleries created through the first computer (imac), but I do not see all the thumbnails, only the dotted outlines. I have five galleries. One has all thumbnails, two have some of them (and outlines) and two have only the outlines.
I went to iphoto>Preferences>Web Gallery. Then I clicked the "Check Now" button to the right of Check for Updates (top row). Not sure if this is a program error, user error, or maybe even network error as I'm using my ibook on a different (and perhaps weaker) wireless network.

Duplicate thumbnails in my Web Gallery album

I just upgraded to iLife/iPhoto 08 and I made a web gallery with some selected images. All the images are on the actual website (the link), but in iPhoto the thumbnails for those images show up a duplicates (in some cases there are 5 of the same thumbnail). the total number of photos lists 220 when there are really only 52. What is going on? Anyone have a similar problem?
I've tried quitting, restarting, clearing cache (wondering if it was my browser that was not correct).

Rick:
Mount your iDisk and go to the Web/Sites/-gallery folder. See how many folders are located in there. You might have to delete them all via the Finder and republish your galleries again.
By the way, your 112 Tokyo gallery is listed at 101 photos when I visit. Wonderful pictures.
Do you Twango?
TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.
I've created an Automator workflow application (requires Tiger), iPhoto dB File Backup, that will copy the selected Library6.iPhoto file from your iPhoto Library folder to the Pictures folder, replacing any previous version of it. It's compatible with iPhoto 08 libraries. iPhoto does not have to be closed to run the application, just idle. You can download it at Toad's Cellar. Be sure to read the Read Me pdf file.

Web Gallery - thumbnails link to the wrong photos

anyone else got this issue? Ive uploaded various galleries, and it seems .mac is a bit confused. See, I have many photos in iPhoto that are titled e.g. CIMG09878. That was never a problem. Now though on the net, in the web gallery, if I click on one of the thumbnails with that title, it opens a photo from another gallery. Any idea how I can get around this without having to rename hundreds of photos?

Thank you, joev and Bob,
Update to the text below: I just realized that documentation explains how to call some file from the HTML content of the Web Content Overlay, not how to get the HTML content inside the Web Content Overlay. I can probably do redirect to the train1.html from plain HTML code inserted into Web Content Overlay. So there is no way to use link to the file as for the http://webServerPath/Cartoons/train1.html?
We have 1 html file that uses 1 image file, both files inside the folder inside HTMLResources.zip and I need to display that html, so:
HTMLResources.zip/Cartoons/train1.html
HTMLResources.zip/Cartoons/train1.png - referenced inside train1.html
If I use http URL, e.g.
http://webServerPath/Cartoons/train1.html
then everything works, if I try to set that URL to the HTMLResources:
../../../HTMLResources/Cartoons/train1
or
../../../HTMLResources/Cartoons/train1.html
I'm getting an error, even documentation explains what link should be used.
Workaround when we just use the local HTML folder also works.
Thank you!

Web Module: Works great, but is it possilble to publish an HTML web gallery that does not use thumbnails, but just displays all photos (one above another)?

It would be nice if a published web gallery did not require clicking or sliding in order to view a new picture. Is there a template that just puts up every image in the gallery, full-size, one above another? That's how I like my webpages - see, for example, www.sgrhoa.net/betz/150205/ .
Thanks!
Bill

The built-in templates do not do that. At a quick glance, none of the available templates from Adobe's site do that either.

How to get rid of the large slideshow images in Web gallery (CS4)

Here is the deal.
I've created a flash web gallery/ But the new CS4 has the option for slideshow with this flash stuff. CS3 use to create thumbnail and large images folders. The new one creates 3 folders: 1. thumbnails, 2, medium images, 3 large images (for the slideshow). That's great, until I go to upload process. I have pretty limited space. So I'm ready to get rid of the slideshow option, but there's no such option in gallery creating process. The only solution I have in mind is to redirect slideshow images to the medium size folder. But thats pretty annoying process during the creation of each gallery.
So does anyone has an idea how to skip the slideshow creation or another method to skip creating 3 folders, all with the same images?

Extend DefaultListCellRenderer, not BasicComboboxRenderer. Here's an example that wraps the original renderer and uses it where possible (i.e. instanceof JLabel). No 'white square'.import java.awt.BorderLayout;
import java.awt.Component;
import java.text.DecimalFormat;
import javax.swing.*;
public class ComboRendererTest {
public static void main(String[] args) throws Exception {
    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
    SwingUtilities.invokeLater(new Runnable() {
      public void run() {
        new ComboRendererTest().makeUI();
public void makeUI() {
    JComboBox comboBox = new JComboBox();
    comboBox.addItem(new Double(1));
    comboBox.addItem(new Double(2.25));
    comboBox.addItem(new Double(3.5));
    comboBox.setRenderer(new TwoDecimalRenderer(comboBox.getRenderer()));
    JFrame frame = new JFrame();
    frame.add(comboBox, BorderLayout.NORTH);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(200, 200);
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
class TwoDecimalRenderer extends DefaultListCellRenderer {
private ListCellRenderer defaultRenderer;
private static final DecimalFormat FORMAT = new DecimalFormat("#.00");
public TwoDecimalRenderer(ListCellRenderer defaultRenderer) {
    this.defaultRenderer = defaultRenderer;
@Override
public Component getListCellRendererComponent(JList list, Object value,
          int index, boolean isSelected, boolean cellHasFocus) {
    Component c = defaultRenderer.getListCellRendererComponent(list, value,
            index, isSelected, cellHasFocus);
    if (c instanceof JLabel) {
      ((JLabel) c).setText(FORMAT.format(value));
    } else {
      c = super.getListCellRendererComponent(list, value,
              index, isSelected, cellHasFocus);
      setText(FORMAT.format(value));
    return c;
}db

Can I use CSS with PS Web Gallery Preset?

Using DW CS4. I wanted to create a web gallery with captions under the thumbnail images. I could not get captions to show up using the workspace output tool in Bridge, so I used the web gallery plug-in and preset in Photoshop. The doc title and description from the metadata shows up with each thumbnail and large photo, which is what I wanted. I added an Iframe to make the gallery show up in my web page layout with all the links I wanted, and I re-wrote part of the preset html to eliminate some of the extra preset gallery text at the top of the gallery pages. I am using a transitional doc type.
It all worked out just fine and the pages are working as planned.
However, when I used DW to validate the gallery pages, the report showed errors because the font attributes for the gallery pages are controlled by html and not by CSS. There are two problems cited in the report:
The tag "center" is not allowed within: <p>
In HTML 4.0, FONT is deprecated... consider using style sheets instead.
Questions: On the gallery pages generated by the PS plug-in and pre-set, is there a way to control font attributes with a style sheet instead of using the pre-existing html styling? Do I need to be concerned about the attributes being deprecated?
If you need to look at the web gallery, you can see it at http://www.LoonSongGardens.com/webgallery/galleryab.html
If you look, you can see why I am daylilybud!

I used an iframe (as opposed to a frame) as suggested in an article by David Powers about embedding a gallery into a web page. He says the iframe is acceptable in html, and no problem with the iframe itself was indicated during validation, just the FONT attributes from the PS preset I used. You can read the article here: http://foundationphp.com/tutorials/gallery/embed1.php
In my current gallery, thumbnail captions appear from the metadata for each photograph. For each large image, both the title and the description come from the photo's metadata. This works well for my purpose, and I want to avoid re-entering each title and description. I guess my question could be better stated by asking if CSS can be added to the preset to apply to captions coming from the metadata of each photo.
Regarding the lightbox approach you suggest, I looked at the example and do not see captions under the thumbnails. Can captions be added to the thumbnail images? (It is essential that my thumbnails have captions.)
Customers need to see the name of each plant when they browse thumbnails in order to select items (daylily plants) of interest.
Because I am dealing with hundreds of photos and will need to update frequently, I am looking for a solution that is efficient and fairly easy to maintain. So far, the PS web gallery preset meets my needs better than anything else I have found, but I thought I'd try to find out if I should and can fix the FONT attribute validation problem.

Photos in Web gallery too dark

Hello,
I just updated to the new iLife.
I tried the new Web Gallery function and the photos are too dark compared to the view in iPhoto.
Same happens with galleries in iWeb.
What's wrong?
JO

There is a color problem when publishing pictures from iPhoto 06 and 08 (as well as when e-mailing a picture).
The problem being that the images are published with their original color profile, whatever that is. Further, if profile is missing in the image in iPhoto, the profile will be missing in the output. (BUT iPhoto displays correctly in case there is an EXIF tag specifying sRGB).
The result is that colors will not be displayed correctly on the WEB (or in e-mail clients), more or less depending on OS platform. This applies both to images and their thumbnails.
Compare the iPhoto album http://www.tomasjonsson.eu/IPhotoTests/
with an album with correct colors http://www.tomasjonsson.eu/PictureSite/Albums/Pages/PreAndPostProcessed.html
In Safari, only IMG_9465 and IMG_5182 will show a difference - since those are the only images without a color profile. However, in other MS-Windows browsers, most images will be displayed incorrectly.
Note! Most digital cameras produce images without at color profile but with an EXIF tag. In iPhoto:Preferences:Advanced choose Embed ColorSync profile, which will add a profile corresponding the EXIF tag. However, the images that you have already imported will not be fixed.
Note to Apple: Show EXIF colors space and embedded color profile in Info pane. Add command - ASSIGN profile. And in export dialog - add option Color Space.
HOW IT SHOULD BE
Images on the web (and in general also e-mails) should be published in sRGB color space (otherwise they will not be displayed correctly in browsers on the MS-Windows platforms, with the exception of Safari, viewing images with a color profile)
Images should have a color profile, in particular the sRGB images (otherwise they will not be displayed correctly on the MacOS platforms. Maybe close to correct if you have calibrated your monitor to PC-gamma)
Actually all images should have a color profile, period. If the image does not have a color profile, it is just a pile of randomly colored pixels - to be interpreted freely by any displaying device, which they do.
For a demonstration of profiles and WEB see: http://www.gballard.net/psd/golive_pageprofile/embeddedJPEGprofiles.html
However, DO NOT follow this guys advice of omitting the color profile for WEB publishing because of overhead. The overhead is less than 1% of a high quality image. (I measured 0.5 - 2.5 kByte)
WORKAROUND
After exporting from iPhoto - use Photoshop and CONVERT TO PROFILE all images to sRGB color space. Save file with color profile.
Note, make sure that images without original profile are treated correctly (most often they are sRGB, check the EXIF tag with Preview application)
Note, apply also conversion to thumbnails.
Tomas Jonsson, Genicore Embedded Technology AB

CS4 Bridge - Black stroke around image in Web Gallery

More specifically, I'm using the LightRoom Flash Gallery selection as that provides just the structure that I want/need. To match my website (still in construction) I've altered the colors in Bridge's controls. Separately, I've added a frame around each image in Photoshop with a dropshadow that bleeds into the background color (again, to match the website).
The problem is that there is a 2 pixel stroke around the image.
Unfortunately since the image has a frame of its own with a drop shadow bleeding to the page color as part of the image, and that there's a 2 pixel stroke around the image, I've got a dropshadow contained within a stroke frame around the image that already has a frame. To my eyes it looks rather silly.
Is there anything I can do to get rid of this stroke? You can see two images with the problem here:
http://thecoynes.com/hdr/hdr_photographs/
By the way, before you suggest it, in the color palette options for this Web Export, there is an option for "Border." Unfortunately that is for the 1 pixel round-corner-rectangle border around the thumbnails and image. It doesn't do anything to *this* border. In addition, the structure of this web gallery is EXACTLY like the one in LightRoom and has the exact same results and problems.
Thanks for any help,
Gary

Tomrock,
Please read the last paragraph where I start "By the way, before you suggest it..."
In other words, yup, I've tried that and it refers to the 1 pixel border around the thumbs and the overall image.
Thanks for suggesting anyway, I've spent way too much time on this already.
Gary

Customizing Photoshop Web Gallery in Dreamweaver

HOW DO I STOP WIDTH OF IMAGE FROM STRETCHING? (height is in
proportion)
more details:
I've almost finished customizing a Photoshop web gallery in
Dreamweaver, which is completely confusing for me (i'm a novice)
and any head way i made in changing the template was mainly from
trial and error as it is very unclear in the instrutions on how to
edit.
I finally have a template that is starting to look the way I
want with the thumbnails at the bottom in an iframe and with the
larger image above with arrows on either side. I edited it so the
only thing that's changed in size on the image is the Height so the
width can change automatically.
When the practice gallery I made first opens I've got it
displaying each photo for 4 seconds then going to the next, there's
also the option to pause. While it's playing when it first opens
everything looks fine, the image sizes are right the height is
correct and there's no stretching. BUT as soon as I click on a
thumbnail at the bottom it decides to stretch the width of the
image to fit the table, and then every image after in the slide
show is also stretched. Even if i pause the slides and select a
different image thumb it displays the streched image and not the
proper proportioned image that is displayed when the page is first
opened.
Anyone know how to fix this??????
Any help at all would be appreciated.
Thank you.
Free Flash Video
Tutorials

My advice is to get a 3rd party gallery creation program.
Many are free and most are better than Adobe's half-baked offerings.

New to iWeb - Curious about posting a web gallery

So I set up a new page in iWeb, a photo page. In iPhoto, I uploaded my web gallery. I then dragged that gallery into iWeb and the thumbnails were there. When I double click one of them, it takes me to the next page but no image shows up. The title of the image is there, but not the image itself. Why is this?
I then published the page to see what happens. When I went to the page however, my header was there, but no thumbnails.
Obviously I'm doing something wrong here.
The photos are online in my gallery, I've checked that. All is well there.
Why won't they show up my my published site? Do I need to activate them somehow?
Thanks in advance!

Instead of adding the gallery to a photos page have you tried using the MMe Gallery Widget in the Show Media/Widgets pane?
That will create an object with skimming features that, when clicked, will take you to the MMe gallery online. This demo page has examples: iPhoto/MobileMe Galleries
Otherwise, create an album of the photos used in the gallery and drag that album into the photos page.
OT

Web Gallery not showing in Aperture's browser window.

Hi, I hope someone can help me with this. I create web galleries all the time and they work fine. For some reason when I create a new web gallery, instead of seeing the interface with the web preview (where you get the all the setting for customizing the web gallery and the export/publish buttons), I just see the image thumbnails in the Aperture browser. I even went to web galleries from old projects and is displaying the same way. Has anyone had this problem? Your help will be greatly appreciated. Thanks!

Chalo Photo wrote:
Hi, I hope someone can help me with this. I create web galleries all the time and they work fine. For some reason when I create a new web gallery, instead of seeing the interface with the web preview (where you get the all the setting for customizing the web gallery and the export/publish buttons), I just see the image thumbnails in the Aperture browser. I even went to web galleries from old projects and is displaying the same way. Has anyone had this problem? Your help will be greatly appreciated. Thanks!
hi, chalo
have you tried hitting the v key? the v key toggles the viewer on and off
victor

CS6 Mac- How to disable metadata from showing in web gallery???

Does anyone have a way to stop metadata from displaying in my web gallery main image display? I am trying to create a simple html web gallery of some images from within Bridge output module. Thumbnails look ok, but when I click on one and get the large image, at the bottom of the page it is displaying all sorts of info that I don't want showing!
There does not seem to be any way of turning this off.
I am on a mac 10.9.5, Bridge CS6
Your help appreciated.
Jonathan

Hi Philip,
Thanks so much for you reply.
I think part of my problem is that I was working from Nikon RAW files and converting those to a web gallery. It's been a while since I made a gallery in Bridge, but as I recall now I used to shoot RAW + JPG and use the jpg images for output to web gallery.
I just did this your way and it worked fine. I never used the Export menu before. Does it automatically default to JPG? I don't see any options to do tiff, PSD etc. Obviously jpg is what I need for web, but wondered if output file kind could be changed in export somewhere. I suppose this is what Actions are for. Adobe could make this simpler by having a check-box in the Web output that gives the option of including metadata or not.
Anyway thanks for your help. I really appreciate it. Been hitting my head against the wall about this.
Jonathan

Change background in Adobe Bridge Web Gallery

Hi,
I am trying to use a web gallery created with adobe bridge in my webpage. I have inserted gallery in an <iframe>. The gallery shows up just fine. I would like to have the background of the webpage show up rather than the background of the web gallery. How can I do this? Also, I would like to change the appearance of the captions under the pictures. Also the gallery shifts left in interbet explorer. Can this be fixed?
Here is the code in my web Page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Cliff's Home Page</title>

<style type="text/css">

</style>

<link href="cliff.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#Webgallery {
height: 750px;
width: 1000px;
text-align: center;
background-image:url(back1.gif)
</style>

</head>
<body>
<div class="container">
<div class="header"><img src="Pictures/logo.gif" alt="Logo" name="Insert_logo" width="81" height="63" id="Insert_logo" style="background: #8090AB; display:block;" />
</div>
<div class="sidebar1"> <img src="Pictures/back1.jpg" width="72" height="72" />
      <p style="font-size:larger; font-family:'Comic Sans MS', cursive"> Cliff is an all breed AKC Registered Professional Dog Handler</p>
      <p><img src="Pictures/back1.jpg" width="72" height="72" /></p>
      <p><img src="Pictures/back1.jpg" width="72" height="72" /></p>

</div>
<div class="content">
<div > <ul id="MenuBar1" class="MenuBarHorizontal">
     <li><a href="cliffsteele.html">Home</a>      </li>
     <li><a href="#" class="MenuBarItemSubmenu">Resort</a>
       <ul>
         <li><a href="facilities.html">Our Facility</a></li>
         <li><a href="Kennel.html">Boarding & Daycare</a></li>
         <li><a href="spa.html">Grooming</a></li>
         <li><a href="#">Rates</a></li>
</ul>
     </li>
     <li><a class="MenuBarItemSubmenu" href="#">Show Handling</a>
       <ul>
         <li><a href="#">Info</a></li>
         <li><a href="#">Rates</a></li>
         <li><a href="calendar.html">Schedule</a></li>
</ul>
     </li>
     <li><a href="#">Photo Gallery</a></li>
     <li><a href="#">About Me</a></li>
     <li><a href="Contact.html">Contact Me</a></li>
   </ul></div>
<br />

<h1 style="margin: 10px; clear: both; text-align:center; font-size: xx-large; font-family: Georgia, 'Times New Roman', Times, serif; padding-top:20px;">Clifford W. Steele</h1>

<div >
<div id="Webgallery"><iframe src="Adobe Web Gallery/index.html" width="1000" height="750" frameborder="0" name="gallery"></iframe></div>
</div>
    </div>
<div class="footer">
      <div style="float:right">
        <p> <a href="MAILTO:[email protected]" >Site Designed by Fredric M. Zipser</a><br />
       </p>
    </div>
    <div class="clearfloatleft">
        <p>Clifford W. Steele Professional Handler <br />
          1395 Rt. 6<br />
          Carmel, NY 10512-1627<br />
          United States<br />
          ph:(845) 225-2463<br />
          Cell:(845) 661-0010<br />
        <a href="MAILTO:[email protected]" >[email protected]</a></p>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>

=====================================================================
Here is the gallery code:
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="KEYWORDS" content="photography,software,photos,digital darkroom,gallery,image,photographer" />
<meta name="generator" content="Adobe Lightroom" />
<title>Adobe Web Gallery</title>
<link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="content/139026903252918767_custom.css" />
<link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="resources/css/master.css" />
<script type="text/javascript">
   window.AgMode = "publish";
      cellRolloverColor="#a1a1a1";
      cellColor="#949494";
      </script>
<script type="text/javascript" src="resources/js/liveUpdate.js">

</script>
<script type="text/javascript" src="resources/js/cutName.js">

</script>



</head>
<body>
<div id="wrapper">
<div id="sitetitle">
<h1 onClick="clickTarget( this, 'siteTitle.text' );" id="liveUpdateSiteTitle">Adobe Web Gallery</h1>
</div>
<div id="collectionHeader">
<h1 onClick="clickTarget( this, 'groupTitle.text' );" id="liveUpdateCollectionTitle">My Photographs</h1>
<p onClick="clickTarget( this, 'groupDescription.text' );" id="liveUpdateCollectionDescription">Web Photo Gallery created by Adobe Bridge</p>
</div>
<div id="stage">
<div id="index">
<div id="tempDiv" xmlns="">Floyd & Merve
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft   " onClick="window.location.href='content/_7522730020_large.html'">
<div class="itemNumber">1</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID0_1390269032529_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_7522730020_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_7522730020.jpg" id="ID0_1390269032529_thumb" alt="Floyd & Merve" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Honey & Coco
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft   " onClick="window.location.href='content/_5915412028_large.html'">
<div class="itemNumber">2</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID1_1390269032529_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_5915412028_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_5915412028.jpg" id="ID1_1390269032529_thumb" alt="Honey & Coco" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Hope
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft   " onClick="window.location.href='content/_2409862627_large.html'">
<div class="itemNumber">3</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID2_1390269032529_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_2409862627_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_2409862627.jpg" id="ID2_1390269032529_thumb" alt="Hope" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Jackson
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft borderRight " onClick="window.location.href='content/_0603615958_large.html'">
<div class="itemNumber">4</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID3_1390269032529_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_0603615958_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_0603615958.jpg" id="ID3_1390269032529_thumb" alt="Jackson" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div class="clear">

</div>
<div id="tempDiv" xmlns="">Larry
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft   " onClick="window.location.href='content/_6717880965_large.html'">
<div class="itemNumber">5</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID4_1390269032529_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_6717880965_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_6717880965.jpg" id="ID4_1390269032529_thumb" alt="Larry" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Maggie & Fiona
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft   " onClick="window.location.href='content/_7881538797_large.html'">
<div class="itemNumber">6</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID5_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_7881538797_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_7881538797.jpg" id="ID5_1390269032545_thumb" alt="Maggie & Fiona" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Mocho
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft   " onClick="window.location.href='content/_0937208439_large.html'">
<div class="itemNumber">7</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID6_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_0937208439_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_0937208439.jpg" id="ID6_1390269032545_thumb" alt="Mocho" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Riley
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft borderRight " onClick="window.location.href='content/_9205901081_large.html'">
<div class="itemNumber">8</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID7_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_9205901081_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_9205901081.jpg" id="ID7_1390269032545_thumb" alt="Riley" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div class="clear">

</div>
<div id="tempDiv" xmlns="">Rio
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft   " onClick="window.location.href='content/_4843308047_large.html'">
<div class="itemNumber">9</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID8_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_4843308047_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_4843308047.jpg" id="ID8_1390269032545_thumb" alt="Rio" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Scout & Whisky
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft   " onClick="window.location.href='content/_7104248265_large.html'">
<div class="itemNumber">10</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID9_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_7104248265_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_7104248265.jpg" id="ID9_1390269032545_thumb" alt="Scout & Whisky" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Shadow
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft   " onClick="window.location.href='content/_0430682464_large.html'">
<div class="itemNumber">11</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID10_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_0430682464_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_0430682464.jpg" id="ID10_1390269032545_thumb" alt="Shadow" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Sissy
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft borderRight " onClick="window.location.href='content/_8169451030_large.html'">
<div class="itemNumber">12</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID11_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_8169451030_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_8169451030.jpg" id="ID11_1390269032545_thumb" alt="Sissy" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div class="clear">

</div>
<div id="tempDiv" xmlns="">Tyke
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
   nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft borderBottom " onClick="window.location.href='content/_3042148269_large.html'">
<div class="itemNumber">13</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID12_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_3042148269_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_3042148269.jpg" id="ID12_1390269032545_thumb" alt="Tyke" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
    document.write(thumbnailName);
   </script>
</p>
</div>
</div>
</div>
<div class="emptyThumbnail borderTopLeft borderBottom"> </div>
<div class="emptyThumbnail borderTopLeft borderBottom"> </div>
<div class="emptyThumbnail borderTopLeft borderRight borderBottom"> </div>
<div class="clear">

</div>
</div>
</div>
<div class="clear">

</div>
<div id="contact">
<a href="mailto:[email protected]">
<span onClick="clickTarget( this, 'contactInfo.text' );" id="liveUpdateContactInfo">Contact name</span></a>
</div>
<div class="clear">

</div>
</div>
</body>
</html>

Try opening in Chrome or Firefox and inspecting the elements. You can turn easily locate the CSS that's driving the background and experiment with settings. You get there by right clicking on an element and select Inspect Element from the options. It's much easier than trying to go through all of that HTML code without a style sheet to go along with it.

Web Gallery-Surprising Differences between Safari and Firefox

I discovered some surprising differences using Web Gallery in Safari vs. Firefox:
1. When you first view an album the gallery, the thumbnail photos take quite a bit longer to be visible in Safari than in Firefox.
2. When rolling the mouse over the Subscribe icon in Safari, a message states, "Add this album to iPhoto." In Firefox, the message states, "Subscribe to an RSS feed of this album."
3. When a movie is selected in Safari, you can download it immediately, though the movie is not playable from the Safari page until it fully loads. In Firefox, if you click the download icon before the movie has fully loaded, a message appears that states, "QuickTime is unable to play this movie. Please try again. Then, a window opens asking what to do with the file you are trying to download -- Save it, or Launch QuickTime. If you wait until the movie is fully loaded, it plays within the Firefox page. If, after it's loaded, you leave the page and then go back to that page, the movie won't load again and play within Firefox, but it can be downloaded.
I'm wondering whether these differences in functionality are typical or just occurring on my Mac, so please document your experience here.

Thanks Denes for your reply.
I use HttpWatch tool to measure the loading times. Reports are mostly the same for IE and FF. I can see from the report, there is three times shown error 404 Not Found for the items below.
http://......./images/sRegion-Body.png
http://......./images/sRegion-Bottom.png
http://......./images/sReportBG-Standard.png
The last action which caused 404 error started 2 seconds after the page was asked to refresh. The next action http://......../i/libraries/jquery-ui/1.8.22/ui/i18n/oracle/jquery.ui.datepicker-cs.js started after 38 seconds (hanging in the same place for 36 seconds). Does it mean that the problem is caused by http://......./images/sReportBG-Standard.png action which returns 404 error?
How can I add the missing images?
-Jiri

Square thumbnails in web gallery?

Similar Messages

Maybe you are looking for