Topic: Same page same div

I am trying to show different galleries via a right submenu on the same page and in the same div
see this link
http://www.barbaraphilipp.com/New/drawi … index.html
a bit like your example "Multiple Galleries on Separate HTML Pages"

first problem the first gallery does not show
second problem how do I link the other galleries

Hope you can help
Thank you

Re: Same page same div

a bit like your example "Multiple Galleries on Separate HTML Pages"

This example essentially duplicates a template file for each gallery so that each gallery has a separate page containing both the gallery and the menu.

As an alternative, you could create a single page with an <iframe> and load the galleries (from links on your page) into the <iframe>.
First of all, create your galleries, keep them all in their individual folders and upload all the folders (not just the contents) to your web server. In this example, the gallery folders will be named 'gallery1' and 'gallery2'.
On your menu page, you would have an <iframe> such as:

<iframe id="content" name="content" src="gallery1/index.html" width="800" height="600" frameborder="0" scrolling="0"></iframe>

You would also have links such as:

<a href="gallery1/index.html" target="content">Gallery 1<a>
<a href="gallery2/index.html" target="content">Gallery 2<a>

... which would target the <iframe> with the galleries.

Incidentally, the reason your current gallery is not displaying may be due to a typo in the following line:

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

'vcore' should be 'svcore'.

Steven Speirs
SimpleViewer Support Team.

Re: Same page same div

Steven thank you so much for your reply. You rock!

Re: Same page same div

Hi Steven,

Here I am again. The iFrame is working fine, thanks for that. Now I have different links using the same iFrame to show their content therefor it is difficult to change the active link color from the non active links.
Any idea that does not require JS? smile

Thank you in advance
Webill

Re: Same page same div

You can change the color and style of active links using CSS as described on this web page.

Steven Speirs
SimpleViewer Support Team.

Re: Same page same div

Thank you Steven, I think it will not work with links pointing at the same iFrame div though ...  roll

Re: Same page same div

New question:

I would like to change the background color of the "image area" directly in the code but I do not know which file contains the information (I do not use the embed code!).

In which file is the background color info of the image area?

Thank you
Webill

Re: Same page same div

Thank you Steven, I think it will not work with links pointing at the same iFrame div though ...

You can change the style of any and all links using CSS.
Try giving individual links different classes to style them differently, for example:

<style type="text/css">
    .style1 a:link {color: #222222; }
    .style1 a:visited {color: #444444; }
    .style1 a:hover {color: #666666; }
    .style1 a:active {color: #888888; }
    .style2 a:link {color: #ff0000; }
    .style2 a:visited {color: #00ff00; }
    .style2 a:hover {color: #0000ff; }
    .style2 a:active {color: #ffff00; }
</style>

<div class="style1">
    <a href="gallery1/index.html" target="your_iframe">Click here to load Gallery #1 into iframe</a>
</div>
<div class="style2">
    <a href="gallery2/index.html" target="your_iframe">Click here to load Gallery #2 into iframe</a>
</div>

I would like to change the background color of the "image area" directly in the code but I do not know which file contains the information (I do not use the embed code!).

In which file is the background color info of the image area?

Although you use an <iframe>, the gallery is already embedded (using embedding code) in the 'index.html' file inside the gallery folder.
It is in this 'index.html' fie that you will find the embedding code where the backgroundColor Embed Code Parameter can be changed.

Steven Speirs
SimpleViewer Support Team.

Re: Same page same div

Hi Steven,

I tried the suggested tip about giving individual links different classes but it doesn't work!
Any other card up your sleeve? May be I need to use Javascript?
this is the link to the page
http://www.barbaraphilipp.com/artistbooks.html#
and the links I need to work on are on the right side of the SV gallery
Tasteless
Wellness

Thank you in advance!

Webill

Re: Same page same div

I tried the suggested tip about giving individual links different classes but it doesn't work!

I tested my code before posting it above and it works fine.
In fact, the code on your own page also seems to work fine. Try changing the colors in this chunk of code from your 'barbara.css' page, clear your browser's cache before reloading your web page and you should see the colors of the 'Tasteless' and 'Wellness' links change:

#submenu a:link{    color:#999;    }
#submenu a:hover{    color:#CCC;    }
    
#submenu a:active{    color:#000;
    }
#submenu a:visited{    color:#;    }
Steven Speirs
SimpleViewer Support Team.

Re: Same page same div

Hi Steven,

Thank you for the reply.
The a:active, which is the most important in order to see on which link you are,  works only if you keep clicking on it, once you let go it goes back to the a:link look... of course being still an active link ..
I tried 2 browsers..

Re: Same page same div

OK, so you would like the currently selected gallery's link to be highlighted (styled differently to the other link).
You could set up two different classes and change the link's class using JavaScript when selected.

<style type="text/css">
    a.default:active {color: #ff0000; }
    a.default:hover {color: #ff0000; }
    a.default:link {color: #ff0000; }
    a.default:visited {color: #ff0000; }

    a.selected:active {color: #00ff00; }
    a.selected:hover {color: #00ff00; }
    a.selected:link {color: #00ff00; }
    a.selected:visited {color: #00ff00; }
</style>

<script type="text/javascript">
    function toggle(num) {
        var t = document.getElementById("tasteless"), w = document.getElementById("wellness");
        if (num === 1) {
            t.className = "selected";
            w.className = "default";
        } else {
            t.className = "default";
            w.className = "selected";
        }
    }
</script>

<a href="galleryAt/index.html" target="iFrameGallery" id="tasteless" class="default" onclick="javascript: toggle(1);">Tasetless</a><br />
<a href="galleryAw/index.html" target="iFrameGallery" id="wellness" class="default" onclick="javascript: toggle(2);">Wellness</a><br />
Steven Speirs
SimpleViewer Support Team.

Re: Same page same div

Hi Steven,

Thank you!

this worked adding a to the style:

<style type="text/css">

    a.default:hover {color: #CCC; }
    a.default:link {color: #999; }
    a.default{color:#999;}

    a.selected:active {color: #000; }
    a.selected:link {color: #000; }
    a.selected{color: #000;}
   
</style>

1)Problem now is to have "Tasteless" already selected when arriving on the page as this is the first gallery that will upload.
2) I have a page (performances) with more then 2 links in the submenu, how do I make the same formula work with multiple links?
http://www.barbaraphilipp.com/performances.html

Re: Same page same div

1)Problem now is to have "Tasteless" already selected when arriving on the page as this is the first gallery that will upload.

In my example above, just change the initial 'class' value of the link you'd like to be 'selected', i.e. change:

<a href="galleryAw/index.html" target="iFrameGallery" id="tasteless" class="default" onclick="javascript: toggle(1);">Tasetless</a><br />
<a href="galleryAw/index.html" target="iFrameGallery" id="wellness" class="default" onclick="javascript: toggle(2);">Wellness</a><br />

... to:

<a href="galleryAw/index.html" target="iFrameGallery" id="tasteless" class="selected" onclick="javascript: toggle(1);">Tasetless</a><br />
<a href="galleryAw/index.html" target="iFrameGallery" id="wellness" class="default" onclick="javascript: toggle(2);">Wellness</a><br />

2) I have a page (performances) with more then 2 links in the submenu, how do I make the same formula work with multiple links?

My code can be modified to be used with many links.
Here is an example with 3 links.

<style type="text/css">
    a.default:active {color: #ff0000; }
    a.default:hover {color: #ff0000; }
    a.default:link {color: #ff0000; }
    a.default:visited {color: #ff0000; }

    a.selected:active {color: #00ff00; }
    a.selected:hover {color: #00ff00; }
    a.selected:link {color: #00ff00; }
    a.selected:visited {color: #00ff00; }
</style>

<script type="text/javascript">
    function toggle(num) {
        var t = document.getElementById("tasteless"),
            w = document.getElementById("wellness"),
            x = document.getElementById("another");
        if (num === 1) {
            t.className = "selected";
            w.className = "default";
            x.className = "default";
       }
        if (num === 2) {
            t.className = "default";
            w.className = "selected";
            x.className = "default";
       }
        if (num === 3) {
            t.className = "default";
            w.className = "default";
            x.className = "selected";
       }
    }
</script>

<a href="galleryAt/index.html" target="iFrameGallery" id="tasteless" class="default" onclick="javascript: toggle(1);">Tasetless</a><br />
<a href="galleryAw/index.html" target="iFrameGallery" id="wellness" class="default" onclick="javascript: toggle(2);">Wellness</a><br />
<a href="galleryAa/index.html" target="iFrameGallery" id="another" class="default" onclick="javascript: toggle(3);">Wellness</a><br />
Steven Speirs
SimpleViewer Support Team.

Re: Same page same div

Hi Steven and thatnk you for your answer.

1) yes, I have tried this in the morning

<a href="galleryAw/index.html" target="iFrameGallery" id="tasteless" class="selected" onclick="javascript: toggle(1);">Tasetless</a><br />
<a href="galleryAw/index.html" target="iFrameGallery" id="wellness" class="default" onclick="javascript: toggle(2);">Wellness</a><br />

it seemed to be working until i noticed that clicking Tasteless it would load Wellness  instead and probably it is obvious from a script point of view smile
I also tried a <span> but gets messy and actually it ignored it...

Winnie the Pooh would say: "think think think..."

Re: Same page same div

Sorry. A copy and paste error on my part. The 'href' attribute of the first link should point to your 'Tasteless' gallery's HTML index page.
Just change:

<a href="galleryAw/index.html" target="iFrameGallery" id="tasteless" class="selected" onclick="javascript: toggle(1);">Tasetless</a><br />
<a href="galleryAw/index.html" target="iFrameGallery" id="wellness" class="default" onclick="javascript: toggle(2);">Wellness</a><br />

... to:

<a href="galleryAt/index.html" target="iFrameGallery" id="tasteless" class="selected" onclick="javascript: toggle(1);">Tasetless</a><br />
<a href="galleryAw/index.html" target="iFrameGallery" id="wellness" class="default" onclick="javascript: toggle(2);">Wellness</a><br />

I have now edited my posts above to reflect the correct code.

Steven Speirs
SimpleViewer Support Team.

Re: Same page same div

yes indeed, I didn't see it either...
It works like a charm of course...
Thank you very very much Steven!


ps
Will it be possible in the future to be able to showing also text with the handy SV galleries do you think?

Re: Same page same div

I think it is unlikely as SimpleViewer is an image viewer and file types other than images (such as .txt and .pdf files) are not supported.
Please see this FAQ:
Will SimpleViewer load things other than images?

Steven Speirs
SimpleViewer Support Team.