Topic: Auto resizing problem in Wordpress..

Hi,

I embedded a gallery to a page in Wordpress 3.3.3 using SV-Builder-Pro 2.3.0.
And I'm using a theme from Graph Paper Press called Widescreen.

Now then I change my screen size it's not working as it should.
See the test page:http://sw.karimphoto.com/?page_id=32

I understand that the problem may be in my theme.

Anyone knows anything about this or do i have to scrap my theme?

Thanks,
Karim

<!--START SIMPLEVIEWER EMBED.-->

<script type="text/javascript" src="http://sw.karimphoto.com/test/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.baseURL = "http://sw.karimphoto.com/test/";
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "800px", "700px", "transparent", true, flashvars);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>SimpleViewer Gallery</title>
</head>

<body>

    <!--START SIMPLEVIEWER EMBED -->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '100%', '100%', 'transparent', true);
    });
    </script>
    <div id="sv-container"></div>
    <!--END SIMPLEVIEWER EMBED -->

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

<simpleviewergallery 

    maxImageWidth="800"
    maxImageHeight="700"
    imageQuality="60"
    thumbWidth="90"
    thumbHeight="65"
    thumbQuality="50"
    useFlickr="false"
    resizeOnImport="true"
    cropToFit="false"
    thumbPosition="BOTTOM"
    thumbColumns="8"
    thumbRows="1"
    frameWidth="1"
    backgroundColor="000000"
    frameColor="333333"
    thumbNavBackColor="000000"
    thumbNavStyle="CIRCLE"
    thumbNavPosition="CENTER"
    thumbNavColor="999999"
    thumbNavPadding="10"
    captionPosition="OVERLAY_BOTTOM"
    titlePosition="TOP"
    floatTitle="true"
    titlePadding="1"
    titleDropShadow="false"
    showAutoPlayStatus="false"
    enableLooping="true"
    backgroundTransparent="true"
    showOpenButton="false"
    imageNavStyle="CURSOR"
    thumbPadding="2"
    backgroundScale="FILL"
    imagePreloading="PAGE"
    imageSmoothing="false"
    thumbPreloading="PAGE"
    doThumbPopOut="true"
    thumbLoadBarHeight="10"
    showThumbVisited="true"
    titleFontSize="18"
    titleTextAlignment="LEFT"
    imageCornerRadius="10"
    imageBackOpacity=""
    flickrShowTitle="false"
    flickrShowDescription="false"
    loopAudio="false"
    autoPlayThumbs="false"
    floatCaption="false"
    textColor="999999"
    buttonBarBackColor="000000"
    floatButtonBar="false"
    showFullscreenButton="false"
    buttonBarColor="999999"
    buttonBarHoverColor="999999"
    titleFontColor="999999"
    captionFontColor="CCCCCC"
    showBackButton="false"
    backButtonText="BACK"
    backButtonY="50"
    backButtonFontSize="14"
    backButtonURL=""
    backButtonFontColor="999999"
    captionTextAlignment="LEFT"
    thumbLoadBrightness="0.9"
    thumbFrameWidth="0"
    thumbHoverFrameWidth="2"
    thumbCornerRadius="1"
    thumbFrameStyle="ROUNDED"

>
  <image imageURL="images/_MG_1243.jpg"
    thumbURL="thumbs/_MG_1243.jpg"
    linkURL="images/_MG_1243.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/_MG_1253.jpg"
    thumbURL="thumbs/_MG_1253.jpg"
    linkURL="images/_MG_1253.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/_MG_1265.jpg"
    thumbURL="thumbs/_MG_1265.jpg"
    linkURL="images/_MG_1265.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/_MG_1164.jpg"
    thumbURL="thumbs/_MG_1164.jpg"
    linkURL="images/_MG_1164.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
</simpleviewergallery>

Last edited by flywings (2012-06-03 12:44:16)

Re: Auto resizing problem in Wordpress..

In order for a SimpleViewer gallery to resize dynamically with the size of the user's browser window, the gallery's dimensions (and those of all parent containers) must be expressed as percentages. If anywhere up the chain, an absolute pixel value is used, then this will fix the gallery's size.
For example, if the gallery's size is 100% x 100% of the total browser window, then it will scale dynamically as the user changes the window size (to always be 100% x 100% of the browser window).
However, if the gallery's size is 100% x 100% but it is in a parent container whose size is 600px x 600px, then the gallery will always be displayed at 600px x 600px (as 100% of 600px is always 600px).

Therefore, set your gallery's dimensions as percentages.
However, with a WordPress theme, the gallery may be placed in a container whose size you have no control over and is expressed as absolute pixel values. There is little you can do other than look for a different theme which uses a fluid layout.

Steven Speirs
SimpleViewer Support Team.

Re: Auto resizing problem in Wordpress..

Thanks for your quick reply.

So maybe it's better to start looking for a different theme then.

Thanks again.

And if anyone know a good theme with a customizable vertical menu system and fluid layout, pleeease let me know.
Like this menu http://demo.graphpaperpress.com/widescreen/ or http://karimphoto.com/

Last edited by flywings (2012-06-04 08:35:14)

Re: Auto resizing problem in Wordpress..

Try a web search with terms such as 'WordPress fluid theme'.
However, without knowing exactly how the themes layout the pages, there is no guarantee that any specific theme will work.
It will be trial and error, I'm afraid.

Steven Speirs
SimpleViewer Support Team.