• Registered: 2010-11-27
  • Posts: 80

Topic: i can't make a html page with fluid svmanager

hallo,

i have tried during days but don't understand how to have a fluid svmanager galery between a header and a footer with footer at bottom of any display (ie:1680x1050 or 1024x600 eeepc) and galery extending from header to footer.
I have done a simple code with flashy colors to see header, content, footer and body.
can you please help me to replace the 550x367 image with :
http://www.labrophotography.com/svmanager/g5/
in fluid mode. I'd like mobile is working too. so, if any option must be enabled or a resolution set somewhere please advise

thanks you
best regards

CODE :
<!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>Essai</title>

<style type="text/css">
<!--


* {padding:0; margin:0}

body  {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #FFFFFF;
    background-color: #0F0;
}

   
#header {
    color: #FF3;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    padding: 0.00;
    text-align: center;
    border-top-width: 0px;
    border-right-width: 0px;
    width: 100%;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border-left-width: 0px;    /*height: 100px;*/
    height: 70px;
    background-color: #CCC;
}


#header_content {
    width: 98%;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 10px;
}


#gallery {
    text-align: center !important;
    padding: 0.00 !important;
    width: 100% !important;
    background-color: #1D1D1D;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}



#flashcontent {
    /*background-color: #d5d3c3;*/
    border: 0px solid #68675f;
    padding: 0;
    width: 550px;
    /*color: inherit;*/
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}


#footer {
    clear:both;
    margin-top:0px;
    font-size:12px;
    color: #000;
    /*text-transform:uppercase;
    letter-spacing:1px;*/
    width: 100%;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #0FF;
    height: 50px;
}

#footer a {
    text-decoration:none;
    color:#989898;
}
#footer a:hover {
    text-decoration:underline;
    color:#cccccc;
}

#footer_content {
    width: 98%;
    text-transform: none;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 10px;
}


-->
</style>


</head>

<body>

<div id="header">
    <div id="header_content">
        <p>Hallo World</p>
    </div> <!-- header_content -->   
    <div style=" clear:both;"></div>
</div> <!-- ends header -->
   
   
<div id="gallery">
    <div id="flashcontent">
        <img src="D30_8235_1.jpg" width="550" height="367" alt="image" />
    </div> <!-- flashcontent -->
</div> <!-- gallery -->


<div id="footer">
    <div id="footer_content">
        <p>My Footer</p>
    </div> <!-- footer content -->
</div> <!-- FOOTER -->

</body>
</html>

  • jack
  • Moderator
  • Offline
  • Registered: 2007-08-14
  • Posts: 886

Re: i can't make a html page with fluid svmanager

Have you tried an iframe tag as in:

<div id="gallery">
  <iframe src="svmanager/g5/index.php" width="100%" height="100%" frameborder="0" scrolling="no">
    <p>You can put a message here which will show in a browser with no iframe support.</p>
  </iframe>
</div>

You might need to juggle around with percentage and fixed heights and widths to get the effect you want.

jack

Jack Hardie
SimpleViewer Support Team.
  • Registered: 2010-11-27
  • Posts: 80

Re: i can't make a html page with fluid svmanager

hallo jack,
thanks for tip.
I am not expert but read that iframes are not advised especially if i expect to see my images on mobile,...
in fact, here is what i did with the turning gate stage ce in liquid mode :

http://www.labrophotography.com/galleries/holidays/
and
http://www.labrophotography.com/stagece_simpleviewer/

nice, isn't it ? but it uses free simpleviewer and even more "ttg" simpleviewer version.

turning gate uses free simpleviewer. he doesn't want to develop for svbuilder and svmanager so I am a little blocked and come back to dreaweaver but suffer a lot.

I have looked the ttg code but it is awful with jquery, viewport,...

so i wonder if you don't have a code to add to my code attached above to make it work with svmanager and liquid. if footer is too hard, no need actually, just a 70px header and the remaining space of my screen filled with svmanager g5 gallery

kind regards
marc

  • Registered: 2010-11-27
  • Posts: 80

Re: i can't make a html page with fluid svmanager

by the way, in the meantime, just to try, when you display source code of :
http://www.labrophotography.com/galleries/holidays/

do you see what i could edit manually to link to g5 gallery ?

main code is :
<!-- Begin Simpleviewer-2 Embed -->
<script type="text/javascript">

var flashvars = {};
    flashvars.galleryURL = "gallery.xml";
    flashvars.baseURL="simpleviewer/";

var params = {};
    params.allowfullscreen = true;
    params.allowscriptaccess = "always";
    params.bgcolor = "#000000";

var attributes = false;

swfobject.embedSWF("simpleviewer/svcore/swf/simpleviewer.swf", "liquid", "100%", "100%", "9.0.0", "resources/js/expressInstall.swf", flashvars, params, attributes);
</script>
<div id="liquid"><p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p></div>   
<!-- End Simpleviewer-2 Embed -->

  • jack
  • Moderator
  • Offline
  • Registered: 2007-08-14
  • Posts: 886

Re: i can't make a html page with fluid svmanager

If you don't want to use an iframe, have you tried the method explained under Using an external gallery folder in the SimpleViewer embedding guide?

In your case, it would be something like this:

<!--START SIMPLEVIEWER EMBED.-->
  <script type="text/javascript" src="svmanager/g5/svcore/js/simpleviewer.js"></script>
  <script type="text/javascript">
    var flashvars = {};
    flashvars.baseURL = "http://www.labrophotography.com/svmanager/g5/";
    jQuery(document).ready(function () {
      SV.simpleviewer.load('sv-container', '100%', '100%', '222222', true, flashvars);
      });
   </script>
   <div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

jack

Jack Hardie
SimpleViewer Support Team.
  • Registered: 2010-11-27
  • Posts: 80

Re: i can't make a html page with fluid svmanager

thanks for efforts jack
unfortunately, your links don't mention svmanager html pages embedding.
i have created a html blank page and copied your code and it doesn't work.

perhaps jquery is missing ? don't forget that with svmanager i have nothing on my pc !

I have just found :
http://www.simpleviewer.net/simpleviewe … /gallery1/

it looks like what i am looking for :
- footer goes at bottom of screen
- slideshow fills the entire screen

is it fluid example ? i don't recognize the code you refered previously with simpleviewer.load...
do you recommend this method

best regards

  • jack
  • Moderator
  • Offline
  • Registered: 2007-08-14
  • Posts: 886

Re: i can't make a html page with fluid svmanager

The only difference between a regular SimpleViewer gallery and a SimpleViewer gallery managed by svManager is that svManager provides you with an index.php file rather than the usual index.html file to embed the gallery. Reason is, so svManager can set stuff like background color. So if you look at one of your galleries on the server with ftp then it should look like the sample gallery that comes with the SimpleViewer download.

You don't have to use the index.php file. You can create your own index.html and put it in svmanager/plugins/simpleviewer2/sv2master. It will then be copied into all new galleries.

If I'm understanding correctly then you are providing your own index.html file(s) so the advice on this web site about embedding SimpleViewer should apply to your case.

Sorry if I'm telling you what you already know – just trying to establish a base for communication.

Maybe some of the problem is caused by the different versions of SimpleViewer and svManager? The way of embedding SimpleViewer in an html page has changed a bit between versions. Would it be worth upgrading everything so you know you are in synch with the advice on the web site?

jack

Jack Hardie
SimpleViewer Support Team.
  • Registered: 2010-11-27
  • Posts: 80

Re: i can't make a html page with fluid svmanager

hallo jack,
sorry to waste your time so much but I really have problems with svmanager. I can't embed it. not sure update will solve my poor understanding of embedding.

To avoid long discussions, I’d like to have on my pc a folder “c:\galeries\holidays” with all the resources I need (jquery ??? if yes please indicate where to find it) and a page called index.html with a 20px height header and a 20px height footer WITH FOOTER BLOCKED AT BOTTOM OF ALL DISPLAYS (liquid !) and svmanager/g5 galery fluid (liquid) between these header and footer.
Iframe is not welcome for mobile preview.

If you can provide me such code I would be very happy because the only thing I can do with svanager is to connect directly to my svmanager gallery page.

if locally i can run this index.html page, i can upload with filezilla the folder "holidays" on labrophotography.com with all my other galeries (animals, flowers,...), not in svmanager folder.

Kind regards

I think the look would look like : http://www.simpleviewer.net/simpleviewe … /gallery1/




marc

  • jack
  • Moderator
  • Offline
  • Registered: 2007-08-14
  • Posts: 886

Re: i can't make a html page with fluid svmanager

Is this the kind of thing you are looking for?
www dot jhardie dot com/svmembed/

I installed svManager in www dot jhardie dot com/svmembed/svmanager/

I created a gallery in svManager.

Then I created a new index.html file www dot jhardie dot com/svmembed/index.html

I lifted the code from here: http://www.simpleviewer.net/simpleviewe … /gallery1/

I changed the links so they pointed to g1.

I added the baseUrl parameter as in my earlier post.

You can do a view source to see the code in the index.html file. If it's what you are looking for then you should be able to adapt it to your case but you'll need a little javascript knowledge to understand properly what is going on.

A few other comments might be useful.

perhaps jquery is missing

jQuery is bundled-in with SimpleViewer. And it is in the master folder that svManager uses to create new galleries. The code $(whatever) and jQuery(whatever) is interchangeable. The jQuery form is used in later releases of SimpleViewer.

I’d like to have on my pc a folder “c:\galeries\holidays” with all the resources I need

You can download the gallery folders created by svManager to your desktop using ftp. The galleries are stand-alone. They do not need svManager to view them.

jack

Jack Hardie
SimpleViewer Support Team.
  • Registered: 2010-11-27
  • Posts: 80

Re: i can't make a html page with fluid svmanager

hi jack,
it is exactly what i need ! many thanks.
i understand nothing to php and have no idea wher to find the explanations but if i can copy paste this small code to all my galeries and it works it is perfect.
as explained, when i use lightroom and simpleviewer everything is on my pc, jquery,...
so i didn't understand with svmanager how to find all these things (copy paste from a local simpleviewer,...).
your code seems to answer to my questions because it links to a jquery... installed on the svmanager.

even with your 600px for slideshow height your slideshow is liquid full screen between header and footer. perfect.

Now, I play a little bit with it and I intend to purchase postacer, autoviewer,... and make the same

best regards
marc

  • Registered: 2010-11-27
  • Posts: 80

Re: i can't make a html page with fluid svmanager

hallo jack,

do i need :
<link rel="stylesheet" type="text/css" media="screen" href="../css/sv.vertical.template.css" />
to make it work ?
i have opened and it contains lot of code and another link... which sjould become complex just to insert a slideshow between header and footer

and jquery ? useful for your dolayout code ?

best regards
marc

  • jack
  • Moderator
  • Offline
  • Registered: 2007-08-14
  • Posts: 886

Re: i can't make a html page with fluid svmanager

<link rel="stylesheet" type="text/css" media="screen" href="../css/sv.vertical.template.css" />

No you don't need that. I forgot to delete it when I copied the code from SimpleViewer.net. Sorry to confuse you. For the example, I just set a few simple styles directly in the head of index.html.

and jquery ? useful for your dolayout code ?

SimpleViewer 2 always uses jQuery. You can't show a gallery without it. In the example code, you'll see a link

<script type="text/javascript" src="svmanager/g1/svcore/js/jquery-1.4.4.min.js"></script>

That's jQuery.

By the way, I removed the links to the example from my earlier post since I don't want Google to follow them. The example is still there if you need to look at it.

jack

Jack Hardie
SimpleViewer Support Team.