oldmankit
Posts: 3
Joined: Wed May 16, 2012 8:12 am

Nextgen gallery + highslide - loading forever

I posted a question on the wordpress.org forum. Eventually I realised it wasn't a problem with the nextgen plugin, as thickbox was working. So I guess it must be something to do with highslide + nextgen.

My original question is http://wordpress.org/support/topic/plug ... st-2821591.

Basically, when you click on any image associated with highslide, the loading icon starts spinning, but it never completes loading.

I've tested this in several browsers in linux and windows.

A sample page is http://oldmankit.com/fire-power/
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Nextgen gallery + highslide - loading forever

Hi,

You have this in the head of your page regarding Highslide:

Code: Select all

<script type='text/javascript' src='http://oldmankit.com/wp-content/plugins/highslide/highslide-with-gallery.js?ver=4.1.10'></script>
<script type='text/javascript' src='http://oldmankit.com/wp-content/plugins/highslide/highslide.config.js?ver=4.1.10'></script>
<script type='text/javascript' src='http://oldmankit.com/wp-content/plugins/highslide/highslide-full.js?ver=4.1.10'></script>
You canÔÇÖt use both highslide-full.js and highslide-with-gallery.js. Remove highslide-with-gallery.js and use only highslide-full.js.
Important! The highslide.config.js file must be placed after the highslide-full.js file.

Your highslide.config.js file doesnt exist on your server. The config file contains the settings for your Highslide images/galleries. Wrong path for hs.graphicsDir is the reason for the continuous Loading icon when clicking the image. Since your config file is missing, the default path for hs.graphicDir is used but the default path will not work in your site.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
oldmankit
Posts: 3
Joined: Wed May 16, 2012 8:12 am

Re: Nextgen gallery + highslide - loading forever

RoadRash wrote:Hi,

You have this in the head of your page regarding Highslide:

Code: Select all

<script type='text/javascript' src='http://oldmankit.com/wp-content/plugins/highslide/highslide-with-gallery.js?ver=4.1.10'></script>
<script type='text/javascript' src='http://oldmankit.com/wp-content/plugins/highslide/highslide.config.js?ver=4.1.10'></script>
<script type='text/javascript' src='http://oldmankit.com/wp-content/plugins/highslide/highslide-full.js?ver=4.1.10'></script>
You canÔÇÖt use both highslide-full.js and highslide-with-gallery.js. Remove highslide-with-gallery.js and use only highslide-full.js.
Important! The highslide.config.js file must be placed after the highslide-full.js file.

Your highslide.config.js file doesnt exist on your server. The config file contains the settings for your Highslide images/galleries. Wrong path for hs.graphicsDir is the reason for the continuous Loading icon when clicking the image. Since your config file is missing, the default path for hs.graphicDir is used but the default path will not work in your site.
Wow, I am really impressed, and grateful, for your advice.

These errors creeped in after I moved domains, and also upgraded highslide forgetting to put the config file back in place. But I was never aware that I was calling highslide-full and highslide-with-gallery incorrectly.

I have fixed these errors and updated the highslide.config.js file's contents. I've double-checked everything. However, the image is still stuck on loading...

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

Re: Nextgen gallery + highslide - loading forever

The outline graphic file is missing from your outlines folder (highslide/graphics/oulines). This is the outline graphic file that comes with the zip file downloaded from the Highslide Editor. You will not find this file in the zip file from the Highslide download page. You can probably use one of the 6 pre-defined outline graphic files from the regular zip file. The outline is set in hs.outlineType. If you want to use rounded-black.png you can replace the existing hs.outlineType like this in your config file:

Code: Select all

hs.outlineType = 'rounded-black';
You will also get problems with the controlbar because the custom CSS from the Highslide Editor is missing from your highslide.css file. The custom CSS is normally placed at the bottom of the file, but your CSS file misses this part. The settings for the controlbar in your config file contains codes that needs custom CSS from the Editor.
ItÔÇÖs important to not mix files from the two different zip files (the zip from the download page and the zip from the Editor) to avoid things like this.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
oldmankit
Posts: 3
Joined: Wed May 16, 2012 8:12 am

Re: Nextgen gallery + highslide - loading forever

RoadRash wrote:The outline graphic file is missing from your outlines folder (highslide/graphics/oulines). This is the outline graphic file that comes with the zip file downloaded from the Highslide Editor. You will not find this file in the zip file from the Highslide download page. You can probably use one of the 6 pre-defined outline graphic files from the regular zip file. The outline is set in hs.outlineType. If you want to use rounded-black.png you can replace the existing hs.outlineType like this in your config file:

Code: Select all

hs.outlineType = 'rounded-black';
You will also get problems with the controlbar because the custom CSS from the Highslide Editor is missing from your highslide.css file. The custom CSS is normally placed at the bottom of the file, but your CSS file misses this part. The settings for the controlbar in your config file contains codes that needs custom CSS from the Editor.
ItÔÇÖs important to not mix files from the two different zip files (the zip from the download page and the zip from the Editor) to avoid things like this.
Thank you so much, it's working now! To make things easier next time I upgrade, I edited my config file to:

Code: Select all

hs.outlineType = 'drop-shadow';
One less file to forget to upload.

So now I know what I need to do next time on upgrade:
1) download a new zip file
2) copy my custom highslide.config.js file
3) copy the extra css in highslide.css and append to the downloaded highslide.css file.

Thank you so much for taking the time and trouble to debug this for me.

Return to “Highslide JS Usage”