Highslide with CI3

I cannot get Highslide to work with CI - just get the "Loading" message when I click on an image to expand it. Used Highslide many times with no probs on sites with no framework. Looked at the page source too and it is the same as on non-framework sites, except I'm using an absolute path (with base_url()) instead of a relative path.

Anyone got any ideas as to what to twiddle ?

Thanks !

Can we see your example an how your code looks like?

Can we see your example an how your code looks like?

Go to http://www.codeigniter.org.uk

On the home page there are three pictures on the right hand side of the page - though only the top one is showing - no idea why the other two don't show - just another CI funny I guess. (They show OK on my test server at home)

The top picture has the highslide event active. so you can see what happens when you click it

Good Luck

Hey sackbut,

I don't think the problems are CI related, but before we will get there when we tackle some other small problems first.

If you right-click your site and click 'Inspect element', and then go to the console, you can see that there a some 404 problems. First of all the 2 pictures have an extra . after the extension like:

Code:

<img src="http://www.codeigniter.org.uk/application/views/images/potsdamer_platz.jpg." title="Potsdamer Platz, Berlin" class="content" alt="" />

If the extra . is removed the pictures will appear normally in your site. (It was surely a rainy day visiting Berlin...)

There are also a couple of highslide related files not found, so before you go on you better fix all the 404 errors.

And then for the problem with highslide. Are you sure highslide works fine when also using the bootstrap framework? Maybe you can test that by temporarily removing the bootstrap...js. The menu will stop working and maybe the site would look a bit messed up, but you'll be sure that bootstarp isn't biting highslide or whatever..

Good luck!

If you look at the error log (firebug) you will see a few errors items not found, maybe this causes an javascript error and stop the execution.

"NetworkError: 404 Not Found - .../C_tweed/highslide/graphics/zoomout.cur"
"NetworkError: 404 Not Found - .../C_tweed/highslide/graphics/outlines/drop-shadow.png"

Fix the missing files and try it again.

Hey sackbut,

I don't think the problems are CI related, but before we will get there when we tackle some other small problems first.

If you right-click your site and click 'Inspect element', and then go to the console, you can see that there a some 404 problems. First of all the 2 pictures have an extra . after the extension like:

Code:

<img src="http://www.codeigniter.org.uk/application/views/images/potsdamer_platz.jpg." title="Potsdamer Platz, Berlin" class="content" alt="" />

If the extra . is removed the pictures will appear normally in your site. (It was surely a rainy day visiting Berlin...)

There are also a couple of highslide related files not found, so before you go on you better fix all the 404 errors.

And then for the problem with highslide. Are you sure highslide works fine when also using the bootstrap framework? Maybe you can test that by temporarily removing the bootstrap...js. The menu will stop working and maybe the site would look a bit messed up, but you'll be sure that bootstarp isn't biting highslide or whatever..

Good luck!

Thanks for that useful reply. Shows how handy it is to have a second pair of eyes - I had been staring at the page source for hours and never spotted those two full stops at the end of the image file names ! What threw me off the scent was that it worked OK on my test server at home ! .

Well - that's fixed now, but no joy with Highslide. I cannot find any way to adjust the path so that the graphics resources which produce the 404 can be located by Highslide. It is that which is breaking it, for sure. It's not fighting Bootstrap - if you go to this url :http://www.codeigniter.org.uk/bootstrap/hislide_demo.html you'll see Bootstrap and Highslide playing together nicely.

I had similar problems with jAlbum and the only fix I found was to run it inside an IFrame. This is OK when you have a whole photo album, but you can't really do this when you have a couple of pics on a page you want to expand.

So - right now, I'm stuck !

Thanks Again

If you look at the error log (firebug) you will see a few errors items not found, maybe this causes an javascript error and stop the execution.

"NetworkError: 404 Not Found - .../C_tweed/highslide/graphics/zoomout.cur"
"NetworkError: 404 Not Found - .../C_tweed/highslide/graphics/outlines/drop-shadow.png"

Fix the missing files and try it again.

Hello

I have repeated your observations here, and it is the missing files that are breaking the app, for sure and stopping the js running. But I cannot find any way to set the path to the graphics folder that Highslide needs, without CodeIgniter chewing it up. I really want a "normal" url, not a controller/method/parameter url, but just for this one page. Don't think you can do that, can you ?

At least - I think that's what I need ! I do find all this URL tweaking hard to get to grips with.

Thanks for reply

Hey sackbut,

looking at your code again I realised that you are using the /application/views/ folder for images and javascripts. I would advise to move those files to another folder, because the views folder is really only for views. And you are giving the location of your application folder away to everyone.

What I do starting a project is create an assets folder in my root which holds folders for images, javascripts and other stuff unrelated to codeigniter.
It will look something like:
- root
 - assets
  - img
  - js
  - css
  - ...

Where I think this is better practice, it gives you an easy way to exclude files from being parsed bij CI by adding a line in your .htaccess like so:

Code:

 RewriteCond $1 !^(index\.php|assets/img|assets/css|assets/js|assets/js/highslide|robots\.txt|favicon\.ico)
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d

Hope this helps!

I have repeated your observations here, and it is the missing files that are breaking the app, for sure and stopping the js running. But I cannot find any way to set the path to the graphics folder that Highslide needs, without CodeIgniter chewing it up. I really want a "normal" url, not a controller/method/parameter url, but just for this one page. Don't think you can do that, can you ?

I dont know highslide .. but if it needs a url relative to the images you can simple write the realtive URL like

/assets/images/....

I allway make an assets folder in the document root to access static files directly.

Hey sackbut,

looking at your code again I realised that you are using the /application/views/ folder for images and javascripts. I would advise to move those files to another folder, because the views folder is really only for views. And you are giving the location of your application folder away to everyone.

What I do starting a project is create an assets folder in my root which holds folders for images, javascripts and other stuff unrelated to codeigniter.
It will look something like:
- root
 - assets
  - img
  - js
  - css
  - ...

Where I think this is better practice, it gives you an easy way to exclude files from being parsed bij CI by adding a line in your .htaccess like so:

Code:

 RewriteCond $1 !^(index\.php|assets/img|assets/css|assets/js|assets/js/highslide|robots\.txt|favicon\.ico)
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d

Hope this helps!

All makes sense...but it does not work. Set up a folder scheme to match your re-write rule. But HS still not finding the files it needs, and the console gives weird paths to the picture resources- not assets/js/highslide/graphics, as I expected - that's what the code says it is.

And the htaccess has screwed up CI - all of the menu links give 404s now. That's probably something to do with Apache config for mod-rewrite, about which I know zilch.

I'm beginning to lose the will to live as far as CI is concerned.