CustomD
Posts: 20
Joined: Sat Jan 28, 2012 9:59 am

Help please... Can't even get thumbnail gallery to show?!

Hello,

I'm working on my second RapidWeaver site and, while I have a perfectly functioning gallery in the first site (thanks to Hilde!), I can not even get the thumbnail gallery to show up for this site.

http://modelcitizenstudios.com/photos/index.html

I believe I did everything the same as the other site, and have cleaned up the paths. The only difference I can see is that I'm using a different theme as a basis for this site, but I can't spot the problem with firebug. So, unfortunately I've hit another newbie wall and would really appreciate any help in pointing out where I'm going wrong.

By the way, I purchased a license as soon as I got the viewer to work for me Hilde... I think $29 is a bargain with all the kind help you and your team provide. I hope everyone does the same, as it is totally worth it not just for the development, but for all the invaluable support they're providing everyday. Thanks again!
User avatar
EarlyOut
Posts: 1705
Joined: Sun Nov 11, 2007 9:22 pm
Location: Sector R
Contact: Website

Re: Help please... Can't even get thumbnail gallery to show?

You have an unclosed <style> tag, so the Highslide script is never getting loaded. Look closely at this:

Code: Select all

<style type="text/css" media="all"><script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="../highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
You should pump your code through a validator site - it will quickly reveal mistakes like this.

http://validator.w3.org/
CustomD
Posts: 20
Joined: Sat Jan 28, 2012 9:59 am

Re: Help please... Can't even get thumbnail gallery to show?

Thanks for checking that. That validator is something new for me. I did go to the site and ran my page through it... very cool.

However, I am so absolutely green at this that some of your answer is a little over my head... sorry. I used their HTML Tidy feature and replaced the page through my server, but that didn't work. I'm not sure what I'm looking at in your quoted code above.

Then I had a EUREKA moment and realized my idiot mistake... I placed the HTML code from the HS Editor into a CSS input area in Rapidweaver. SOOOO, that got the slide show to show up. Which revealed a new problem:

- The pop-up window is half obscured by the webpage. I ran it through the validator, and it shows this which I think may be the issue, however I don't know how this error was caused nor do I have any clue how to correct it.
Validation Output: 1 Error

Line 115, Column 37: document type does not allow element "div" here
e.append("<div style='clear:both;'></div>");

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Additionally, the thumbnail gallery grid lines up different ways every time I load it... even after emptying the cache. Oddly, it seems to align correctly after 3-6 refreshes. I don't get that at all. So, I'm lost on how to correct either one of these issues.

(If it's not clear to anyone already, the only input I understand in getting this to work (at least for the other site) is through using RapidWeaver (and using DW as an HTML editor). I am very limited.)

Thanks.
User avatar
EarlyOut
Posts: 1705
Joined: Sun Nov 11, 2007 9:22 pm
Location: Sector R
Contact: Website

Re: Help please... Can't even get thumbnail gallery to show?

You can ignore that validator error. The validator scripts are often confused by HTML that appears within Javascript, and that's what's happening in this case. There are ways of doing the coding that prevent the confusion, but it's just a change that's needed to keep a code validator happy, not a change that actually affects the way the page works.

The hidden expander is a z-index problem. I'm immediately suspicious of that jQuery statement on line 114 that's setting a z-index to 9999, which is putting the div that it's referring to on top of virtually everything else on the page, including the Highslide JS expander. Try changing that to 999, instead (Highslide JS uses a z-index of its own stuff of 1001).
CustomD
Posts: 20
Joined: Sat Jan 28, 2012 9:59 am

Re: Help please... Can't even get thumbnail gallery to show?

Can I do that via the editor? Gonna try now.
User avatar
EarlyOut
Posts: 1705
Joined: Sun Nov 11, 2007 9:22 pm
Location: Sector R
Contact: Website

Re: Help please... Can't even get thumbnail gallery to show?

No, that's a chunk of code that isn't coming from Highslide JS at all - it's coming from your web-authoring tool. So the Highslide editor isn't going to have any effect on it.
CustomD
Posts: 20
Joined: Sat Jan 28, 2012 9:59 am

Re: Help please... Can't even get thumbnail gallery to show?

Nice call Early... your hunch was right. I'm using a new theme (FreeStacks) and after a little poking around I found this...
screenshot_02.jpg
screenshot_02.jpg (39.62 KiB) Viewed 6418 times
It was set at their default 9999, so I changed it to your suggested 999 and the expander works proper now... thanks! Interesting that their default setting tries to accomodate 'light boxes' and ended up breaking mine.

I'm still baffled by the thumbnail gird alignment. Did you notice that problem? It takes 3-8 reloads to get a nice crisp properly aligned thumbnail gallery. I've cleared my cache, restarted the browser, re-uploaded the whole site, tried it on different computers... no success.

I'm gonna be waiting on someone else or the Norwegian Cavalry for help on that one because I have no clue.

Thanks again for your time Early... at least I have a functioning slide show now, which is huge.
User avatar
EarlyOut
Posts: 1705
Joined: Sun Nov 11, 2007 9:22 pm
Location: Sector R
Contact: Website

Re: Help please... Can't even get thumbnail gallery to show?

I'm seeing the thumbnail grid alignment problem only in Chrome18 - FF11 and IE9 seem to be OK. But on that one, I have no clue, I'm afraid!
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Help please... Can't even get thumbnail gallery to show?

@ CustomD
The thumbnail grid issue:
I guess have tried to get rid of the boxes around the thumbnails when you created your gallery in the Editor. It seems in your highslide.css file that you have decreased the width and height for Outer box for galleries (Style tab => Thumbnail border => Outer box for galleries => Width and Height). You have set the width and height to 96px. The problem is that your thumbnails are 115x115 px. Some browsers calculate the thumbnail grid from the size of the thumbnails - other browsers calculate the grid from the width/height of the ÔÇ£outer box for the galleriesÔÇØ (which is li tags <li></li>). Because of this, the width/height of the ÔÇ£outer box for the galleriesÔÇØ must be at least the same as the width/height of the thumbnails.

You can fix this without going back to the Editor.
Open your highslide.css file and find this near the bottom:

Code: Select all

.highslide-gallery ul li {
	width: 96px;
	height: 96px;
	border: 0px solid #FFFFFF;
	background: #000000;
	margin: 0px;
}
Change width and height to 115:

Code: Select all

.highslide-gallery ul li {
	[hilight]width: 115px;[/hilight]
	[hilight]height: 115px;[/hilight]
	border: 0px solid #FFFFFF;
	background: #000000;
	margin: 0px;
}
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
CustomD
Posts: 20
Joined: Sat Jan 28, 2012 9:59 am

Re: Help please... Can't even get thumbnail gallery to show?

You've done it again Hilde! That fixed it. Except I actually just changed those values through the editor. (BTW, using a fully updated version of Safari using Mac OSX Lion, I had trouble typing in exact values into the field. I ended up typing them elsewhere and copying and pasting to get an outer box value of 122. Not a big issue, but wanted to let ya know.)

I hadn't really noticed the "Outer Box for Galleries" fields as being important before because I assumed that the editor would have changed that value automatically by adding the inner border, outer box size and margin. But I think you've probably designed it not to do this for a good reason. First one I can figure is that you can have more control over the look of your thumbnail gallery like this and space out your thumbnails if you want.

Great knowing why it works in some browsers and not in others, though I still don't understand why Safari would get it right after a few refreshes. I guess it was just trying to reconcile conflicting values?

Thanks again!
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Help please... Can't even get thumbnail gallery to show?

CustomD wrote:(BTW, using a fully updated version of Safari using Mac OSX Lion, I had trouble typing in exact values into the field. I ended up typing them elsewhere and copying and pasting to get an outer box value of 122. Not a big issue, but wanted to let ya know.)
Hmmm Ive havent noticed this before! I can see the same in Firefox too on the Mac. Havent tested on Windows. Ive found a workaround: Place the mouse pointer between the first and second number, hit backspace and enter the new first number. Do the same for the second and third number.
CustomD wrote:I hadn't really noticed the "Outer Box for Galleries" fields as being important before because I assumed that the editor would have changed that value automatically by adding the inner border, outer box size and margin. But I think you've probably designed it not to do this for a good reason. First one I can figure is that you can have more control over the look of your thumbnail gallery like this and space out your thumbnails if you want.
The main reason for this is to let the user have full control over the look of the thumbnails. The downside is what you experienced. My whish is that the Editor could read the thumbnail size and stop the users from making the ÔÇ£Outer boxÔÇØ smaller than the size of the thumbnail. IÔÇÖve sent an email to Torstein, the owner/developer, with a request about such function in the future.
CustomD wrote:Great knowing why it works in some browsers and not in others, though I still don't understand why Safari would get it right after a few refreshes. I guess it was just trying to reconcile conflicting values?
My guess: Safari makes it correct after a few refreshes because the thumbnail then are stored in the browsers cache with the correct size, and the img tags will override the size of the li tags when the browser knows the size of the thumbnails.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
CustomD
Posts: 20
Joined: Sat Jan 28, 2012 9:59 am

Re: Help please... Can't even get thumbnail gallery to show?

RoadRash wrote: Hmmm Ive havent noticed this before! I can see the same in Firefox too on the Mac. Havent tested on Windows. Ive found a workaround: Place the mouse pointer between the first and second number, hit backspace and enter the new first number. Do the same for the second and third number.
Nice trick. I just copied and pasted from a simple text document. Not a big deal for me, but I'm sure as a developer it must be one of those things that gnaws at ya.
RoadRash wrote: The main reason for this is to let the user have full control over the look of the thumbnails. The downside is what you experienced. My whish is that the Editor could read the thumbnail size and stop the users from making the ÔÇ£Outer boxÔÇØ smaller than the size of the thumbnail. IÔÇÖve sent an email to Torstein, the owner/developer, with a request about such function in the future.
I think that if the editor calculated the minimum size for the outer box and then placed those changing H & W values in those fields as you adjusted your thumbnail size, borders, etc., that would be an EXCELLENT feature. It would make the default size be thumbnail galleries aligned tightly together and make it dummy proof in that respect. Then, when someone wanted to space the thumbnails further apart, that "Outer Box Size" values and their use would jump out at you when you're poking around figuring out where one would change that. At least for a novice such as myself.

At the very least, it seems to be one of the few features in the editor where you can make a mistake that makes the product not functional, as opposed to just not looking how you want it to. I think if there is a chance to eliminate that in the editor, then it only makes it a better product (and maybe less questions for you!).

Another nice feature while we're on thumbnail size would be to be able to select how many thumbnails wide you would like your gallery to be. That was important to me, aesthetically and for practical graphic layout, but it was a stumbling block for me as a novice. You did give me a bit of CSS code that solved the problem and taught me how to adjust that, but it still requires some calculations every time you change thumbnail size. While not essential, it would be a nice luxury to have the computer do some of those calculations.
RoadRash wrote: My guess: Safari makes it correct after a few refreshes because the thumbnail then are stored in the browsers cache with the correct size, and the img tags will override the size of the li tags when the browser knows the size of the thumbnails.
That makes sense to me, but I don't know much about all of this. I just know it was screwing up because I put in conflicting values. I know enough now to know, "bad in, bad out".
CustomD
Posts: 20
Joined: Sat Jan 28, 2012 9:59 am

Re: Help please... Can't even get thumbnail gallery to show?

Forgot to mention, FWIW, that I had the same thumbnail alignment issues with the first gallery I made. It was the same tight layout, but your bit of CSS code fixed it so I didn't need to delve into the issue any deeper. So, from a user experience standpoint, this is the first time I 'got it' about the outer box values and understood my error.

But, if from a developer's standpoint you wanted more info to figure these inconsistencies out I should let you know this... The only difference with this instance is that I used a different THEME (or template) in RapidWeaver, by a different developer, so there are some things going on under the hood there that I don't know about. I mention this because, for instance, their default setting for the z-index of the nav bar was screwing up things for me with the pop-up window. (EarlyOut helped me find and fix that earlier in this thread.)

So... I suspect that the weird alignment of the thumbnails (that gets resolved by refreshing) may be something to do with the heme/template I'm using. Either that, or that your CSS code that I used in the first site (but not in the 2nd site) overrode my bad Outer Box values. I'm adjusting the width of my gallery with this site (http://www.modelcitizenstudios.com) through an HUD interface in the heme/template that allows me to set the pixel width of a fixed width div.

The first site's theme/template (http://thedavidcooper.com/drawings) did not have that option, so I had to use the CSS code.

I can't go back and check the values I had in the editor for the first site, but if you're curious and you'd like to check the file on my other site and see if I have those values wrong, but they're displaying correctly, then we may have an answer. I'd do it, but I tried earlier with the info in your first reply and wasn't certain what I was looking at.

Just an FYI... everything's all working (for now) so I'm all set.

BTW, if I use the "get link" option in the editor, does it save my captions as well? How about if it's been long enough for my uploaded images to be deleted from your server... do I lose the captions there?

Again, no rush on that question... I'm up and running.

Thanks!
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Help please... Can't even get thumbnail gallery to show?

It seems like you did it correct in your first site. In the CSS you have the width and height set to 115px for .highslide-gallery ul li
and your thumbnails are 111x111 px + 2px border on each side (= 115x115 px) - see screenshot:
2012-04-10_0441.png
2012-04-10_0441.png (75.75 KiB) Viewed 6325 times

The Editor will store your gallery settings and your images for 30 days, but your captions will not be stored at all.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no

Return to “Highslide JS Usage”