Topic: 1

Hi,

I have a sv slide show gallery I would like to call from a jquery drop down menu in a navigation page. 

The sv gallery, index.html file loads into the jquery navigation page but over-writes the heading and nav menu.  Clk the Firefox back btn and the nav menu reloads.

What do I have to do to load the sv gallery into the navigation page below nav menu?   

Thanks,

Chfox

Re: 1

The sv gallery, index.html file loads into the jquery navigation page but over-writes the heading and nav menu.

Are you loading the 'index.html' page into an iframe?
If so, then the position of the iframe on your main page should be the same no matter what you load into it (whether it is your SimpleViewer gallery or any other web page).
If you are copying and pasting the entire contents of the 'index.html' page into your main page, then you should copy and paste only the recommended  embedding code (found here) instead.

Otherwise, it sounds like you may have a problem positioning your gallery on your web page.
The gallery is embedded into a container div and the gallery should appear on your page wherever you place the div.

To see if this is related to your SimpleViewer gallery, try taking the gallery out of the equation and see if you have the same problem with a blank div (with a background color for visual confirmation) with the same dimensions as your gallery.
For example, try replacing your gallery's embedding code with the following (making sure that the dimensions of the div match those of your gallery):

<div style="width: 100%; height: 100%; background-color: #ff0000;"></div>

If your gallery's dimensions are currently expressed as percentages, then you could try setting them as fixed pixel values instead to see if this makes a difference.

If you continue to experience difficulties, please post the URL to your web page so that I can take a look for myself and hopefully help further.

Steven Speirs
SimpleViewer Support Team.

Re: 1

Steven Speirs wrote:

The sv gallery, index.html file loads into the jquery navigation page but over-writes the heading and nav menu.

Are you loading the 'index.html' page into an iframe?
If so, then the position of the iframe on your main page should be the same no matter what you load into it (whether it is your SimpleViewer gallery or any other web page).
If you are copying and pasting the entire contents of the 'index.html' page into your main page, then you should copy and paste only the recommended  embedding code (found here) instead.

Otherwise, it sounds like you may have a problem positioning your gallery on your web page.
The gallery is embedded into a container div and the gallery should appear on your page wherever you place the div.

To see if this is related to your SimpleViewer gallery, try taking the gallery out of the equation and see if you have the same problem with a blank div (with a background color for visual confirmation) with the same dimensions as your gallery.
For example, try replacing your gallery's embedding code with the following (making sure that the dimensions of the div match those of your gallery):

<div style="width: 100%; height: 100%; background-color: #ff0000;"></div>

If your gallery's dimensions are currently expressed as percentages, then you could try setting them as fixed pixel values instead to see if this makes a difference.

If you continue to experience difficulties, please post the URL to your web page so that I can take a look for myself and hopefully help further.


Hi Steven,

Thanks for your quick response.  Here is a link to the site:  chfox.com/testSite/

The navigation page, index.html, contains the following code-

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Chuck Fox Photographer</title>
        <link rel="stylesheet" type="text/css" href="includes/menu.css" />
        <script type="text/javascript" src="includes/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="includes/jquery.dropmenu-1.1.4.js"></script>
        <script type="text/javascript" src="includes/menu.js"></script>
        <!--[if lt IE 9]>
            <link rel="stylesheet" type="text/css" href="includes/menu_ie7_and_ie8.css" />
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="page">
           <header>
              <a class="logo" href="#"></a>
              <nav class="nav_menu">
                  <ul class="dropmenu">
                     <li><a href="#">GALLERIES</a>
                        <ul>
                            <li><a href="port1/index.html">Portfolio 1</a></li>
                            <li><a href="port2/index.html">Portfolio 2</a></li>
                            <li><a href="port3/index.html">Portfolio 3</a></li>
                        </ul>
                    </li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="contact.html">CONTACT</a></li>
                        <li><a href="">Link 4</a></li>
                        </ul>
                      </nav>
                     </header>
            </div>
                   </body>
                  </html>

The sv galleries, port1, port2 work fine using the embedding code.  port1 or port2 load and overwrite the title and nav menus on this page.

Any ideas?

Thanks,

Chuck Fox

Re: 1

Thank you for providing the URL to your web page.

port1 or port2 load and overwrite the title and nav menus on this page.

Your galleries do not actually overwrite the menu on your main page, you are actually linking directly to new pages (your gallery 'index.html' pages) which just do not contain the menu.
You could either:
(1) Add your menu code to each of your gallery 'index.html' pages.
... or:
(2) Rather than link directly to the gallery 'index.html' pages, you could dynamically load a gallery into your main page when a gallery is selected from the menu. Try using the following HTML code as your main page.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Chuck Fox Photographer</title>
    <link rel="stylesheet" type="text/css" href="includes/menu.css" />
    <script type="text/javascript" src="includes/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="includes/jquery.dropmenu-1.1.4.js"></script>
    <script type="text/javascript" src="includes/menu.js"></script>
    <script type="text/javascript" src="port1/svcore/js/simpleviewer.js"></script>
    <!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="includes/menu_ie7_and_ie8.css" />
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript">
        // Function to load selected gallery using baseURL method
        function loadGallery(base) {
            flashvars={};
            flashvars.baseURL=base;
            simpleviewer.ready(function () {
                simpleviewer.load("sv-container", "100%", "800", "transparent", true, flashvars);
            });            
        }
        // Load the first gallery when the web page is initially loaded
        $(document).ready(function() {
            loadGallery("port1/");
        });
    </script>
</head>
<body>
    <div class="page">
        <header>
            <a class="logo" href="#"></a>
            <nav class="nav_menu">
                <ul class="dropmenu">
                    <li><a href="#">GALLERIES</a>
                    <ul>
                        <li><a href="#" onclick="javascript: loadGallery('port1/'); return false;">Portfolio 1</a></li>
                        <li><a href="#" onclick="javascript: loadGallery('port2/'); return false;">Portfolio 2</a></li>
                        <li><a href="#" onclick="javascript: loadGallery('port3/'); return false;">Portfolio 3</a></li>
                    </ul>
                    </li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </nav>
        </header>
        <div id="sv-container"></div>
    </div>
</body>
</html>

When a gallery is selected from the menu, instead of jumping to a new page (which does not contain the menu), a JavaScript function (called loadGallery()) is run which loads the selected gallery (using the baseURL method of embedding) into a div container (called sv-container) on your main page.
The user's browser will never navigate away from your main page and the menu will always be visible.

Steven Speirs
SimpleViewer Support Team.

Re: 1

Hi Steven..

I added your code to the nav page to dynamically load the sv gallery into the main page but it didn't work,
the sv gallery still opens in a new page.  I could send your the folder with the site files if that would help.

Chuck Fox

Re: 1

I tested my code before I posted it so it should work OK as long as all the external resource file are in their correct locations.
Check that the paths to all the JavaScript files are correct.

Create a new file (named 'test.html') using the code I posted, upload it to your '/testSite/' directory and try opening the page in a browser.
If it does not work, I should be able to troubleshoot it from there.

Steven Speirs
SimpleViewer Support Team.

Re: 1

Steven Speirs wrote:

I tested my code before I posted it so it should work OK as long as all the external resource file are in their correct locations.
Check that the paths to all the JavaScript files are correct.

Create a new file (named 'test.html') using the code I posted, upload it to your '/testSite/' directory and try opening the page in a browser.
If it does not work, I should be able to troubleshoot it from there.


Hi Steven,

It looks like all the resources are ok and the paths match yours, the nav menu loads but the sv galleries don't.

A copy of the index.html is on the server in the "speirs" folder - chfox.com/speirs/index.html   There is also a structure
diagram for the site - chfox.com/speirs/site.png in the same folder.

The testSite folder - chfox.com/testSite/  contains all the latest files.

Chuck

Re: 1

If you put the file containing my code into a subdirectory (in your case named 'speirs'), then all the relative paths within the file will need to be adjusted accordingly.
Rename the 'speirs/index.html' file to something like 'speirs/test.html' (so that it does not overwrite any of your own existing files), place it in your root directory (no the 'speirs' subdirectory) and open it in a your browser.

Otherwise, you could leave the 'speirs/index.html' file in its current location and correct all the relative paths within the file (the paths to the external JavaScript and CSS files and the baseURLs).

Steven Speirs
SimpleViewer Support Team.

Re: 1

Steven Speirs wrote:

If you put the file containing my code into a subdirectory (in your case named 'speirs'), then all the relative paths within the file will need to be adjusted accordingly.
Rename the 'speirs/index.html' file to something like 'speirs/test.html' (so that it does not overwrite any of your own existing files), place it in your root directory (no the 'speirs' subdirectory) and open it in a your browser.

Otherwise, you could leave the 'speirs/index.html' file in its current location and correct all the relative paths within the file (the paths to the external JavaScript and CSS files and the baseURLs).


Hi Steven,

The speirs folder caused confusion, I uploaded it with a copy of the index.html for you to download - not using it for the site.

I still can't get port1 to load and the nab menu doesn't work, all the resources are in place and the index.html links agree with yours. 

A copy of the index.html page is on the server:  chfox.com/testSite/

Thanks for any suggestions.

Chuck

Re: 1

Currently, the problem is that the path to your 'simpleviewer.js' file is incorrect.
Change:

<script type="text/javascript" src="includes/port1/svcore/js/simpleviewer.js"></script>

... to:

<script type="text/javascript" src="port1/svcore/js/simpleviewer.js"></script>

Sorry, this was an error in my code above which I have now corrected.
Hopefully, your web page will now function as expected.

Steven Speirs
SimpleViewer Support Team.

Re: 1

Steven Speirs wrote:

Currently, the problem is that the path to your 'simpleviewer.js' file is incorrect.
Change:

<script type="text/javascript" src="includes/port1/svcore/js/simpleviewer.js"></script>

... to:

<script type="text/javascript" src="port1/svcore/js/simpleviewer.js"></script>

Sorry, this was an error in my code above which I have now corrected.
Hopefully, your web page will now function as expected.

Hi Steve

I corrected the path to simpleviwer.js file (deleted "includes") but
Port1 still doesn't load

Chuck

Re: 1

Your http://chfox.com/testSite/index.html page still includes the line:

<script type="text/javascript" src="includes/port1/svcore/js/simpleviewer.js"></script>

This needs to be changed to:

<script type="text/javascript" src="port1/svcore/js/simpleviewer.js"></script>
Steven Speirs
SimpleViewer Support Team.

Re: 1

Steven Speirs wrote:

Your htitp://chfox.com/testSite/index.html page still includes the line:

<script type="text/javascript" src="includes/port1/svcore/js/simpleviewer.js"></script>

This needs to be changed to:

<script type="text/javascript" src="port1/svcore/js/simpleviewer.js"></script>

Steven-

"includes" was deleted - line of code reads as yours above - didn't up-load the new page to
The server. Chuck

Re: 1

Your http://chfox.com/testSite/index.html page still includes an incorrect path to the 'simpleviewer.js' file. Once the error has been corrected on your web server, your web page should function as expected.

Steven Speirs
SimpleViewer Support Team.

Re: 1

Steven Speirs wrote:

Your http://chfox.com/testSite/index.html page still includes an incorrect path to the 'simpleviewer.js' file. Once the error has been corrected on your web server, your web page should function as expected.


htitp://chfox.com/testSite/index.html has been updated with the line:

<script type="text/javascript" src="port1/svcore/js/simpleviewer.js"></script>

It still does not load port1 with the changes nor is the menu functional.  Have you been able
to load port1 gallery using this code and does the menu load port2 on your computer?

Re: 1

Have you been able to load port1 gallery using this code and does the menu load port2 on your computer?

Yes. I tested my code before I posted it (using my own galleries named 'port1' and 'port2') but then manually changed the paths to the external files to reflect your own web site's structure (which is where the error above crept in).

Looking at the code on your page, there are 2 further problems.
(1) Your gallery has a height of 800%. This should be '800' (or '800px') like in my code above.
(2) There should be double quotes around the word 'transparent' in the simpleviewer.load() line (again, like in my code above).

Change:

simpleviewer.load("sv-container", "100%", "800%", transparent, true, flashvars);

... to:

simpleviewer.load("sv-container", "100%", "800", "transparent", true, flashvars);

... and your galleries should display fine.

Steven Speirs
SimpleViewer Support Team.

Re: 1

Steven Speirs wrote:

Have you been able to load port1 gallery using this code and does the menu load port2 on your computer?

Yes. I tested my code before I posted it (using my own galleries named 'port1' and 'port2') but then manually changed the paths to the external files to reflect your own web site's structure (which is where the error above crept in).

Looking at the code on your page, there are 2 further problems.
(1) Your gallery has a height of 800%. This should be '800' (or '800px') like in my code above.
(2) There should be double quotes around the word 'transparent' in the simpleviewer.load() line (again, like in my code above).

Change:

simpleviewer.load("sv-container", "100%", "800%", transparent, true, flashvars);

... to:

simpleviewer.load("sv-container", "100%", "800", "transparent", true, flashvars);

... and your galleries should display fine.


Steven - That did it the site works perfectly!  Thanks for all you help.

one last question - "contact" and "about" pages open in new windows - how do I get them to load into the index page?

chfox.com/testSite/

Re: 1

There are many ways that you could achieve this but all will require some knowledge of HTML, CSS and JavaScript.

(1) You could run a JavaScript function to change the content of a div on your page using the JavaScript innerHTML property.

(2) You could place all your content ('about' and 'contact' information) inside a div on your page and selectively hide or show the content (when the appropriate links are clicked) by changing the CSS display value (to either 'none' or 'block').

(3) You could place an iframe on your page, give it a unique 'id' and use links on your page which, when clicked, load the corresponding URLs into the iframe using the target attribute (targeting the 'id' of the iframe).

(4) You could duplicate the page with your menu, use it as a template and add unique content to each page. You could them link them all together into a seamless site.

If you are looking for an automated solution, you might like to take a look at another of our products: Showkase.
Showkase is a PHP web application which allows you to create complete portfolio web sites (integrating multiple galleries) online.
Showkase also allows you to create non-gallery pages (such as 'About' and 'Contact' pages) and all of this is done automatically within the Showkase interface without the need for any manual coding at all.

Demo sites created with Showkase can be found here.
If you would like to take a look around the Showkase interface, you can log into the Live Demo Admin here.

Showkase can be purchased as Showkase-Standard (which comes with SimpleViewer-Standard and Juicebox-Lite, the free versions) or Showkase-Pro (which comes with SimpleViewer-Pro and Juicebox-Pro).
(The only difference between Showkase-Standard and Showkase-Pro is the bundled viewers.)
As you already have SimpleViewer-Pro, you could purchase Showkase-Standard and upgrade it to use your SimpleViewer-Pro files by following the instructions here.

Steven Speirs
SimpleViewer Support Team.

Re: 1

Steven Speirs wrote:

There are many ways that you could achieve this but all will require some knowledge of HTML, CSS and JavaScript.

(1) You could run a JavaScript function to change the content of a div on your page using the JavaScript innerHTML property.

(2) You could place all your content ('about' and 'contact' information) inside a div on your page and selectively hide or show the content (when the appropriate links are clicked) by changing the CSS display value (to either 'none' or 'block').

(3) You could place an iframe on your page, give it a unique 'id' and use links on your page which, when clicked, load the corresponding URLs into the iframe using the target attribute (targeting the 'id' of the iframe).

(4) You could duplicate the page with your menu, use it as a template and add unique content to each page. You could them link them all together into a seamless site.

If you are looking for an automated solution, you might like to take a look at another of our products: Showkase.
Showkase is a PHP web application which allows you to create complete portfolio web sites (integrating multiple galleries) online.
Showkase also allows you to create non-gallery pages (such as 'About' and 'Contact' pages) and all of this is done automatically within the Showkase interface without the need for any manual coding at all.

Demo sites created with Showkase can be found here.
If you would like to take a look around the Showkase interface, you can log into the Live Demo Admin here.

Showkase can be purchased as Showkase-Standard (which comes with SimpleViewer-Standard and Juicebox-Lite, the free versions) or Showkase-Pro (which comes with SimpleViewer-Pro and Juicebox-Pro).
(The only difference between Showkase-Standard and Showkase-Pro is the bundled viewers.)
As you already have SimpleViewer-Pro, you could purchase Showkase-Standard and upgrade it to use your SimpleViewer-Pro files by following the instructions here.

Showkase looks like it would work, the sample sites looked fine.  Thanks again.  Chuck Fox