Topic: Feature Request? Affix Thumbs to bottom of main image.

Hi people,

I don't think this is possible in the current version of SimpleViewer – correct me if I'm wrong.

For various practical reasons, I would be very pleased if it were possible to attach (or lock) the thumbnails to the bottom of the main image in SV galleries. One of the really frustrating things I have found with SV is its tendency to take up huge amounts of room on web pages. So much so that for some reason I often have to use height %s of less than 100 when embedding them with iframes.

Because I want portrait photos to scale to fit smaller screen resolutions, the fixed position layout is simply not an option.

I hope that makes sense. It would be a godsend of a feature.

Thank you.

Last edited by monomaniacpat (2011-06-30 15:19:44)

Re: Feature Request? Affix Thumbs to bottom of main image.

A Fixed Layout would be the only way to overlay the thumbnails on top of the main image (whether at the bottom or elsewhere).
You could still have the portrait-style images scale to fit the image area using imageScaleMode="SCALE" but the gallery would not resize dynamically with the size of the user's browser window.
Please post feature requests in this forum so that they are not overlooked. Thank you.

Steven Speirs
SimpleViewer Support Team.

Re: Feature Request? Affix Thumbs to bottom of main image.

You can place the thumbs under the main image by setting 'thumbPosition' to 'BOTTOM'. Check out this example: http://www.simpleviewer.net/simpleviewe … les/macro/

To have the main image scale to fill the available area, set galleryWidth and galleryHeight to '100%', and set the image size to something large via the 'Image Size' section on the svBuilder-Pro images tab.

For more details on layout, check here: http://www.simpleviewer.net/simpleviewe … guide.html

Felix Turner
SimpleViewer Support Team.

Re: Feature Request? Affix Thumbs to bottom of main image.

Hi,

Many thanks for taking the time to reply. I will post it in the suggestions forum.

Just to be clear: I don't want the thumbs to appear on top of the main image, just have them locked directly beneath when using fluid layout as opposed to fixed. At the moment, the amount of space between the two changes according to how much space there is.

I have tried the fixed width and imageScaleMode="SCALE", but it does not scale under any circumstances, as far as I can tell. If it just scaled according to monitor size rather than browser window size, that would be great, but I can't see how to do that within SimpleViewer.

RE: Height at 100%. Maybe it's something wrong with my website, as I've designed it, but if I set the height to 100% in the iFrame and all divs, I end up with scroll bars.  sad It feels like, but maybe I am wrong, SimpleViewer is push outside of the div container.

Re: Feature Request? Affix Thumbs to bottom of main image.

To guarantee that the thumbnails are always exactly directly below the main image (with no space between them), you would have to ensure that the main images always fill the available space. If you have both landscape and portrait images, then when displaying the portrait images, the thumbnails would be closer to the images than when displaying the landscape images.
You could use the following options:

thumbPosition="BOTTOM"
stageVPadding="0"
imageScaleMode="FILL"

This will ensure that there is never any space between the main image and the thumbnails but at the expense of cropping some images.

I have tried the fixed width and imageScaleMode="SCALE", but it does not scale under any circumstances, as far as I can tell.

If you have a fixed width gallery and use imageScaleMode="SCALE", then you should always be able to see the entire main image (with no cropping) as long as the entire gallery area is visible within the browser window.
To have the entire image visible no matter what size of browser window is being used, then the gallery's dimensions and the dimensions of all parent containers must be defined using percentages rather than fixed pixel values.

Maybe it's something wrong with my website, as I've designed it, but if I set the height to 100% in the iFrame and all divs, I end up with scroll bars.

Please post a URL to your gallery so that we can take a look.

Steven Speirs
SimpleViewer Support Team.

Re: Feature Request? Affix Thumbs to bottom of main image.

Hi,

I think it's probably the site in general and not related to SimpleViewer; I've stripped out a gallery from this example page, and it still does it. Perhaps I need to somehow take into account the padding, header and footer with a CSS property of some kind?


@charset "UTF-8";
/* CSS Document */
*{
    margin:0;
    padding:0;
}
html, body {
    height: 100%;
    font-family: Verdana, Geneva, sans-serif;
    color:#CCC;
    background-color: #F0F0F0;
}
a img {
    border: none;
    display: block;  
    margin-left: auto;  
    margin-right: auto;
}
#site-container {
    height: 100%;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    background-color: #FFF;
}
#banner {
    padding-top: 15px;
    padding-bottom: 10px;
    background-color: #F0F0F0;
}
#menu a:link {
    color: #000;
    text-decoration: none;
}
#menu a:visited {
    color: #000;
    text-decoration: inherit;
}
#menu a:hover {
    text-decoration: none;
    width: 100%;
    background-color: #999;
    color: #FFF;
}
#menu a:active {
    background-color: #F0F0F0;
}
#menu {
    color: #000;
    background-color: #F0F0F0;
    width: 100%;
    font-size: 10px;
    width: auto;
    height: 25px;
    line-height: 25px;
}
#site-content {
    height: 100%;
    width: 100%;
    background-color: inherit;
    clear: both;
}
#intro {
    color: #000;
    background-color: inherit;
    font-size: 12px;
    text-align: justify;
    line-height: 1.8em;
    width: 40em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;
    margin-top: 50px;
}
#gallery a:link {
    color: #000;
    text-decoration: none;
}
#gallery a:hover {
    text-decoration: underline;
}
#gallery a:visited {
    color: #666;
}
#gallery img {
    border: 2px solid #CCC;
    padding:5px;
    background:#FFF;
}
#gallery {
    color: #000;
    background-color: #FFF;
    font-size: 12px;
    text-align: justify;
    line-height: 1.8em;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 75px;
    min-width: 725px;
    /*-webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius: 15px 15px 0px 0px;*/
}
/**ENTER BUTTON**/
#enter a {
    width: 125px;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    display:block;
    /**Opacity of icon**/
    filter:alpha(opacity=100);
    opacity:1;
}

#enter a:hover,
#enter a:active,
#enter a:focus {
filter:alpha(opacity=60);
opacity: 10;}

#copyright {
    font-size: 11px;
    background-color: #F0F0F0;
    text-align: center;
    line-height: 3.5em;
    width: 100%;
/*    height: 100%;
*/    visibility: visible;
    display: block;
    left: 0;
}

Re: Feature Request? Affix Thumbs to bottom of main image.

You have some <div>s with percentage heights, others with fixed heights (eg. #menu) and a certain amount of padding, also.
I do not know which <div>s are nested within others so it is difficult to figure it out from the CSS alone.
However, the solution is, indeed, to sort out the CSS for all elements on your page.

Steven Speirs
SimpleViewer Support Team.

Re: Feature Request? Affix Thumbs to bottom of main image.

Right, well, I've rebuilt a dummy page based on this guide: http://www.lucidgreen.net/webbybooth/?p=241

That way there is no scrolling with no content, such as the gallery, as I linked to the problem above.

But, add in the gallery and BOOM, it takes up 100% of the browser window, unlike the blank space before, which respects the height properties of its parent div.

So here's the page without a gallery:

http://www.patrickgrahamphotography.co. … llery.html

And here it is WITH a gallery:

http://www.patrickgrahamphotography.co. … llery.html

Is there any way to make simpleviewer respect the height properties without resorting to the inflexible fixed layout? Previously my solution was to set the iframe to 90%, but this is a faff, as it's different for portrait and landscape.

Last edited by monomaniacpat (2011-07-01 19:07:09)

Re: Feature Request? Affix Thumbs to bottom of main image.

Take a look at the note entitled 'Using Percentage Heights' in this section of the SimpleViewer Embedding Guide.
http://simpleviewer.net/simpleviewer/su … html#embed
Hopefully it will help.

Steven Speirs
SimpleViewer Support Team.

Re: Feature Request? Affix Thumbs to bottom of main image.

Here is an example of a resizeable SimpleViewer gallery with both a header and a footer and no scroll bars.
http://simpleviewer.net/simpleviewer/su … /gallery1/
This example (and others) is downloadable from here: http://simpleviewer.net/simpleviewer/su … #resizable
You can examine and modify the code to suit your needs (for example changing the height and/or content of both the header and the footer and exchanging the sample gallery for your own).

Steven Speirs
SimpleViewer Support Team.

Re: Feature Request? Affix Thumbs to bottom of main image.

Thanks. I'll look into it again tomorrow.

Re: Feature Request? Affix Thumbs to bottom of main image.

OK, the first thing about declaring %s in the html doesn't work.

The second one looks very promising, on the other hand! But, how do I go about editing my own galleries into that? I wanted to just change the background colour of the gallery, so I opened the gallery in svBuilder and it over-wrote the whole page including all that javascript that seems to be handling the footer and header.

I can't remember now (it was a year ago) why I started using iframes, but from this little experiment it appears to make handling the files a great deal easier... (Not constantly over-writing things.)

Re: Feature Request? Affix Thumbs to bottom of main image.

If you are using the 'gallery1' folder from the 'vertical-template' example and you wish to swap the sample gallery for your own, then, rather than open the 'gallery1' folder in svBuilder-Pro and edit it (which will, as you have discovered, overwrite the 'index.html' file containing the JavaScript code):
(1) Create your gallery in svBuilder-Pro first and in a separate folder.
(2) Copy and paste the 'gallery.xml' file and the 'images' and 'thumbs' folders from your own gallery folder into the 'gallery1' folder (overwriting the existing file and folders from the sample gallery).

Alternatively, if you would like to use an <iframe> to load an external gallery, then, in the 'gallery1/index.html' file, you could:
(1) Remove the line:

SV.simpleviewer.load('sv-container', '100%', '100%', '222222',true);

(2) Change the line:

<div id="sv-container"></div>

... to:

<iframe src="gallery_folder/index.html" height="100%" width="100%" frameborder="0" scrolling="no"></iframe>

... where 'gallery_folder' would be the name of your own external gallery folder.

Steven Speirs
SimpleViewer Support Team.

Re: Feature Request? Affix Thumbs to bottom of main image.

Awesome! Thanks very, very, very much!

My site is now re-written with the javascript and is fully operational on mobile browsers and less buggy on desktop. big_smile

Will still request the attachment of thumbnails, as I think it would look a little neater, but overall very happy!