User avatar
saliandra
Posts: 35
Joined: Wed Jan 07, 2009 6:16 pm
Location: Bend OR
Contact: Website

In-page gallery anomalies

Hi there - moving our site over to Weebly and trying to set up an in-page gallery and am having some issues:

1) The controls aren't showing. I have overridden the default graphics directory. FYI - Weebly doesn't allow for folders. All files upload into one general area. So the js, css, and all graphics and outlines are all in the same folder.

2) I had moved the markup with the thumbnails around so that our director would be the first in the list. He is indeed the first thumbnail to show at the top. But the third guy is loading up first (initially, he had been at the top when I first started playing around with this). So how do I get our director to load first?

3) Can I change the background color without having to modify the css?

4) Maybe I shouldn't be asking this in the same post - but what I really want is an in-page gallery with the images off to the left, the person's name below, and a large area to the right where I can have an expanded caption (for the singers' bios). I can't find an example of this anywhere. Can you point me in the direction of an example?

The page in question is http://co-mastersingers.weebly.com/test4.html
Sally
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: In-page gallery anomalies

Hi Sally,

1) For outlines you can simply set:

Code: Select all

hs.outlinesDir = '/';
, however for graphics, I guess you need to edit CSS. There are hardcoded values, like:

Code: Select all

 background: url(graphics/controlbar-white.gif) right -90px no-repeat;
You can do this in your code, like you already did:

Code: Select all

<!--
	3) Modify some of the styles
--> 
...
2) You have markup for third thumb to be opened:

Code: Select all

<a id="thumb1" class='highslide' href='/uploads/1/1/6/7/11671533/clarkchristianlarge.jpg'
			onclick="return hs.expand(this, inPageOptions)" title="Christian Clark">
		<img src='/uploads/1/1/6/7/11671533/clarkchristianthumb.jpg' alt='Christian Clark'/></a>
And code which opens that thumb:

Code: Select all

// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
	document.getElementById('thumb1').onclick();
});
Move that id="thumb1" to the first photo and should be fine.

3) I'm not sure how do you want to set background without setting CSS. Something like this:

Code: Select all

.highslide-wrapper, .highslide-outline {
background: #f6f6f6;
}
below: "3) Modify some of the styles" should allow you to set background. If this won't be enough, add "!important" after background color.

4) Here you can find a lot of examples from Roadrash: http://www.roadrash.no/?page_id=11
I guess it should be something like that: http://www.roadrash.no/hs-support/galle ... ption.html ?
Paweł Fus
Highcharts Developer
User avatar
saliandra
Posts: 35
Joined: Wed Jan 07, 2009 6:16 pm
Location: Bend OR
Contact: Website

Re: In-page gallery anomalies

Thank you for all of this info. I will try some of it out. I actually did make some progress on the right panel caption idea, on another page, but everything is looking rather messy. I think I may give up on the idea of the in-page gallery. I am confused as to why I need to modify the css for the graphics directory, when I have overridden it in my code. But I think I will start a whole new thread regarding that issue. Thanks for your time!
Sally
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: In-page gallery anomalies

Because it changes URL to folder with images. Stricture inside folder should remain the same.
Paweł Fus
Highcharts Developer

Return to “Highslide JS Usage”