Styling thumbnails

Hi,
Hope this finds you well.
I am new to dreamweaver. As a test exercise, I am putting some thumbnails on a page in the footer. I would like to space them out properly so there is enough space between them and so they look good and align them right.
I'm assuming I do this in CSS Styles. If so, how?
I appreciate your time and look forward to hearing back from you soon.

I just created the footer as a div. I've been taught to enter the images first and then style them afterwards.
That's what I call putting the cart a little ahead of the horse...   I grabbed a 2-column CSS layout from this site (watch the screencast to see how it works): http://www.ez-css.org/css_templates
I added an unordered list to the #footer division.
Inserted some image placeholders.
Styled the #thumbnails list with CSS.
Copy and paste the following code into a new, blank HTML document:
<!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>starter 2A: Two columns with header and footer, sidebar on the left hand side, main content comes last</title>
<style type="text/css">
/* 2009 - 2010 (c) | ez-css.org
* ez-start-2B :: version 1.0 (03142010)
* Two columns with header and footer, sidebar on the left hand side, main content comes last.
* You should replace the following rule with your own reset or base styles sheet
* visit: http://carsonified.com/blog/design/setting-rather-than-resetting-default-styling
margin: 0;
padding: 0;
* To set the width of the main wrapper
#wrapper {width: 750px;}
* You can use this wrapper for the faux-column technique
* Check http://www.alistapart.com/articles/fauxcolumns/
#body {
margin-top: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #555;
border-top:1px solid #555;
* This element needs a width
#aside {
width: 30%;
padding: 15px 15px 15px 0;
* Unlike the first first column, this element does *not* need a width
#article {padding: 15px 0 15px 15px;}
Below this comment are the core rules, there should be no need to edit any of them
* auto-centering in IE 5
* we reset this value in the next rule so content is left aligned.
body {text-align: center;}
* margin "auto" is to center this element (we set the width in a separate rule near the top of this styles sheet).
* "text-align" is to reset the declaration from "body".
* "inline:block" is to create a block-formatting context (the "width" does that in IE).
#wrapper {
margin-right: auto;
margin-left: auto;
text-align: left;
display: inline-block;
* this is the clearfix method
* we rely on this to contain floats in these elements
#header:after,
#body:after,
#footer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
* hacks for IE
* "min-height" triggers "hasLayout" in IE 7,
* "height" is the trigger for IE 5 and 6.
#header,
#body,
#article,
#footer {min-height: 0;}
* html #header,
* html #body,
* html #article,
* html #footer {height: 1%;}
* this element must create a new block formatting context.
* by default, we rely on "overflow:hidden", but if this creates an issue with your design, then apply to this element one of the following rules
* ez-oa
* ez-dt
* ez-it
* ez-tc
* ez-ib
#article {overflow: hidden;}
* rules to apply to the second column (#article) if the styling above (overflow:hidden) creates issues with your design
.ez-oa {overflow: visible; overflow: auto;}
.ez-dt {overflow: visible; display: table;}
.ez-it {overflow: visible; display: inline-table;}
.ez-tc {overflow: visible; display: table-cell;}
.ez-ib {overflow: visible; display: inline-block;}
* 1st column
* the negative margin is to allow the border of the two columns to overlap
#aside {
float: left;
margin-right: -1px;
* the following fixes the "3px jog bug"
* html #aside {margin-right: -4px;}
***   The above are core rules, there should be no need to edit any of them    ***
/***BEGIN THUMBNAILS**/
#thumbnails ul,
#thumbnails li {
list-style:none;
margin:0;
padding:0;
#thumbnails li {
float:right;
margin-left: 10px;
#thumbnails img {
padding: 10px;
border: 1px solid silver; /**optional border**/
</style>
</head>
<body>

<div id="wrapper">
<div id="header">
<h1>#header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis.</p>
</div>
<div id="body">
<div id="aside">
<h2>1: #aside</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique. Aenean libero enim, gravida eget egestas et, dapibus in odio. Aenean nisl nunc, ornare porttitor aliquam non, lacinia in leo. Cras viverra mi in justo ultrices ac mattis mi imperdiet. Proin at rhoncus libero. Mauris quis urna eros, dapibus porta lectus.</p>
</div>
<div id="article">
<h2>2: #article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique. Aenean libero enim, gravida eget egestas et, dapibus in odio. Aenean nisl nunc, ornare porttitor aliquam non, lacinia in leo. Cras viverra mi in justo ultrices ac mattis mi imperdiet. Proin at rhoncus libero. Mauris quis urna eros, dapibus porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique. Aenean libero enim, gravida eget egestas et, dapibus in odio. Aenean nisl nunc, ornare porttitor aliquam non, lacinia in leo. Cras viverra mi in justo ultrices ac mattis mi imperdiet. Proin at rhoncus libero. Mauris quis urna eros, dapibus porta lectus.</p>
</div>
</div>
<div id="footer">
<h2>#footer</h2>

<ul id="thumbnails">
<li><img src="" alt="" name="thumbnail1" width="22" height="22" id="thumbnail1" style="background-color: #999999" /></li>
<li><img src="" alt="" name="thumbnail2" width="22" height="22" id="thumbnail2" style="background-color: #999999" /></li>
<li><img src="" alt="" name="thumbnail3" width="22" height="22" id="thumbnail3" style="background-color: #999999" /></li>
<li><img src="" alt="" name="thumbnail4" width="22" height="22" id="thumbnail4" style="background-color: #999999" /></li>
<li><img src="" alt="" name="thumbnail5" width="22" height="22" id="thumbnail5" style="background-color: #999999" /></li>
</ul>

<p>Some footer text</p>
</div>
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Need help making javascript thumbnail gallery function in javascript tab menu

Hello all,
I have implemented a css/javascript tab menu on one of my html pages thanks to Chris Coyier (http://css-tricks.com/learning-jquery-fading-menu-replacing-content/), and within one of the tabs, which I labeled GALLERY, I am trying to place a thumbnail gallery curtosy of Trent (http://www.twospy.com/galleriffic/).
Before trying to place it in the menu, I made the gallery on a seperate html page to make sure that I could get it to work. It does. But when I place it in the menu it shows up on page load under the content of the first tab (labeled TOUR) and not in the gallery tab. In addition, once I click on the "gallery" tab the other tabs stop showing their content. I feel like I am missing something obvious. But I just can't figure out what. If anyone can help I would greatly appreciate it.
Thanks,
Natalie
Below is the code of my whole page:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tour template</title>

<link rel="stylesheet" type="text/css" href="MenuFader/style.css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
        $(function(){
            $("#tour-button").css({
                opacity: 0.3
            $("#gallery-button").css({
                opacity: 0.3
            $("#page-wrap div.button").click(function(){
                $clicked = $(this);
                // if the button is not already "transformed" AND is not animated
                if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                    $clicked.animate({
                        opacity: 1,
                        borderWidth: 5
                    }, 600 );
                    // each button div MUST have a "xx-button" and the target div must have an id "xx"
                    var idToLoad = $clicked.attr("id").split('-');
                    //we search trough the content for the visible div and we fade it out
                    $("#contents").find("div:visible").fadeOut("fast", function(){
                        //once the fade out is completed, we start to fade in the right div
                        $(this).parent().find("#"+idToLoad[0]).fadeIn();
                //we reset the other buttons to default style
                $clicked.siblings(".button").animate({
                    opacity: 0.5,
                    borderWidth: 1
                }, 600 );
</script>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">

</style>

<title>Example tour page</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Gallery/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="Gallery/js/jquery.opacityrollover.js"></script>
<script type="text/javascript">
            document.write('<style>.noscript { display: none; }</style>');
</script>
<link rel="stylesheet" type="text/css" href="Gallery/css/galleriffic-2.css">
<link rel="stylesheet" type="text/css" href="Gallery/css/basic.css">

</head>

<body>
<div id="realtor panel"><table width="100%" border="0">
<tr>
    <td width="18%"> <div align="center"></div></td>
    <td width="82%"> </td>
</tr>
</table>
</div>
<div id="page-wrap">
        <div id="tour-button" class="button">
            <img src="MenuFader/images/TOUR.png" alt="tour" class="button" />
        </div>
        <div id="gallery-button" class="button">
            <img src="MenuFader/images/GALLERY.png" alt="property gallery" class="button" />
        </div>
        <div id="info-button" class="button">
            <img src="MenuFader/images/INFO.png" alt="info" class="button" />
        </div>
        <div id="specs-button" class="button">
            <img src="MenuFader/images/SPECS.png" alt="specs" class="button" />
        </div>
        <div class="clear"></div>
<div id="contents">
    <div id="tour">
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','1270','height','443','src','swf files/Tudor Arms interative floor plan','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','swf files/Tudor Arms interative floor plan' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1270" height="443">
        <param name="movie" value="swf files/Tudor Arms interative floor plan.swf" />
        <param name="quality" value="high" />
        <embed src="swf files/Tudor Arms interative floor plan.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1270" height="443"></embed>
      </object></noscript>
    </div>
    <div id="property gallery">
         <div id="container">
                <div id="gallery" class="content">
                    <div id="controls" class="controls"></div>
                    <div class="slideshow-container">
                        <div id="slideshow" class="slideshow"></div>
                    </div>
                </div>
                <div id="thumbs" class="navigation">
                    <ul class="thumbs noscript">
                        <li>
                            <a class="thumb" href="Gallery/images/example/apt entrance1.jpg">
                            <img src="Gallery/images/example/Tudor thumbs/apt face1.jpg" alt="apt entrance1" />
                            </a>
                       </li>
                      <li>
                            <a class="thumb" href="Gallery/images/example/apt entrance2.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/apt face2.jpg" alt="apt entrance2" />
                            </a>
                      </li>
                      <li>
                             <a class="thumb" href="Gallery/images/example/apt entrance3.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/apt face3.jpg" alt="apt entrance3" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/apt sign.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/apt sign.jpg" alt="apt sign" />
                          </a>
                      </li>
                      <li>
                             <a class="thumb" href="Gallery/images/example/entryway1.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/entry.jpg" alt="entry" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/living room1.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/living1.jpg" alt="living1" />
                          </a>
                      </li>
                       <li>
                             <a class="thumb" href="Gallery/images/example/living room2.jpg" >
                             <img src="Gallery/images/example/Tudor thumbs/living2.jpg" alt="living3" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/living room3.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/living3.jpg" alt="living3" />
                          </a>
                      </li>
                      <li>
                             <a class="thumb" href="Gallery/images/example/dining1.jpg" >
                             <img src="Gallery/images/example/Tudor thumbs/dining1.jpg" alt="dining1" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/Dining2.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/dining2.jpg" alt="dining2" />
                          </a>
                      </li>
                      <li>
                             <a class="thumb" href="Gallery/images/example/dining3.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/dining3.jpg" alt="dining3" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/Kitchen1.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/kitchen1.jpg" alt="kitchen1" />
                          </a>
                      </li>
                      <li>
                             <a class="thumb" href="Gallery/images/example/Kitchen2.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/kitchen2.jpg" alt="kitchen2" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/bedroom1.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/bed1.jpg" alt="bed1" />
                          </a>
                      </li>
                       <li>
                             <a class="thumb" href="Gallery/images/example/bedroom2.jpg">
                            <img src="Gallery/images/example/Tudor thumbs/bed2.jpg" alt="bed2" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/bedroom3.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/bed3.jpg" alt="bed3" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/bathroom.jpg">
                            <img src="Gallery/images/example/Tudor thumbs/bath.jpg" alt="bath" />
                          </a>
                        </li>
                    </ul>
                </div>
            <div style="clear: both;"></div>
        </div>
    </div>
    <div id="info">
        <p class="style4">Content for info</p>
    </div>
    <div id="specs">
        <p class="style4">This content is for specs.</p>
    </div>
</div>
</div>

<script type="text/javascript">
            jQuery(document).ready(function($) {
                // We only want these styles applied when javascript is enabled
                $('div.navigation').css({'width' : '400px', 'float' : 'left'});
                $('div.content').css('display', 'block');
                // Initially set opacity on thumbs and add
                // additional styling for hover effect on thumbs
                var onMouseOutOpacity = 0.67;
                $('#thumbs ul.thumbs li').opacityrollover({
                    mouseOutOpacity:   onMouseOutOpacity,
                    mouseOverOpacity: 1.0,
                    fadeSpeed:         'fast',
                    exemptionSelector: '.selected'
                // Initialize Advanced Galleriffic Gallery
                var gallery = $('#thumbs').galleriffic({
                    delay:                     2500,
                    numThumbs:                 15,
                    preloadAhead:              10,
                    enableTopPager:            true,
                    enableBottomPager:         true,
                    maxPagesToShow:            7,
                    imageContainerSel:         '#slideshow',
                    controlsContainerSel:      '#controls',
                    captionContainerSel:       '#caption',
                    loadingContainerSel:       '#loading',
                    renderSSControls:          true,
                    renderNavControls:         true,
                    playLinkText:              'Play Slideshow',
                    pauseLinkText:             'Pause Slideshow',
                    prevLinkText:              '&lsaquo; Previous Photo',
                    nextLinkText:              'Next Photo &rsaquo;',
                    nextPageLinkText:          'Next &rsaquo;',
                    prevPageLinkText:          '&lsaquo; Prev',
                    enableHistory:             false,
                    autoStart:                 false,
                    syncTransitions:           true,
                    defaultTransitionDuration: 900,
                    onSlideChange:             function(prevIndex, nextIndex) {
                        // 'this' refers to the gallery, which is an extension of $('#thumbs')
                        this.find('ul.thumbs').children()
                            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                            .eq(nextIndex).fadeTo('fast', 1.0);
                    onPageTransitionOut:       function(callback) {
                        this.fadeTo('fast', 0.0, callback);
                    onPageTransitionIn:        function() {
                        this.fadeTo('fast', 1.0);
</script>
</body>

</html>

Sure thing:
http://www.acresllc.net/TA501001.html

Thumbnails in alternating grid

I am working on a wordpress site with a gallery.
The gallery is generated dynamically by the Nextgen gallery plugin.
So the user adds pictures and the program makes it into a gallery.
The way the gallery looks can be styled throught CSS.
I am trying some things out here:
(looks a mess but it is just a test)
http://www.littlewings-wanbetaler.nl/wordpress/zuskookt-voor/
But what I would like is to lay out the thumbnails in an alternating grid, like so:
http://www.littlewings-wanbetaler.nl/thumbgrid.png
Is this possible at all with some really clever CSS ?
Apart from a class all the thumbs get an id which is created dynamically, everytime you add a picture .

This could be done fairly easily with a CSS styled Zebra Table.
Simply
add more <td> columns to the one shown below:
Ok, but creating tables (or HTML) is not going to work, since the HTML is output by the gallery, which is created dynamically.
So i have to do it with the CSS, I think. My sourcecode looks like this:
<div id="ngg-image-41" class="ngg-gallery-thumbnail-box" >
    <div class="ngg-gallery-thumbnail" >
    <a href="http://www.example.comnIMG_1066.jpg" title=" " class="shutterset_set_5" >
    <img title="IMG_1066" alt="IMG_1066" src="http://www.example.comnIMG_1066.jpg" width="85" height="85" />
        </a>
        </div>
next thumbnail will be the same, only the id will be different: ngg-image-42
Found an example on the webs : http://www.jimdavis.org/test/checkerboard.html
which does what I want. It uses a blank div after the last picture on the first line and a blank div before the second line.

Link image properties to both thumbnail and hero image in slideshow?

Would it be possible to have it that when you change the properties of the thumbnail in a slideshow, it automatically populates the hero image, and vice-versa? This would be a huge time-saver!
Thanks.

Thanks for the link.
When you style a background-image to an element in a Spry Menu, here is what happens:
If you style the a element, as in ul.MenuBarHorizontal a, you are styling ALL the a elements in the menu. Remember the cascade.
If you want to UN-style submenu a elements, you need to reiterate the styling thus: ul.MenuBarHorizontal ul a, which basically says "any a element in a submenu should take on this new styling."
ul.MenuBarHorizontal a {
background-image: [image path here];
ul.MenuBarHorizontal ul a {
background-image: none;
The order of these rules is important. If you were to reverse the order of the two rules I show, you would begin by turning off the background on the submenus and turning it back on (and leaving it turned on) on all a elements.
The trick in the MenuBar css stylesheet is to find the appropriate rules to style. You will have to ADD the second rule that turns off the submenu styling. Read the comments and the style selectors in the css stylesheet carefully. It is not difficult, once you get used to reading the code.
Beth

Slideshow with text instead of thumbnails

Hello all,
Is it possible to create a slideshow that instead of thumbnails has text? So the images names are placed on the side of the slideshow window and the user can change the image by clicking on their name.
Example:
Thanks
Roey

The good news is when you use the Composition > Featured News widget (aka trigger/target) it has a nice "repeat" function. If you delete all trigger/targets except the first one (I think we give you three by default), style the trigger (add the image name, set the font, color and such), then hit the + sign to add a second trigger/target Muse will apply whatever text and styling you've applied to the first to the duplicated second. That way all you really need to do is change the name from say Image 1 to Image 2.

In Photoshop Express, cannot sort images in album by filename in thumbnail view (for slideshow)l.

In Photoshop Express, I want images to appear sorted by filename. In the "view as a table" it sorts fine. When I revert to the thumbnail view, the arrangement is random. The dropdown "show" list does not offer an option for showing by filename. If I select the"custom" option, it means I would need to sort 300 images by filename MANUALLY (!!!), a job that a computer does in milliseconds. Anyone with a solution? Thanks.

fwiw, with my images in the 'Folder Location' view the photos are in order by their Windows filename. That is the same order as the hardcopy album the photos came from. So I then created a PSE Album. I selected all my photos and moved them into that album. The order of the pictures was retained in the Album. That worked out great. I wanted my PSE images to be in the same order. I thought I would do it with tags. But creating an album seems to work just fine.

How do I move page order in Thumbnails view in the new pages? (which is driving me nuts btw)

I'm really struggling with the new pages, having used the old version so much I just can't get the hang of this one - so much has changed:( Really wish I hadn't bothered but now have too many documents created in it that I can't open on old version as it doesn't let you (mump mump - well I am scottish).
So in the old version I used thumbnail view to move about the order of the pages (really useful when making up artwork for magazines etc). Anyone know how to do it on the new version?
Also can't seem to view document in '2 up' - 2 pages side by side (also very handy for magazines etc).
Also the tables facility doesn't let you move borders of individual cells - you can only move the whole column - I can't even select them.
I could go on but will go before I start the 'pages shake'.

Hilary,
Scottish or not, your best option is to retreat to the last good version of the app, Pages '09.
Cut your losses.
Jerry

In IPhoto '08, Photos under Library, I'm no longer able to view a screen of thumbnails. I'm only able to view a single photo at one time. This was not true in the past.

In IPhoto '08, in Library/Photos, I'm no longer able to view a screen of thumbnails. I'm only able to view a single photo at one time. This was not true in the past.

Note the slider lower right of the iPhoto Window. Drag it left.
Regards
TD

How is the best way to restore Thumbnails?

I'm an experienced Mac user and have used iPhoto since it began. I have carefully arranged my iPhoto collection over the years so it has always served me well. I am currently running iPhoto 11.
Yesterday, out of the blue, when I started iPhoto I received a notice that there were "inconsistencies" in my iPhoto collection and I should hit the button to fix them now. I did. After quite a few minutes that was done, and then I was asked to authorize updating my Thumbnails. Again I said OK. That took about a half hour. When complete I found all of my events had been rearranged, but were at least visible.
I decided the quickest way to fix that was to go back to an earlier iPhotos file (in Pictures folder) on my Time Machine. I restored that and used it. My arrangement was OK, but many of my thumbnails were now missing. Their dotted line locations and titles were present, but not the thumbnail photo. After trying over and over again I could not restore all of those thumbnails (perhaps 33% of them). I used the "rebuilding thumbnails" and "rebuilding the database" techniques which are part of iPhoto, but neither worked at all.
What to do? I read on this site that someone else had made his thumbnails return by manipulating each each one in some way (he rotated his). I tried that, closed iPhoto, and then reopened it and Voilá! the thumbnail had returned. The problem is I have many hundreds like that, and manipulating each one is extremely tedious. I've done quite a lot of those now, but wonder if someone knows of a better way?
Any suggestions about how to restore all of my thumbnails without one-by-one manipulating?

make a temporary, backup copy of your library if you don't already have one (Control-click on the library and select Duplicate from the contextual menu) and apply the fix below:
Fix #1
Launch iPhoto with the Command+Option keys held down and rebuild the library.
Since only one option can be run at a time start with Option #3, followed by #4 and then #1 as needed.
If neither of the options above are successful try option #2. It often requires a 2-3 passes to get all of them.
OT

How can I access the thumbnail/preview image of a PSD file?

Hey guys I'm trying to salvage some work from a corrupted PSD file via the thumbnail. What happened was I saved my work and closed photoshop and hit the reset button on my PC afterwards by mistake (i dont see why this caused a problem because the program was fully closed at the time). When I open the file now it says it uses an unsupported blending mode, if i press ok I get an error saying incompatible PS version, if I press flatten it says unexpected end of file was encountered. Ive tried PSD repair tools and searched the net for solutions and there doesnt seem to be any - Ive pretty much given up on trying to repair the original file.
The thing is, the thumbnail of the file seems to be intact because I can still see it as the file icon. I wanted to know if there was any way i can access this thumbnail image so i can enlarge it. Any help would be very appreciated!!

I have an idea to try... Earlier I mentioned the Windows Picture Viewer... Normally that won't read PSD files, but I'm used to using that to look into PSD files because at one point I bought the FastPictureViewer Codec Pack.
Something to try, and it won't cost anything:
1. Try downloading and installing the FastPictureViewer Codec Pack from here: http://www.fastpictureviewer.com/codecs/
2. Once it's installed you get a free trial period, so you can try opening your PSD file by right-clicking on it and choosing Preview.
If that fails, here's another thing to try:
Open the Bridge component of Photoshop and navigate to the folder in which you have the file. It may be able to make a larger thumbnail than the one you're seeing.
Other than that, are you saying you're seeing the thumbnail in Windows Explorer? If that's the case, what happens if you right-click in the white space near the file and choose View - Extra Large Icons?
-Noel

In Pages 5, why are page thumbnails different sizes?

So I'm using 5. And I must say I think it's brilliantly done after a long period of ******** about it. I guess I'm not asking of it anything it doesn't provide and what it does it does very well - though I'm puzzled by the behavior of selecting text via the keyboard.
Anyhow, that's not my question. I'm working with a long text document. I notice that as I work the page thumbnails become different sizes. It's subtle but it's clearly intentional. I reckon it's trying to tell me something but I don't know what. Haven't been able to find any info in the manual and was wondering if any of you clever people here might know. Thanks.

This is what I meant about how rude you are though. Your answer DOESN'T EXPLAIN ANY OF THE BEHAVIOUR myself or the other person were reporting. The only assumption that I can make is that you posted here for the sole purpose of implying that we are both mistaken or stupid.
How is this helpful at all?
How do you have 32,485 points when you are obviously more concerned with insulting people than helping them out? It puts the lie to the whole idea of "Apple Support Communities."
Also, I specifically informed you that your comments were insulting and unhelpful and politely requested you not post on this thread anymore or at least until you had some kind of actual information, yet here you are. Posting again, with no content other than the implied insult.
I'm not stupid. I know what a section break is, I know what a page break is. I'm a writer who has used innumerable word processing programs over the years and have been an IT worker for 10 years now.
I have a Pages document. It has no (or only one depending on your point of view), section(s). It has page breaks only. The pagination is set to start at "1" on the first page and proceed normally to the end of the document (300 or so pages). I am using Pages 5.5.2 on a brand new iMac. I have NONE of the previous or older versions/types of Pages on my computer.
The pages thumbnails on the side, do actually CHANGE SIZE randomly as I am editing the document. These differing sizes are NOT CORRELATED WITH THE BEGINNING OR ENDING OF SECTIONS. These size changes are also NOT CORRELATED WITH THE PAGE BREAKS (in case you were about to argue the similarity of page breaks and section breaks). As I work through the document and scroll up and down editing here or there, the size of the thumbnails RANDOMLY CHANGE SIZE. Sometimes this is correlated with me working on a section, sometimes I can work on a section and no change happens at all. The thumbnails that change size often change back again when I scroll back to them later on.
So please ... Try to act like a decent human being and either help out, or go away. STOP POSTING THAT WE ARE WRONG, when you DON'T in fact know we are wrong. STOP INSULTING ME by assuming I am stupid.
Why are you even here if you don't want to actually HELP anyone?
To anyone else reading this: I am having a real bad time with this fellow who is just the most insulting person I have met for a while, however many of my posts about him are being deleted. If anyone knows (including the mods of this forum) of the proper way to REPORT or get rid of a troll/abuser like him on Apple Support Communities or a place to report his behaviour, please let me know.

Photo gallery with Thumbnail View in Flex 3

Hello everyone
I very urgently need an answer to a very simple qeuestoon. I have been trying really hard since days to get a solution to this simple problem but in vain.
I am building an application in Flex 3. I simply want to create a photo gallery with a thumbnail where when the user clicks on a thumbnail, the image is shown in the canvas/tab navigator box next to it. The images are stored in a local folder (in src) are ARE NOT on available on any web link.
The Vbox with the thumb image and the .xml file has been created. But when I click on the thumbnail, the full image cannot be seen in the application. I dont know if this is a problem with data binding or what.
Please help!!!
Thanks a ton.

Check the folder structure
Flash is not able to get some file thats why the IO Error.
trace the url path just before u load the file and u will be abel to find whether that file is in specified folder or not.
http://www.darshanrane.com

Photo gallery created in Bridge doesn't display thumbnails and links work but don't display photos

The gallery works in preview and in live view in Dreamweaver, but not when posted to the website. I did one last week which worked just fine, and nothing has been updated in either CS 5.5 or the server software.

Try to recreate the thumbnails for that folder.
Use the latest version of the converter (5.4)

Photo Gallery thumbnails in business catalyst render in different sizes in different browsers

Photo Gallery thumbnails in business catalyst render in different sizes in safari and chrome but are fine in firefox. What is the issue with Safari? I have tried the different algorithm options such as fill_proportional etc and firefox is the only browser that displays correctly. I thought safari was the most standards compatible browser - what's the problem here?

Hi,
If you have seperate XML file but with the same basic structure then you can change the XML a Spry dataset refers to and regenerate the spry region without reloading the full page.
So on my photo gallery page I can change the album the photos are shown from via the seturl sprydata function as below. dsPhotos being my Spry dataset that points to the relevant XML dataset with my image references and captions etc. My XML is actually dynamically generated from Picasa RSS feeds (and RSS feeds are XML) but the principle will be the same with your static XML.
First I add an event listener for when someone clicks on an album (the li tag within my div with the id "albums" holds a photo and title for each album.)
function Albums()
var myalbums = Spry.$$("#albums li", "TabbedPanels1")
var rows = dsAlbums.getData();
var setListener = function( element, value )
Spry.Utils.addEventListener( element, "click", function(){ showAlbum( value ); },false );
for( var i = 0, length = myalbums.length; i < length; i++ )
setListener( myalbums[i], i );
Then this is the code which changes the photo album to be shown. (when the user clicks the relevant album)
function showAlbum(i)
pauseShow();
pImage = 'No';
var rows = dsAlbums.getData();
var albumid = rows[i]["albumid"];
var url = "xml/PicasaAphotoFeed.asp?albumid=" + albumid;
dsPhotos.setURL(url);
dsPhotos.loadData();
var rowcount = dsAlbums.getRowCount() - 1;
var nextalbum;
var navnext;
var n;
The page is here www.thehmc.co.uk/photo5.html is you want to see it in context.
In your case showAlbum would switch between Frank.xml or Wolfie.xml depending on how you decide to name your xml datasets.
Regards
Phil

Drag and Drop (re-order) Thumbnails in Organizer

I am using Photoshop Elements version 5.0.2
I would like to re-order pictures in an order that will make sense for me in my business. I suppose I can go through each pix and change the time on them, so I can then sort by time stamp.
Is there an easier way to do this? I was hopeful that I could drag and drop them in Thumbnail view - but I cannot.
Thank you,
Jamie

>Is there anyway to delete the photos in the main well, without losing them from my collection?
As I understand the design, the main well is intended to be all the photos that you are managing with Photoshop Elements.
Collections are used to display a specific group of those photos in your chosen sequence for any given activity.
I suspect that since you are using a consumer product such as Photoshop Elements for your business purpose, you may need to make some compromises like having a default (the main photo well) display sequence which you see first when starting PSE that is not what you would choose.
This is not bad if PSE does what you want - just additional steps to switch to the Collection view and also to maintain (drag and drop) the sequencing of the collection when you add additional photo files to a Collection.

Styling thumbnails

Similar Messages

Maybe you are looking for