Mini Galleries not working

[carolinesoer]

Hi
I am having a problem with my mini galleries (which I have made with the editor). I successfully made one which worked just fine but the minute I added another, they both won't open to a gallery The first thumbnail opens to a larger image, but there's no gallery. I thought I had followed the instructions for adding the correct pieces to the HTML and then in the highslide.config.js file changing groups and ids, commenting out etc, but clearly I have missed something and cannot for the life of me see what! Hopefully you can help me sort this out!! http://carolinesoerdesigns.com/childrensillustrationgallery.html

Thanks and looking forward to your reply!
Caroline

[RoadRash]

Hi Caroline,

I think you’ve forgotten to upload the changes you’ve done to your highslide.config.js file. I can’t see any changes in the highslide.config.js file on your server – it contains settings for only one gallery.

[carolinesoer]

Hi and thanks for your swift reply Hilde, I thought I had done that but will check out what's going on over there!
Caroline

[carolinesoer]

Hi again!
Just been over to check and for some reason I had managed to upload that same file in two places (how's that possible?!!) and the wrong one had updated. Anyway now it's just fine, thank you again! One more question reagarding the small thumbnails alongside the main image in the gallery - can I get them bigger? I checked the box in the gallery to make the thumbnails 300 x 300 px but guess that applies only to the 1st pic on the page?

Any help gratefully received!

Caroline

[RoadRash]

The settings for the thumbnails apply to the thumbnails in the page, not the thumbnails in the thumbstrip in the gallery.
You can change the size of the thumbnails in the thumbstrip by changing the width for .highslide-thumbstrip-vertical img in the highslide.css file.

[carolinesoer]

Hi again!
Excellent - thank you! I willaim to work on that with some positioning tomorrow!
I think Highslide is a superb product and the support is second to none! With some XHTML and CSS knowledge( but absolutely no JavaScript ability), I have been floundering trying to get a gallery on my site and was so happy to come across Highslide - it's a Gem! Congrats and keep up the good work!
Caroline

[carolinesoer]

Hello
Have now tried to space out my galleries using code in the highslide.css file . http://carolinesoerdesigns.com/childrensillustrationgallery.htmlThey look ok, but one gallery is actually positioned higher than the other and the titles don't line up. Are you able to see what am I doing wrong please?

Caroline

[RoadRash]

Placement of the thumbnails in the page isn’t actually a Highslide issue since this depends of each user’s layout/design.

But OK - a short explanation for why your titles don't line up:
An h3 element will by default have the same width as the parent div, and that’s why the titles don’t line up. See the screenshot below where I’ve added yellow background color to the h3 elements.

2011-05-13_2350.png (59.82 KiB) Viewed 4139 times

You can avoid this by moving the titles inside the highslide-gallery divs:

Code: Select all

<div class="highslide-gallery">
<h3>Illustrations 1</h3>
   <a id="thumb1" href="highslide/images/large/breakfastinch.jpg" class="highslide"
         title="Breakfast"
         onclick="return hs.expand(this, config1 )">

      <img src="highslide/images/thumbs/breakfastinch.jpg"  alt=""/>
   </a>

Code: Select all

<div class="highslide-gallery">
<h3>Illustrations 2</h3>
   <a id="thumb2" href="highslide/images/large/jasperpurpledino.jpg" class="highslide"
         title="Jasper with dinos"
         onclick="return hs.expand(this, config2 )">
      <img src="highslide/images/thumbs/jasperpurpledino.jpg"  alt=""/>
   </a>

And then change the CSS for .highslide-gallery to this:

Code: Select all

.highslide-gallery {
   float: left;
   margin: 0 0 0 135px;
   width: auto;
}

[carolinesoer]

Hello
Thank you so much for taking the time to help me with this. I guess I would have worked it out eventually, but sometimes you just can't see the wood for the trees. You've saved me a lot of frustration and
I really appreciate that you went out of your way! Have a nice weekend!
Caroline

[carolinesoer]

Hello Hilde

I really had hoped not to bother you again but since I have attempted to publish another gallery on a new page my first gallery page has reverted to its original settings http://carolinesoerdesigns.com/childrensillustrationgallery.html - here is the new page http://carolinesoerdesigns.com/watercolourgallery.html . Can you pls advise what's happening here? How do I keep the css in place for each individual page?


In addition - assuming that I can get the galleries working, how do I reinstate the numbers in the caption? OK, I can see how do I do that with the editor. but how about after publishing? I can see the code I need to apply, but I am not sure in which file. Before I wreck it all can you pls tell me where I should be heading?

Code: Select all

<script type="text/javascript">
   // First, we need to turn on the number display
   hs.numberPosition = "heading";
   // Then, override the language object to suit your needs
   hs.lang.number = "Image %1 of %2";
</script>

Thanks
Caroline

[RoadRash]

All you need to do is put these two lines in your highslide.config.js file right after the hs.captionEval line:

Code: Select all

hs.numberPosition = 'caption';
hs.lang.number = 'Image %1 of %2';

[carolinesoer]

Hello Hilde
Thanks for that snippet of code - I'll get to that as soon as my other problems are resolved hopefully!!! In case you didn't see my edit to that question above here it is again:

Since I have attempted to publish another gallery on a new page my first gallery page has reverted to its original settings http://carolinesoerdesigns.com/childrensillustrationgallery.html - here is the new page http://carolinesoerdesigns.com/watercolourgallery.html . Can you pls advise what's happening here? How do I keep the css in place for each individual page?

Sorry for being such a pain
Caroline

[RoadRash]

You make it hard to give an exact answer since you've changed your highslide.config.js file several times now. I’ve followed the watercolourgallery page the last hour, written a couple of answers – but then the highslide.config file have changed and my answer has been “outdated”.

This is what happened: You replaced highslide.config.js for the old gallery with highslide.config.js for the new gallery – that’s why all your previous settings have disappeared. The same thing happened with your highslide.css file.

I recommend using the same gallery type on all your gallery pages. This will make it easier for you since you can use the same CSS file and the same highslide.config.js file for all galleries.

Another method is having one highslide folder per page – e.g. highslide-water, highslide-children. This means you have to rename the paths for all the files in the pages – js, CSS and image files – but it will probably be worth the effort.

In the childrensillustrationgallery.html page you should put the CSS for the .highslide-gallery in your children'sillustration.css file instead of the highslide.css file. In that way the CSS will only affect the highslide-gallery divs on the childrensillustrationgallery.html page.

Code: Select all

.highslide-gallery {
   float: left;
   margin: 0 0 0 135px;
   width: auto;
}

[carolinesoer]

Hello Hilde

Really sorry to have caused confusion with changing the file - was trying to find a workaround and after midnight here was just getting nowhere Anyway, I am so grateful for your help - I decided against the folders and have kept to mini galleries which seemed simpler!

I was about to change the numbering as you suggested but wonder if that will that work if there are different numbers of images in each gallery on each page?

Tusen Tack for all your help so far!
Caroline

[RoadRash]

I can confirm that the numbering of the images will work even if the galleries have different numbers of images in each gallery on each page.