Highslide gallery in Drupal 6

[peaceful]

Today I've downloaded custom Highslide using editor and tried to install it on my Drupal-based site. Here is what I have done:
1. Installed and enabled highslide drupal module.
2. Downloaded highslide and copied it to drupal module directory.
3. Checked module settings - default settings are fine for me.
4. Changed the way my photos are displayed via imagecache module - I used Lightbox2 before and changed it to Highslide.

I want to make image gallery, but it doesn't work - original image is opened after clicking on thumb in current browser tab.
Tried to search for solution and found none, so I'm writing this post here now.

So I've tried to do some workarounds... First I've manually added highslide css class and onclick event to links - and I got some results. Photos are zooming now, but they behave like single images and I expect them to be a gallery with prev/next buttons. And highslide skin differs from my expectations by the way.
I've noticed that there is no this line in source code:
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
... so I've tried to put it manually, but nothing changed. And I've removed this line.
By the way I've noticed 2 animations while loading picture (instead of one) - is it a bug?
And is there any effect from setting highslide permissions in drupal user-access settings? It made no difference for me...

And I need your help How to make image-gallery work?
1. How to make highslide module work out of the box automatically? Or how to make it work manually?
2. How to fix 2 animations when loading picture (make one animation)?
3. And one more thing: on the same page there is a dash-underlined link below map (Сообщите нам) - it also uses highslide and gets php page via iframe. There are 2 close buttons there - is it possible to fix it? And How to define different highslide settings for it (skin or background and colors for example)?
Any recommendations? Appreciate any assistance.

Some useful info.
Image gallery example: http://kv-posutochno.ru/kvartira/5
Link to my highslide editor settings (wich are similar to default settings): http://highslide.com/editor/?config=%7B ... 3A+true%7D
Browser: Firefox 3.5, Opera 10.
OS: Ubuntu Linux

[RoadRash]

1. The Drupal Highslide modul/plugin isn’t made by Highslide, so you need to check with the author of the third party Drupal Highslide modul/plugin.

If you want to use the settings you made in the Highslide Editor, you need to replace this file made by the third party Drupal Highslide modul/plugin:

Code: Select all

http://kv-posutochno.ru/sites/all/modules/highslide/highslide.js?U

with the highslide.config.js file from the Highslide Editor.
Remember to use correct path to the file. If the file is in the same folder as the highslide-full.js file, the include should look like this:

Code: Select all

<script type="text/javascript" src="/sites/all/modules/highslide/highslide/highslide.config.js" charset="utf-8"></script>

You also need to adjust the path for hs.graphicsDir inside the highslide.config.js file.
Find this line:

Code: Select all

hs.graphicsDir = 'highslide/graphics/';

and change it to:

Code: Select all

hs.graphicsDir = '="/sites/all/modules/highslide/highslide/graphics/';

The gallery functions will appear when you replace the js file from the modul/plugin with the js file from Highslide Editor.

2. I’m not sure I understand… I can’t see two animations. But maybe you mean that the current image closes before opening the next. If so, you can fix it by adding

Code: Select all

hs.transitions = ['expand', 'crossfade'];

Adding this will keep the image popup open, and crossfade from current to next image, instead of closing current image before opening the next.
(Your highslide.config.js file probably already contains this setting.)

3. The second close button (rounded black) comes from the js file from the plugin/modul you are using. This close button will be removed if you remove this file (as described in #1).
You can normally change background and color for the HTML popup in the highslide.css file, but in your case the page opened in the iframe popup have background: #FFFFFF; added to the body in the page itself. You need to remove this background color.

[peaceful]

Thanks, RoadRash for help, your tips were very useful.
I've tried to do some dancing around this and here's what I've found.

1. I don't need to add onclick event to links manually, I just need to add proper css class to them. Onclick events are added by
/sites/all/modules/highslide/highslide.js

2. I don't have to replace
/sites/all/modules/highslide/highslide.js
with
/sites/all/modules/highslide/highslide/highslide.config.js
I just need to add it to page template

Code: Select all

<script type="text/javascript" src="/sites/all/modules/highslide/highslide/highslide.config.js" charset="utf-8"></script>

3. I've edited /sites/all/modules/highslide/highslide.js and added one parameter (marked as bold):

Code: Select all

...
$('a.highslide').each(function() {
    this.onclick = function() {
      return hs.expand(this[b],config1[/b]);
    }
  });
...


And commented the rest of code here after line: hs.graphicsDir = settings.graphicsDir;

Code: Select all

...
hs.graphicsDir = settings.graphicsDir;
/*
...
*/
});


4. I don't need to change graphicsDir in highslide.config.js, because Drupal changes graphicsDir directly on page with jquery.

5. About 2 animations. I've ment that I had 2 pictures (instead of one) while loading: loader.big.white.gif and loader.white.gif. But now after my js-editing it's fixed.


So, there is just one thing left: I have black border of highslide iframe-window - is it possible to change it?

[RoadRash]

Find and remove this near the bottom of your higshlide.css file:

Code: Select all

.highslide-html {
   background: none;
}

[peaceful]

Find and remove this near the bottom of your higshlide.css file:

Code: Select all

.highslide-html {
   background: none;
}

Great!
Thanks, RoadRash, you're my hero today