Embed Tiltviewer

Summary:

Tiltviewer is a cool flash tool to make a interactive gallery.

Embed Tiltviewer

NickHarris 27 Jun 2009 15:09

Has anyone embedded Tiltviewer into a wikidot site?

Here's the Tiltviewer site: http://www.simpleviewer.net/products/tiltviewer/app/

Re: Embed Tiltviewer

RobElliott 27 Jun 2009 16:20

So far this one has proved to be rather difficult. The code here just gives a blank screen in my attempts so far.

Rob

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Re: Embed Tiltviewer

Ed Johnson 28 Jun 2009 01:18

I have used the TiltViewer Skin for Jalbum. You can see it in action on the site I've been working on intermittently for my photographer aunt and uncle. The Sports Sampler 2 uses the TiltViewer skin. In fact all of the samplers are using a different Jalbum skin.

The problem with this method is that I had to create an external page on a non-Wikidot host and then iframe it to make it work. Jalbum outputs its slideshows in a folder structure that Wikidot does not currently support. I have asked for this ability on the Pro site (Ticket 291: Support for "Conventional" Web Storage), but no news yet on whether it will happen or not. If you have access to another host, then my solution works. If not, then we'll have to hope my wish is granted or keep digging for another answer.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: Embed Tiltviewer

NickHarris 02 Jul 2009 18:11

Hi Ed, thanks for the reply. I have created a tiltviewer in Jalbum. What is the code I need to embed in wikidot?

Re: Embed Tiltviewer

Ed Johnson 02 Jul 2009 23:54

There's 2 ways. What I did with the samplers on the site referenced above is to host them through the Jalbum.net site. I created a free account that allows 30 MB of storage for your albums (they are ad supported). The other option is to upload your album and all supporting files to a separate host. In either case, you need to iframe the album. Here is the source to the Sports Sampler 2 page:

[[iframe http://pizzageek.jalbum.net/Sports%20Sampler%202/ frameborder="0" scrolling="auto" width="100%" height="700px"]]

Just insert similar code that links to your album at the point in your page that you want it displayed. You may need to tweak the width and height settings to fit your page.

If you choose not to host your album(s) with Jalbum, then you need to upload the whole file/folder structure to a different web host and iframe the html page from that host.

Does this help?

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: Embed Tiltviewer

NickHarris 03 Jul 2009 20:42

Thanks Ed. I got it too work http://rochesterwaterskishows.wikidot.com. There a link that shows 2009 Lake City Wateski Days pictures.

The only cluggee bit is the folder structure of jalbum has added some extra stuff. I was hoping it would open directly to the tiltviewer page.

Another thing is the width of my website pages are narrow. Any way I can change that? Lots of wasted space on each side.

Last edited on 04 Jul 2009 03:46 by Ed Johnson + Show more

Re: Embed Tiltviewer

RobElliott 03 Jul 2009 22:38

Nick, Ed will no doubt give you a detailed answer. But I hope you don't mind me chipping in with a comment on the Bloo theme which you are using for your site. It was, I believe, originally intended as a single column blog-like theme and I don't feel it adapts well to a normal website theme. It is also particularly tricky to adjust. I'm not really sure why this should be as it is just CSS, but some of the CSS does seem a bit opaque. The width can be adjusted but will take a bit of work. I do think that, just perhaps, if you have the confidence to experiment with CSS you might want to try moving away from the Bloo theme and working on a custom design which I believe could really enhance your site.

Rob

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Last edited on 03 Jul 2009 22:45 by RobElliott + Show more

Re: Embed Tiltviewer

Ed Johnson 04 Jul 2009 04:01

Nick,

It seems we're almost neighbors! I live in the Twin Cities. Went to school in Winona (St. Mary's many years ago) and have a brother living in Wabasha. I've made many trips down Hwy 61 through Lake City.

Enough small talk… Like Rob said, you should consider something other than the Bloo theme - it just doesn't work well when you need to accommodate wider content.

Also, you should be able to lose the folder structure in your Jalbum by tweaking the settings and regenerating your album. I only use the folder structure when I have multiple groupings that I want to combine in one album. Generally, I prefer to create one album per event or group of photos. I don't care for the "clutter" the folders add to my albums. When I have a bit more time, I'll dig into the specific settings for the tiltviewer album so you can avoid the folder links and pass them on to you.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Last edited on 05 Jul 2009 12:52 by Ed Johnson + Show more

Re: Embed Tiltviewer

NickHarris 04 Jul 2009 04:53

Thanks Ed/Rob. I saw your replies to my Gallery thread. I think I will look at packages. If I were to switch to a package, is that just a matter of doing something with a custom theme?

Re: Embed Tiltviewer

NickHarris 28 Jul 2009 22:13

Hi, I am trying a new theme. But it has a side nav bar and I have tried to remove the nav bar but in my recent iframe for jalbum pictures I end up with some scrolling that I would like to get rid of…. which is easier to do ? mod the jalbum or the theme/ One of you gave me some css code before which I customized my Bloo theme with, but cannot find the thread anymore.

Nick

Re: Embed Tiltviewer

RobElliott 28 Jul 2009 23:51

One thing you could try to remove the horizontal scrolling is to add this to your custom CSS:

div.row {
    width: 650px;
}

Rob

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Re: Embed Tiltviewer

NickHarris 29 Jul 2009 00:38

hi Rob, does that work with an external theme? I installed this from wikidot themes, it's called "underwater"

Re: Embed Tiltviewer

Ed Johnson 29 Jul 2009 02:04

Nick,

I've have not installed any external themes, so I don't know how it works when you want to tweak it.

To get rid of the sidebar, something like this should fix you up. You need to hide the side bar and change the margin that was making room for it:

#side-bar {
    display: none;
}
#main-content {
    margin-right: 0px;
}

I've been meaning to try an external theme. Now I have an excuse! I won't have much time to try this until later this week. If you figure this out, be sure to let us know how it worked.

BTW, that theme looks really great and fits in well with your content.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Last edited on 29 Jul 2009 02:07 by Ed Johnson + Show more

Re: Embed Tiltviewer

NickHarris 29 Jul 2009 03:43

Where would I add this code? The underwater theme is an external, so do I have to edit the page source?

Re: Embed Tiltviewer

Ed Johnson 29 Jul 2009 05:05

Nick,

The code is actually on the themes page hidden under a "+ show the code" collapsible block. I created a sandbox page on one of my sites to test: http://my-wd-local.wikidot.com/sandbox2:underwater-no-sidebar

This is the code from the Underwater theme page inserted into a custom theme I called MyUnderwater - No Side Bar (extending the Base theme). I added the small code tweak and applied it to my sandbox2: category. Seems to work fine for getting rid of the sidebar. I just noticed that the rays of light aren't making their way into the space formerly occupied by the side bar. I'll look at this closer later on (I have to get some sleep!)

Here's my complete code:

+ show the code

@import url(/common--theme/base/css/text_highlighter.css);
 @import url(/common--theme/base/css/autocomplete.css);
 @import url(/common--theme/base/css/forum.css);
 @import url(/common--theme/base/css/editor.css);
 @import url(/common--theme/base/css/odialog.css);
 
 body{
     margin: 0px;
 }
 
 #container {
    margin: 0 auto;
     padding: 0;
    width: 960px;
 }
 
 /* header */
 #header {
     position: relative;
     z-index: 30;
    height: 170px;
 }
 
 #header h2{
     margin: 0;
     padding: 0;
    position: absolute;
    left: 50px;
    top: 110px;
 }
 
 #content-wrap {
     _height: 1%;
     min-height: 1px;
    padding: 10px 0px 1px 0px;
 }
 
 /* side-bar */
 
 #side-bar{
    float: left;
    width: 200px;
    padding: 10px;
    margin: 0px 10px;
    clear: left;
}
 
 #page-title{
     margin: 0 0 0.5em 0;
    padding-top: 0em; /* Firefox bug? */
     font-size: 200%;
     border-bottom: 1px solid #666;
 }
 
 #main-content{
    margin: 0px 10px 10px 240px;
    padding: 10px 10px;
 }
 
 /* * html #main-content {height: 1%;} */
 
 #license-area {
     padding: 0.5em 0;
     color: #555;
}
 #account-options li{
     display: block;
     margin: 0; padding: 0;
    width: 100%;
 }
#account-options li a {
     display: block;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     padding: 2px 5px;
     z-index: 40;
    width: 100%;
 }
 
#account-options li a:hover {
     color: black;
 }
#account-topbutton {
     font-size: 80%;
     font-weight: bold;
     padding: 0 5px;
 }
 #top-bar{
     position: absolute;
    left: 240px;
     bottom: 0px;
     z-index:0;
    width: 720px;
}
 
 #top-bar li {
     list-style: none;
     float:left;
     margin: 0 5px;
    padding:0;    
    height: 22px;
 }
 #top-bar li ul{
     padding: 0;
     text-align: center;
     display: block;
     margin: 0;
    padding: 0.3em 1em;
     text-decoration: none;
 }
 #top-bar a:hover {
     border-bottom-color:#243356; /* different border color */
 }
 
/* Images used on Creative Commons licence: Copyright user: bradm81, opendesigns.org */
 
/* Site background image */
 
body {
    background-image: url(http://themes.wdfiles.com/local--files/underwater/bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #002C2C;
    color: white;
 
}
 
/* Background color of all content of the page below header */
#content-wrap {
    background-color: ;
    background-repeat: repeat-x;
    background-position: top center;
    background-color: ;
    border: 0px solid black;
    padding-top: 0px;
}
 
/* Color of page content */
#main-content {
    background-color: #0A3838;
    background-image: url(http://themes.wdfiles.com/local--files/underwater/mainbg.jpg);
    background-repeat: no-repeat;
    color: white;
    margin-top: 0px;
    margin: 0px 240px 10px -11px;
    border: 1px solid #1A7474; 
}
 
#header {
    width: 940px;
    margin: 0 auto;
    height: 170px;
}
 
#header h1 {
    position: absolute;
    left: 20px;
    top: 53px;
}
 
#header h1 a {
    color: #5eb0db;
    font-size: 40px;
    font-weight: bold;
    font-stretch: expanded;
    text-decoration: none;
}
 
#header h1 a:hover {
    color: #99c0d5;
    background-color: transparent;
    text-decoration: none;
}
 
#header h2 {
    color: #cde7f4;
}
 
/* 1st MENU ELEMENT */
 
/* Background color */
 
#top-bar {
    bottom: 7px;
    left: 0px;
    position: absolute;
    width: 900px;
}
 
#top-bar li {
    background-color: transparent;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
}
 
/* Font color and decoration */
#top-bar li a {
    color: white;
    text-decoration: none;
}
 
/* Background color on hover */
#top-bar a:hover{
    background-color: transparent; 
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
}
 
/* Font color on hover*/
#top-bar li a:hover {
    color: white;
    text-decoration: underline;
}
/* ---------------------------------- */
 
/* 2nd MENU ELEMENT */
#top-bar ul li ul {
    background-color: black;
    opacity: 0.5;
    border: 0px;
}
 
#top-bar ul li ul a {
    background-color: black;
    -moz-border-radius: 0px;
}
 
#top-bar ul li ul a:hover {
    background-color: white; 
    color: black;
    -moz-border-radius: 0px;
}
 
/* ---------------------------------- */
 
/* color of side-bar*/
#side-bar {
    background-image: url(http://themes.wdfiles.com/local--files/underwater/rightbg.jpg);
    background-repeat: no-repeat;
    margin-top: 0px;
    border-bottom:1px solid #234848;
border-right:1px solid #234848;
border-top:1px solid #234848;
    float:right;
    width: 180px;
}
 
/*  FONTS   */
 
/* General font family and color*/
body {
    font-family: Verdana, Arial, Helvetica;
    color: ;
}
 
/* Font family of headers */
h1,h2,h3,h4,h5,h6{
    font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica;
}
 
/* Sizes, weight and text-decorations of headers */
h1{
    font-size: 190%;
    font-weight: normal;
    text-decoration: none;
}
h2{
    font-weight: normal;
    font-size: 150%;
    text-decoration: none;
}
h3{
    font-weight: normal;
    font-size: 130%;
    text-decoration: none;
}
h4{
    font-weight: bold;
    font-size: 120%;
    text-decoration: none;
}
h5 {
    font-weight: bold;
    font-size: 100%;
    text-decoration: none;
}
h6 {
    font-weight: bold;
    font-size: 90%;
    text-decoration: none;
}
 
a {
    color:  #5eb0db;
}
 
a:hover {
    color: #cde7f4;
}
 
a:visited {
    color:  #5eb0db;
}
 
a.newpage {
    color:  #5eb0db;
}
 
a.newpage:hover {
    color: #cde7f4;
    text-decoration: underline;
}
 
/* Font, size, color and border of page title */
#page-title {
    font-family: Verdana, Arial, Helvetica;
    border-bottom: 1px solid #666666;
    font-size: 200%;
    margin: 0pt 0pt 0.5em;
    padding-top: 0em;
}
 
#footer {
    color: gray;
    opacity: 0.8;
    border-bottom:1px solid #888;
    border-top:1px solid #888;
}
 
#footer a {
    color: gray;
    text-decoration: none;
}
 
#license-area {
    color: gray;
}
 
#license-area a {
    color: gray;
    text-decoration: none;
}
 
#license-area a:hover {
    color: gray;
    text-decoration: underline;
    background-color: transparent;
}
 
#login-status {
    color: white;
}
 
blockquote {
background-color: transparent;
}
/* added for no sidebar */
#side-bar {
    display: none;
}
#main-content {
    margin-right: 0;
}

If you think you might be tweaking the CSS at all, I'd recommend making 2 versions of the Underwater theme that you can edit. One as-is so you can have categories that have the side bar and one like this one for no side bar that's more Jalbum friendly.

Hope this helps!

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Last edited on 29 Jul 2009 05:10 by Ed Johnson + Show more

Re: Embed Tiltviewer

Helmuti_pdorf 29 Jul 2009 06:01

I do not understand - if i want no side bar on a page than I move the page to a special category ( "no-side:"pagename) and setup in the site manager that this category uses no side bar. ( blank the form field out )

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Re: Embed Tiltviewer

Ed Johnson 29 Jul 2009 12:01

It's not enough to turn off the side bar navigation element, especially when using custom themes. You just end up with a void in the space where the side bar was formerly visible. Your idea might work, but you'd still have to adjust the margin setting of #main-content to fill the void.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: Embed Tiltviewer

NickHarris 29 Jul 2009 18:23

Thx Ed, tried this, with and without the sidebar but the text areas get whited out. I think there are some problems with the theme or my browser as when I am running the theme some message text appears as a white box with white text, say if I were to up load a file.

Plus I noticed a funny error withwikidot. When I was playing around with themes menu, the 'save changes' and 'cancel' buttons were switched but the action remained the same. So if you tried to save changes, you were actually cancelling. Reload did not fix it, I had to shut the page down.

Re: Embed Tiltviewer

Ed Johnson 30 Jul 2009 02:29

I ran into some of the same issues, Nick. It appears a few elements were overlooked when this theme was made. Some elements in the odialog style sheet need tweaking to clean up some of the pop up messages and hover text.

I also figured out why the corner is cut out of the main content background when the side bar is removed (the background image used in the main content area is narrower than the one used in the header).

I'm willing to play with this some more if you want to stay with this theme.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: Embed Tiltviewer

NickHarris 30 Jul 2009 14:47

I think I need to understand the category thing some more. I really like the background, the content layout is pretty standard I may wait until the theme competition completes and see if there any cool themes there. I have some ideas myself, but that would mean investing lots of time.
I definitely need pages with and without side bar. So I may have to alter the css for the page, but it's figuring exactly where to alter the page code.