• Registered: 2011-02-27
  • Posts: 15

Topic: updated gallery: thumbnails cut off, enlarged view not showing in page

Upon updating my galleries, the new thumbnail group gets cut off on the page vertically and the enlarged image does not show except if I use full screen mode.

http://art925.com/rings.html

http://art925.com/commissions.html

Using recently updated V.2 svBuilder basic.

I have looked at the Vertical Resize code example, but I am not sure how to edit it or where to put it.

Thank you for any help.

Last edited by naomi (2013-02-08 23:24:57)

  • Registered: 2008-07-06
  • Posts: 6,311

Re: updated gallery: thumbnails cut off, enlarged view not showing in page

I have looked at the Vertical Resize code example, but I am not sure how to edit it or where to put it.

The Vertical Resizable Gallery example may not be ideal for the layout of your page if you wish to keep your header and footer (including the 'art', '925' and 'info' links) as they currently are. With the current size of your header and footer, there will be little room remaining in between for your SimpleViewer gallery, especially on a monitor of limited height such as a laptop screen.
It might be wise to keep your SimpleViewer gallery's height as an absolute pixel value.

Upon updating my galleries, the new thumbnail group gets cut off on the page vertically and the enlarged image does not show except if I use full screen mode.

Currently, all you need to do to see the remainder of your gallery is scroll down your page using the vertical scroll bar in your browser.

I have looked at the Vertical Resize code example, but I am not sure how to edit it or where to put it.

If you would like to try the Vertical Resizable Gallery example, copy the code below into a file named, for example, 'main.html'.
Set the header and footer height in the CSS of the page and swap the header and footer content in the page with your own content. Then just place the file inside a gallery folder and open the file in a browser.

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" media="screen" href="../css/sv.vertical.template.css" />
    <title>SimpleViewer Gallery 1</title>
    <style type="text/css">
        html, body { height: 100%; overflow: hidden; }
        body {            
          margin: 0;
          padding: 0;
          background-color: #222;
          color: #666;
          font-family: sans-serif;
          font-size: 20px;        
        }
        a {    
          color: #ccc;
        }
        #header {
          text-align: center;
          background-color: #333;
          width: 100%;
          height: 20px;
          padding: 10px 0;
        }
        #footer {
          text-align: center;
          background-color: #333;
          color: #fff;
          width: 100%;
          height: 20px;
          padding: 10px 0;
          position: relative;
          bottom: 0;
          left: 0;
        }
        #flashcontent {
          width: 100%;
          height: 600px;
        }    
    </style>
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    function doLayout() {
        var winHeight, headerHeight, footerHeight;
        winHeight = window.innerHeight ? window.innerHeight : $(window).height();
        headerHeight = $('#header').outerHeight();
        footerHeight = $('#footer').outerHeight();
        var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight);
        $('#flashContent').height(newH);
    }
    $(document).ready(function () {
        doLayout();       
        $(window).bind('resize', doLayout);
        simpleviewer.load('sv-container', '100%', '100%', '222222',true);
    });
    </script>
</head>
<body>
    <div id="header">Header content goes here.</div>
    <div id="flashContent">
        <div id="sv-container"></div>
    </div>
    <div id="footer">Footer content goes here.</div>
</body>
</html>
Steven Speirs
SimpleViewer Support Team
  • Registered: 2011-02-27
  • Posts: 15

Re: updated gallery: thumbnails cut off, enlarged view not showing in page

Thank you very much for your help. In fact, I went with the fixed frame option and made it 1000x700 px. Not sure if that is what is recommended for multiple device viewing, but it was the easiest solution. I don't understand why it worked fine in the older version of SV, but had problems in this newer V.2.

And on another topic, to see my images in a new _blank screen, the automated URL link made by SV never worked, so I just deleted the link name and left it blank "".

Both are quick fix solutions, but seem like both issues should have worked without the fix.

Thanks again.

  • Registered: 2008-07-06
  • Posts: 6,311

Re: updated gallery: thumbnails cut off, enlarged view not showing in page

In fact, I went with the fixed frame option and made it 1000x700 px. Not sure if that is what is recommended for multiple device viewing, but it was the easiest solution.

This may not be really a problem as many web pages have vertical scroll bars and, with the heights of your header and footer, it may be the best solution for your own web page

I don't understand why it worked fine in the older version of SV, but had problems in this newer V.2.

It is possible to create a fixed size or dynamically resizing gallery with the current version of SimpleViewer-Pro (v2.3.1) but as long as you have found a solution which works for you, that is great.

And on another topic, to see my images in a new _blank screen, the automated URL link made by SV never worked, so I just deleted the link name and left it blank "".

Selecting the linkTarget from the drop-down menu on the 'Images' tab in svBuilder-Pro should work fine.
If you have an example of the linkTarget not working correctly, please let me know so that I can investigate further.
However, once again, I am glad that you have found a solution to your problem (though using an empty string as the linkTarget should force SimpleViewer to use the default value of '_blank' and so "" should function the same as "_blank").

Steven Speirs
SimpleViewer Support Team