Topic: Space on top and below the main image

Hi Felix;
I love your simpleviewer.  I would love to use to build my site with photograph but I can't seem to control the area on top and below the main image....  let's say that I am trying to use only horizontally oriented images...    I do not want to re-size the main image but to reduce the space between the border on top and where the simpleviewer start and same thing at the bottom.    I need to fit in simpleviewer with a nice header and footer and leave most the the main space in the center of the page to display my photographs but simpleviewer leavers too much space on top and bottom. 

Is there a way to control this space with the free version or do I need to buy the source code?  And if I need to buy, would you provide simple instructions so that I know which line of code is the one I can play with to modify this space? (I have good knowlege in HTML but I am not a developer or programmer).

Thanks!

Re: Space on top and below the main image

I'm not 100% sure that this is what you're talking about, but if I understand you correctly you want to adjust the numbers in blue (below) to modify the size of the footer & header (in your html/index file):

<style type="text/css">   
    body {
        background-color: #000000;
        font: .8em/1.3em verdana,arial,helvetica,sans-serif;
    }

    #header {
        width: 100%;
        height: 10px;       
    }
   
    #footer {
        width: 100%;
        height: 80px;       
    }
   
    #flashcontent {
        width: 100%;
        height: 550px;       
    }
       
</style>

I suggest just changing the numbers till ya get what ya want.
if that's what you needed help with...

hope this helps & good luck.

Re: Space on top and below the main image

I'm not 100% sure that this is what you're talking about, but if I understand you correctly you want to adjust the numbers in blue (below) to modify the size of the footer & header (in your html/index file):

<style type="text/css">   
    body {
        background-color: #000000;
        font: .8em/1.3em verdana,arial,helvetica,sans-serif;
    }

    #header {
        width: 100%;
        height: 10px;       
    }
   
    #footer {
        width: 100%;
        height: 80px;       
    }
   
    #flashcontent {
        width: 100%;
        height: 550px;       
    }
       
</style>

I suggest just changing the numbers till ya get what ya want.
if that's what you needed help with...

hope this helps & good luck.

Hmm does that even work? Doesn't seem to work for me

[url]http://www.photographybykevin.net[/url]

Simple Viewer FAQ By Kevin
[url]http://knguyentu.com/wordpress/photography-by-kevin/simpleviewer-flash-photo-gallery/[/url]

Re: Space on top and below the main image

Hmm does that even work? Doesn't seem to work for me

Here's an experiment I did.
Here's a link to a page with 10px header & footer:

http://sidemouse.com/test/10.html

once you go there you'll see a link at the top for the exact same page but with 100px header & footer.

strange though on the 100px footer it's smaller than the 10px footer
header re-size seems to work fine though though... (fixed - see next post)

you could also play with the flash content size:

#flashcontent {
width: 100%;
height: 500px;
}

in my example the flash content on both pages is set to 500px


just throwin' some ideas out there - don't know if this is the proper solution...

Re: Space on top and below the main image

strange though on the 100px footer it's smaller than the 10px footer
header re-size seems to work fine though though...

just figured out why this was & "fixed" the pages

you have to have the <div id="header"> & <div id="footer"> info in your html

check my source to see what I mean...
on my first try I left this out of my page:

<div id="footer">
<p align="center"><big><strong><font color="#000000" face="Arial">this is 10px header &amp footer - go to 100px -><a href="http://sidemouse.com/test/100.html">100.html</a></font></strong></big></p>
</div>

Re: Space on top and below the main image

Hi Sidemouse;

Thanks for replying to my question.

I am able to modify the height and width of my header and footer without problem...   

The problem is the space between where the simpleviewer starts (black area in your example) and where the main image starts...    I have  noticed that the only way to may simpleviewer bigger or smaller is by changing the simpleviewer dimensions... however this just reduces the size on my images (which I don't want to) to make the whole simpleviewer area smaller...

I put an example of what I am trying to do here to see if this helps
http://www.aleblue.com/simpleviewer.htm

I appreciate any guidance you or any other simpleviewers experts could provide on this!

Thanks & best regards
Alejandra

Re: Space on top and below the main image

I believe I have the exact same issue that aleblue has (please correct me if I'm wrong.)

The issue is not with the HTML or CSS, but the SWF itself. There is a sample at http://www.airtightinteractive.com/simp … ample.html that talks about this, but it only refers to the issue/solution you guys have mentioned.

The issue I've found is that (and I'm guessing) SV always wants to allow for enough space for both landscape and portrait images. This may not be the actual issue, but my take on it... there's this bit of code:
maxImageDimension="640"

That forces the image area to be square. It allows for the max image dimension to be 640 for both X and Y. So if I have an image that's 640w x 480h, SV forces 30px padding at the top and bottom of the image. If I go into the SWF embed code and change the size of the SWF to 640x480, it then scales the image to be 480 wide as well.

Edit: I found this thread first, after searching. I found a couple others with the exact same question. One did include a halfway helpful reply by felix: http://www.airtightinteractive.com/foru … c.php?t=40

Hi,

SimpleViewer is designed to show both tall and wide images, therefore the image area is square. If you are showing only wide images, this will result in blank space above and below the image.

There is no way to alter this in the free version of SimpleViewer. To modify the SimpleViewer layout you would need to purchase and modify the SimpleViewer source code.

I have purchased SimpleViewer. Any tips on exactly what I need to do with the source to make it work? I've tried a lot of things, but still no luck sad

Re: Space on top and below the main image

Dear snokarver
You are right on the money... this is the problem that I am having. I also saw that message from Felix and that is why I sent him a note to better understand how to do this if I were to buy SimpleViewer....  apparently you bought it and still have the same problem.

I would like to understand simple instructions on how to control this if I buy SimpleViewer... for what I'm trying to do, if I could just know how to fix this I would buy the source code immediatly! 

Felix I think simpleviewer is a great tool and I will gladly buy the code if you just give us some guidance on how to fix this.

Thanks

Re: Space on top and below the main image

Hi,

The free version of SimleViewer is designed to accomodate tall and wide images, therefore the image viewing are is square. There is no way around this.

If you have purchased the SimpleViewer source code, you can modify this behaviour by making the following edit (from the readme file that comes with the source code):

How can I view landscape (wider than tall) images  without any vertical spacing?
-------------------------------------------------------------------------------
In viewer.as, at line 373, change this:

//get min of width/height
if (displayWidth < displayHeight){
    displayDim = displayWidth;
}else{
    displayDim = displayHeight;
}   

To this:

displayDim = displayWidth;

Felix Turner
SimpleViewer Support Team.

Re: Space on top and below the main image

Thanks Felix! That must be a fairly recent addition to the readme. It's not in mine from Dec '05. I'll dig around and see if the 1.7.1 source is available to those who purchased 1.7.

Re: Space on top and below the main image

Above it says:

"In viewer.as, at line 373, change this:"

I purchased the source code today yet only see:

Image.as
ImageArea.as
Options.as
RolloverButton.as
StageManager.as
Thumb.as
ThumbArea.as
XMLManager.as

Like the above poster I want to kill the black space above and below the main image

Regards

Martin

Re: Space on top and below the main image

Edit line 179 in Image.as like so:

imgY =  0; //Math.round((h-imgH)/2) + fw;

This sets the Y (vertical) position of the image to the top and preserves the original setting in a comment in case you want to undo what you've done.

Don't forget to republish. wink

Cheers,
Craig

Re: Space on top and below the main image

That works for me. Only problem is I still have space above the thumbnails. Where can I change that?

Example http://www.deoudeduin.nl/8-persoons-appartement

Gerard

Re: Space on top and below the main image

The free version of SimleViewer is designed to accomodate tall and wide images, therefore the image viewing are is square. There is no way around this.

This is no longer the case. SimpleViewer 1.8 can display wide images with no spacing above the image. Set the maxImageWidth and maxImageHeight values to match those of your images in gallery.xml.

If you have purchase SimpleViewer-Pro and want to layout your galley exactly to the pixel, set fixedLayout = true in Options.as, then use the Fixed Layout Positions at the bottom of the Options.as file to specify your layout. Check the SimpleViewer-PRO documentaion for details: http://www.airtightinteractive.com/simp … ation.html

Felix Turner
SimpleViewer Support Team.