Topic: flickr: can't align thumbs top left & no scrolling happening

I would kill for some help. I'm building a site for someone and they want simpleviewer, (they don't want to pay for the upgrade,) and it would be best, pretty much a must, for it to work with flickr. I've NEVER used this script before and was surprised at how awesomely easy it was... until I started going absolutely insane with these two problems...

1. I don't want the thumbnails centered on the left, I want them at the top of the left. (see pics below)

2. Most importantly it's cutting off the image descriptions even though I believe I have everything set to either 100% or scroll="auto" (etc...)

This is what it looks like (screen cap):
http://melorasworld.com/photoalbum/albu … cutoff.jpg

This is more like what I would hope that it would do (screen cap):
http://melorasworld.com/photoalbum/albu … i_want.jpg

This is the live version: the coding for the whole site isn't finished so it is likely that the links won't take you to the right places yet but, this is the page with the "working" code:
http://melorasworld.com/crap/site_luisa … llery.html

See how short the description is on the live page? You can tell how cut off it is because the description should read like this:
Blah blah blah, might as well test this out. Blah and blah-de-dah more more more more more....more.... Blah blah blah, might as well test this out. Blah and blah-de-dah more more more more more more Blah blah blah, might as well test this  out. Blah and blah-de-dah more more more more more more

It doesn't need a scrollbar, but the flash isn't extending downward to accommodate the image description.

Here's my code in the gallery's folder:

gallery.html

<!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>Luisa Rafidi</title>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="../style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.galleryURL = "gallery.xml";
var params = {};
params.bgcolor = "";
params.allowfullscreen = true;
params.allowscriptaccess = "always";
var params={};
params.wmode="transparent";
swfobject.embedSWF("simpleviewer.swf", "flashContent", "700", "600", "9.0.10", false, flashvars, params);
</script> 


</head>

<body onload="MM_preloadImages('../layout_1b.jpg','../layout_6b.jpg','../layout_2b.jpg','../layout_3b.jpg','../layout_4b.jpg')">
 <div id="main" style="position:absolute; width:900px; z-index:1; left: 0px; top: 0px; overflow: hidden; visibility: visible;">
   <table width="900" border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td><table width="900" border="0" cellspacing="0" cellpadding="0">
         <tr>
           <td>
             <table width="165" border="0" cellspacing="0" cellpadding="0">
               <tr>
                 <td width="165"><a href="../gallery.html" target="_parent" onmouseover="MM_swapImage('Gallery','','../layout_1b.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../layout_1a.jpg" alt="Gallery" name="Gallery" width="165" height="111" border="0" id="Gallery" /></a></td>
               </tr>
               <tr>
                 <td><a href="../info.html" target="_parent" onmouseover="MM_swapImage('Info','','../layout_6b.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../layout_6a.jpg" alt="Info" name="Info" width="165" height="111" border="0" id="Info" /></a></td>
               </tr>
             </table></td>
           <td><table width="735" border="0" cellspacing="0" cellpadding="0">
             <tr>
               <td><table width="735" border="0" cellspacing="0" cellpadding="0">
                 <tr>
                   <td width="137"><a href="../other.html" target="_parent" onmouseover="MM_swapImage('Other','','../layout_2b.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../layout_2a.jpg" alt="Other" name="Other" width="137" height="159" border="0" id="Other" /></a></td>
                   <td width="97"><a href="../links.html" target="_parent" onmouseover="MM_swapImage('Links','','../layout_3b.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../layout_3a.jpg" alt="Links" name="Links" width="97" height="159" border="0" id="Links" /></a></td>
                   <td width="80"><a href="../index.html" target="_parent" onmouseover="MM_swapImage('Home','','../layout_4b.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../layout_4a.jpg" alt="Home" name="Home" width="80" height="159" border="0" id="Home" /></a></td>
                   <td width="421"><img src="../layout_5.jpg" width="421" height="159" /></td>
                 </tr>
               </table></td>
               </tr>
             <tr>
               <td height="63" valign="bottom" background="../layout_7_gallery.jpg"><img src="../layout_spacer.gif" width="70" height="10" border="0" />• Original Art •Fan Art • Commissions • Rough Work...</td>
               </tr>
           </table></td>
         </tr>
       </table>         </td>
     </tr>
     <tr>
       <td height="650" valign="top" background="../layout_bg_gallery.jpg"><div id="flashContent">SimpleViewer requires JavaScript and the Flash Player.
<a href="http://www.adobe.com/go/getflashplayer/">Get Flash.</a></div></td>
     </tr>
   </table>
 </div>
 
</body>
</html>

gallery.xml

<?xml version="1.0" encoding="UTF-8"?>

<simpleviewergallery
    
    galleryStyle="classic"
    title="SimpleViewer Gallery"
    textColor="52b384"
    frameColor="52b384"
    frameWidth="3"
    thumbPosition="LEFT"
    thumbColumns="3"
    thumbRows="3"
    showOpenButton="TRUE"
    showFullscreenButton="TRUE"    
    maxImageWidth="500"
    maxImageHeight="500"
    useFlickr="true"
    flickrUserName="melorasworld"
    flickrTags=""
    languageCode="AUTO"
    languageList=""        
    imagePath="images/"
    thumbPath="thumbs/"
    vAlign="top"
    
>


</simpleviewergallery>

index.html

<!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" lang="en" xml:lang="en">
    <head>
        <title>SimpleViewer Gallery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript">
            var flashvars = {};
            flashvars.galleryURL = "gallery.xml";
            var params = {};            
            params.allowfullscreen = true;
            params.allowscriptaccess = "always";
            params.bgcolor = "222222";
            swfobject.embedSWF("simpleviewer.swf", "flashContent", "100%", "100%", "9.0.124", false, flashvars, params);
        </script>
        
        <style type="text/css" media="screen">    
            html, body    { height:100%; }
            body {
    margin:0;
    padding:0;
    overflow:auto;
    color:#52b384;
    font-family:"Courier New", Courier, monospace;
    font-size:14px;
    background-image: url(../layout_bg.jpg);
            }
            a {    
                color:#ff0000;    
            }
            .flashContent {
    background-repeat: no-repeat;
    background-image: url(../layout_bg_gallery.jpg);
    height: auto;
    max-height: 100%;
    max-width: 100%;
    overflow: auto;
    vertical-align: top;
}
        </style>
        
    </head><body><div class="flashContent" id="flashContent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://get.adobe.com/flashplayer/">Get Flash</a></div>
    </body>
</html>

I need to deliver this site to them, this is the only thing holding me up, (I can't believe I can't figure this out, I've spent hours frustrated) so any help would be so extremely appreciated! (thank you thank you, I hope)

Re: flickr: can't align thumbs top left & no scrolling happening

1. I don't want the thumbnails centered on the left, I want them at the top of the left. (see pics below)

SimpleViewer-Pro allows you to specify 'thumbVAlign': http://www.simpleviewer.net/simpleviewe … tml#thumbs

2. Most importantly it's cutting off the image descriptions even though I believe I have everything set to either 100% or scroll="auto" (etc...)

Increasing the height of the SWF in the embed code will give you a larger caption area but will also increase the spacing around the image. If you want to control the caption height independently, you will need SimpleViewer-Pro. Use the 'captionHeight' option.

Felix Turner
SimpleViewer Support Team.

Re: flickr: can't align thumbs top left & no scrolling happening

Thank you for the quick reply! I really do appreciate it.

Increasing the height of the SWF in the embed code will give you a larger caption area

That means this code only?

swfobject.embedSWF("simpleviewer.swf", "flashContent", "700", "600", "9.0.124", false, flashvars, params);

When I change that, (I used a huge number, 1000x1000 as an example, it did the same at 1200x1200 too)

swfobject.embedSWF("simpleviewer.swf", "flashContent", "1000", "1000", "9.0.124",

it doesn't give any more caption room, -it still cuts it off- it just centers the same sized stuff down in the middle of that space- Live example: http://melorasworld.com/crap/site_luisa … llery.html
(on the first picture of the dog, I put the word "end" at the end of the description, for me it's not showing up, I'm assuming that it will be the same for everyone)

This site is for someone else, they're not going to be able to pay $45 for Pro. (college student) Is there really no way to do this with the free version? sad  (the thumb alignment I can live without being able to do, but the caption part is a HUGE bummer. I may have to redo the site without this script, which would just blow)

Last edited by melorasworld (2010-01-19 21:25:22)

Re: flickr: can't align thumbs top left & no scrolling happening

Looks like I was wrong, the caption height is set at 120px for SimpleViewer standard. I'll look into changing this in the next version.

Felix Turner
SimpleViewer Support Team.

Re: flickr: can't align thumbs top left & no scrolling happening

Ah poop! :x Ah well,

that would be awesome for the next version, I hope it works out, (I'll certainly be keeping my eyes open) & thank you regardless- you know, for getting back to me on all this (and for considering adding that one day  wink )

Re: flickr: can't align thumbs top left & no scrolling happening

This issue has been fixed in SimpleViewer v 2.0.2.

Felix Turner
SimpleViewer Support Team.