Highslide for Wordpress *reloaded*

Highslide for WordPress reloaded

Welcome to Highslide for WordPress *reloaded*,
my intention behind this plugin was not to upload a additional highslide image popup plugin in the WP extension lib. There are quite many of them already present but I tested all and none of theme gave me all possibilities. Because I had done another successful HS Plugin for the CMS Joomla already I took my experience I made and created the “Highslide 4 WordPress *reloaded*”

Features ?

In Short terms: This Plugin automatically insert Highslide Script to your Blog without the need of any further configuration, Shorttags or editing of old posts. But on the other hand, if you want to change something you just can do it without “hacking” HTML or PHP Files by yourself. You have access to all Highslide options. Additional to this the Plugin offers support of the Highslide HTML Expanders. I am a example expander

Summarized:

• Including latest Highslide Scripts no need to seperate downloads or updates
• Optimized and JS packed for good pagespeed
• Optimized HS Graphics, save some bandwidth compared to the original
• Possibility to use Highslide HTML Expands
• Easy configuration
• Advanced setup possible
• optimized to pagespeed and yslow rulesets
• integrated Coralize CDN support
• Highslide Gallery enabled

Examples.

Image Expander

Click to Expand

Need Help ?

In this Part I try to answer some frequently asked questions and give a short introduction how to install and use the Plugin. If you still have questions or suggestions please visit the Plugin Forum.

1. Installation

Install the Plugin like every other WordPress plugin. You have two options:

A) use the buildin wordpress Autoinstaller. Goto Plugins -> Add New -> Search by Term: “Highslide 4 WordPress *reloaded*” and choose install.

B) manually download the plugin, extract it and place the directory “highslide-4-wordpress-reloaded” as a subdirectory into your wordpress plugin directory. Usually: “/wordpress/wp-content/plugins/“

After this first Step is done you have to Activate the Plugin and check the Pluginsettings. “Settings -> Highslide 4 WordPress” at this point it is necessary to accept the license. Without accepting it the Plugin is in a disabled state.

2. Settings

In this Section I list the possible Settings and try to describe what they do.

General Options

Use Coral CDN as JS/CSS source
By enabling this checkbox the JS and CSS files of highslide are served from the CoralCDN, this reduce the used bandwidth at your server and may speedup the loading time. (Depending in which Country you live) Just give it a try. More Info about the free Coral CDN: here.

Enable Fade In/Out transition in Galleries ?
This Option add a fading effect to the regular expand/contract effect. detailed Info

Disable Highslide Credits ?
Disable the credit overlay of Highslide.

Disable Highslide on Attachment Images ?
If you enable this the plugin ignores images posted as attachment into your post. This is useful to link images e.g. for direct download.

Align expanded images to center ?
The expanded images is aligned to the center of the page.

Add ext. Icon to [highslide]*[/highslide] Links ?
This adds this little Icon ““ in front of HTML Expander links.

Handle SWF files auto. as Object in HTML Expander ?
If this Option is enabled you can use the highslide expander to display flash files. Just specify a SWF URL in the expander.

[highslide]http://test.test/test/test.swf[/highslide]

the expanded SWF will automatically wrapped by a Flash Object code. The Plugin identify the SWF by checking the last 4 characters if they match to “.swf” (cans insensitive) the plugin handle the flash file. Time to time it is possible that a SWF url need to pass parameters like test.swf?get=3234&video=bcd in this case just add another get parameter: test.swf?get=3234&video=bcd&swf=test.swf

Slideshow delay:
This one specify the delay in seconds if you start a slideshow.

HS appearance:
Select and try. You can choose of different pre defined expander styles. Just what you like. If you select “use own definitions in Advanced section” the plugin does not insert any formating code you have to do this by your own in the textarea box at the advanced option dialogue.

Dimming opacity:
Should the webpage in the background get dimmed while viewing the expanded image ? At this option you can select the opacity of the dimming feature.

Heading source:
Select what part of the Image information should displayed as a heading on the expanded image or choose none for no heading. Currently it`s not possible to use the Wordpres “caption” with JS I can just query the image attributes like Title and Alt.

Caption source:
Select what part of the Image information should displayed as a caption on the expanded image or choose none for no caption. Currently it`s not possible to use the Wordpres “caption” with JS I can just query the image attributes like Title and Alt.

Advanced Options

Force Include of JS Code into Page Header instead of Footer.
By default the plugin includes the JS files at the end of the page into the footer. This is recommended behavior by google Pagespeed or Yahoos YSlow. Normally this is fine, but some Themes may not accept this and the plugin does not load completely. In this case turn on this Feature and the JS is included in the page header instead of the footer.

Enable </p> workaround.
On some WP installations I noticed that the HTML Expander [highslide] shows strange line break behavior. If you using multiple HTML Expanders on one page as a listing you maybe have to enable this. Please read this Forum Post for more information explaining in detail what this checkbox does.

Disable the Highslide Media Icon.
Since 1.14 this Plugin insert a small Media Icon into the WP-WYSIWYG Editor, by checking this option you can disable this icon.

Use custom highslide.css ?
Some blogs use their own custom CSS files. If you want to edit the highslide CSS files to better fit your page design it is not very effective to change the original CSS files coming with this plugin. Why ? Because each time you update the plugin your changes have to be redone. This Textbox give you the possibility to create a copy of the default highslide.css file and specify it. Now the specified CSS file will be loaded instead the default one. Please enter full URL. (Leave empty for default) e.g.: http://mydomain.com/myhighslide.css

Custom Highslide Config:
This is for the advanced user who want to customize highslide. Get sure to enter only valid JavaScript code into this Area, if not you can break the functionality of your webpage. More information of possible Settings: here.

Multisite Support

Some HS4WP Users asked me to integrate a full WordPress Multipage support. Well, this section is kind of. I`m never worked with WPMU for myself so its hard to get a full understanding of the different API functions. Also not every function is as well documented as it should. So please see this part currently just as a experimental enhanced workaround.

How does it work ?

Well you only see this Section if you are in a level of a Networkadmin, normal site admins just see the default HS4WP settings without this part. This feature works as a Options Fallback, if you once setup a default set by checking the Multisite checkbox it will be stored in the database as “network default” as long as you re-set it. If a Network site doesn`t have its own setup done it will fallback to the stored network default set. If a Site admin now change something at his own subsite plugin settings the changed settings will be priorized.

Conclusion: site related setup = primary, Network default set = secondary.

Just that simple :)

Using the HTML Expander

The Plugin offers the possibility to use the Highlside HTML Expander to display additional Information. (Example) You can insert a Expander by clicking the small Highslide Expander Icon in the WYSIWYG Editor or by inserting the syntax manually.
Syntax:

[highslide](Title;Link Name;Width;Height)Your content[/highslide]

Options:

Title: This will be the Caption of your Expanded HTML Window
Link Name: This is the Link text of the expander
Width: Width in pixel
Height: Height in pixel

Example:

[highslide](This is my Expander;Click to Expand;640;480)This is my Text, I can also specify HTML Code or insert images or other Media![/highslide]

This will look like this: Click to Expand

Download

All released versions could be downloaded here.

Like it ?

Please donate if you like it.

Pingback: Garden Ornaments, Weeping Ash
Pingback: TEST | maxi6tm
Pingback: mundoh.Portfolio: summary.
Volontir

excuse me, but next/prev menu won’t appear on highslide, why?
http://www.dropbears.com brough

How does one add a thumbnail? There does not seem to be any example code or instructions for this. The HTML expander works just fine, but it’s not at obvious how to deal with images.
http://solariz.de M|G

Just use the default WordPress functions of the WYSIWYG Editor to upload a Image and insert a thumb into your post everyting else is handled by the plugin.
Markus L

The language translation tools does not work for special characters like the duth ü. My Swedish characters å ä ö gets rendered very funky. Else it is a really good plugin! Keep up the good work! I love it!
http://twitter.com/aghdesigns Andres Garcia H.

I have portfolio page with featured images as the thumbnail of the project how can I include highslide to work with the featured images?
http://twitter.com/aghdesigns Andres Garcia H.

I have portfolio page with featured images as the thumbnail of the project how can I include highslide to work with the featured images?
Mario Bruneau

Hi,
Do you still need the “regular” HighSlide” plugin in order to work ?
http://solariz.de M|G

No everything included
http://solariz.de M|G

I have no problems with German Umlauts Ä Ö Ü can you post me the strings wich getting “funky” ? ;)
Rune Gangstø

I have problems with the norwegian letters as well. æøå They show up like this: å ø etc…

edit:okay… your commenting system changed my letters :-P
The letters show up like: & aring ; etc…
Mario Bruneau

Thanks M|G
Mario Bruneau

I think it wont unless you “hover” the slide.
http://solariz.de M|G

Im back at hom ein roughly 2 weeks. I will have a look on this strange behavior asap.
http://twitter.com/tylerlukey Tyler Lukey

I think I have this issue too. I want a thumbnail image and when you click it will open my flash file. SO basically it a way to use an image instead of just the text.
muniocz

Hi, I have same problem with czech ‘special’ letters - á, š, ý, í, é, ú.
Entities: á, š, ý, í, é, ú
http://solariz.de M|G

I think I will give the encoding part a complete rewrite on the weekend :)
Barham

Were you able to fix the issue? I’m having the same problem. Hovering doesn’t fix.
Rob

Hi, just updated to 1.23 and upon activate get the following Fatal Error: Parse error: syntax error, unexpected T_FUNCTION in …/wp-content/plugins/highslide-4-wordpress-reloaded/functions.hs4wp.php on line 279
Marc Shade

I just had the same experience. The plug-in has worked great until the update this morning.
http://solariz.de M|G

What PHP Version you are using ?

Please try to replace the functions.hs4wp.php with the new one included in the ZIP File:
http://trash.ctdo.de/b/588rctrx464/functions.hs4wp.zip
Rob

Thanks, 1.24 works fine!
Jowy Atreides

1.24 works fine, i had to downgrade to 1.22 this morning.
thank you for this quick fix!
http://bloginsphere.com Chris

I just upgraded to 1.24 and got
Warning: strtolower() expects parameter 1 to be string, array given in /home/XXXXXX/public_html/wp-content/plugins/highslide-4-wordpress-reloaded/functions.hs4wp.php on line 672
http://solariz.de M|G

I fixed this for the next release this normally only happen if you use a custom language and have one field empty, you can fix this easy:

Open the file:
content/plugins/highslide-4-wordpress-reloaded/functions.hs4wp.php

with a Text Editor and search for:

if(strtolower($value) == “off”) $value = false;

Should be in Line 672, and replace it with this:
if(@strtolower($value) == “off”) $value = false;

This should do the trick.

thanks for report.
Ayaz

Hey there,

This plugin is just displaying me the header text and not the body. Can you tell me what am I doing wrong?

I used the same text provided above for testing.. i.e.

[highslide](This is my Expander;Click to Expand;640;480)This is my Text, I can also specify HTML Code or insert images or other Media![/highslide]

Now when I click the link it opens up the highslide window with just header text in it.. and also it doesn’t show the correct width and height for the window.. instead it shows width:400px and height: 1px
Jochen Pippir

Ich hatte das gleiche Problem und mit dem Fix geht es jetzt. Mittels Google Chrome konnte ich hier keinen Beitrag verfassen.
Johnnie Johansen

Got the same error here, fixed it with
if( is_string($value) && strtolower($value) == “off” ){ $value = false; }

The “funny” thing is that gettype($value) = string..
http://twitter.com/RyanAll Ryan A

Hi there,

Is it possible to show the HTML Expander in the default Text(&HTML) Widget, just I have been trying and just shows the actual source itself.

Thank you.
Ronald

I have a problem with flash files. When highslide enlarges a picture and there’s a flash file nearby, the flash is shown over the picture. I’ve set the z-index setting of the plugin to 9999, but still the same problem. Any idea how to solve this?
http://solariz.de M|G

Yes, the problem is most browsers renders flash in a separate layer. Possibility is to use wmode on the flash objects. I’m currently on vacation so just have my mobile phone, if u Google for flash+ wmode you should find more about it.
Tramfahrer

Das Plugin geht nicht mehr und im Settings Bereich ist das hier grau hinterlegt

Disable Highslide on Attachment Images ?
(Since WordPress 3.x it`s not possible to override the Next Attachment URL so this is currently disabled.)
Wlpdrpat

I would like to add a link in my theme, e.g. and image that when clicked expands and displays specific content. Can I achieve that with your plugin?
http://twitter.com/zulo800 David

Sorry I’m stupid but how can I put the navigation buttons?? They don’t appear anywhere…
Hans

upgraded to WP3.3 and 1.3 twenty eleven. The page header is not removed anymode. Pictures arer partly hidden behind the page header.
Hans

For the problem stated below of the overlapping header, increased the z-index to 10003, this solvwed the issue
http://www.iarctic.no Arctic Foto

After the lates upgrade I lost the translation to my language? I have mark the checbox and my translation is also there.
Anonymous

After updating WP to 3.3 have appeared warning in highslide settings: “Warning: strtolower() expects parameter 1 to be string, array given in /wp-content/plugins/highslide-4-wordpress-reloaded/functions.hs4wp.php on line 672″.
http://solariz.de M|G

Thanks for the error report, I will check WP 3.3 update tomorrow and publish a fix.
haki

I have same issue.
http://solariz.de M|G

For WordPress 3.3 please download Version 1.25 of the Plugin:
http://wordpress.org/extend/plugins/highslide-4-wordpress-reloaded/changelog/
http://kiri-online.co.uk Kiri

I am using your wordpress plugin. Does Highslide work with image magik thumbnail generator? I am finding the standard thumbnail is creating poor quality thumbs and my site is a photogallery. When I switch on image magik on no thumbnails are produced but I don’t get an error message either
Cyrax.NET

Is it possible to use the HTML expander but instead of it opening from a text link, it can open by clicking an image?

Thanks
Cyrax.NET

Oops I didn’t realise you can put a url to an image in the syntax.

anyone that needs it, it is:
[highslide](Title;http:URLtoimage/image.jpg;height;width) what ever is your content[/highslide]

One thing that dosn’t seem to work when using with NextGen is custom configurations. I tried entering the below but it stops the ngg/highslide working. You just get the “loading….” on the image thumbnail and nothing opens.
Any ideas people? Thanks.text-controls .highslide-full-expand { display: none;}
Victor

I’m using your nice plugin in my blog, it works perfectly. Just a tiny problem. When writing
[highslide](This is my Expander;Click to Expand;640;480)This is my Text, I can also specify HTML Code or insert images or other Media![/highslide]
everything goes as expected. However, if I write
[highslide](This’s my Expander;Click to Expand;640;480)This is my Text, I can also specify HTML Code or insert images or other Media![/highslide]

then it miswrotes both the link and the heading (aparently because of the apostrophe). Is there a way to avoid this?

Thanks in advance
http://solariz.de M|G

I’ll check this. Maybe a small bug.
http://solariz.de M|G

Did your nexgen overlay turned off? 2 highslide scripts can lead to errors.
http://www.kiri-online.co.uk/ Kiri

I have WP 3.2.1 and highslide 1.2.2 my images in the slideshow mode do not centre and I get a grey box when it transitions between landscape and portrait or any different size or ratio image. How can I fix?
http://www.kiri-online.co.uk/nature-photography-image-gallery/bumblebees-and-bugs/
http://solariz.de M|G

Hi Kiri,

for the gray box: Open the file ‘highslide.full.css’ and goto line ~488 there you find a setting ‘background: gray’ this is wrong. Change it to ‘background: transparent;’ this should do the trick.

Regarding the Center Thing: If I look at your Gallery the images are proper centered if I view them (Chrome and Firefox)
http://www.kiri-online.co.uk/ Kiri

I’ve fixed the background thank you:-). I am using firefox and still have the centre issue. The gallery grid thumbnails are centred but when you run the slide show when the first vertical portrait image is central but when it then transitions to landscape picture in the second image a landscape then the bottom of the image goes to the bottom of the page rather than the centre of the image staying in the centre of the page
http://www.kiri-online.co.uk/nature-photography-image-gallery/bumblebees-and-bugs/
think it might be something to do with confguring part of the hs.addSlideshow code (the code for the controlbar) and the fixedControls: ‘fit’, variable?? where are these configurable in the plug in?
http://solariz.de M|G

Approve Sent on Samsung Galaxy S2——– Originalnachricht ——– Von: Disqus Sent: So., Jan 8, 2012 3:55 nachm. An: mg@solariz.de Cc: Betreff: [solarizde] Re: Highslide for WordPress *reloaded*
Disqus generic email template

NOTE: This comment is waiting for your approval. It is not yet published on your site.

======

Kiri <kiran@kiri-online.co.uk> (unregistered) wrote, in response to M|G:

I’ve fixed the background thank you:-). I am using firefox and still have the centre issue. The gallery grid thumbnails are centred but when you run the slide show when the first vertical portrait image is central but when it then transitions to landscape picture in the second image a landscape then the bottom of the image goes to the bottom of the page rather than the centre of the image staying in the centre of the pagehttp://www.kiri-online.co.uk/nature-photography-image-gallery/bumblebees-and-bugs/think it might be something to do with confguring part of the hs.addSlideshow code (the code for the controlbar) and the fixedControls: ‘fit’, variable?? where are these configurable in the plug in?

User’s profile
Link to comment
IP address: 94.3.68.184
Markus

Just me having problems with the latest version of WordPress? I can not get the Highslide plugin to work at al
Markus

Just says “Loading…” then nothing happens. And most of the time if I click an attachd image it will open the image url in a new browser window. Like WordPress default if you chose to open the image url as the link
http://twitter.com/theSubtleSensor Daniel Romani

I’m having the same problem. Images just load in a separate window like default WP, as if the highslide script isn’t being used.
http://solariz.de M|G

Hey,

please change the Option “Use Coral CDN as JS/CSS source” in the Highslide Plugin Setting to OFF!
The Coral CDN seems broken. I will remove this in the next public release and replace it by another option.

This should be the solution for you but please let me know if it works afterwards.

Thanks
http://solariz.de M|G

Hi Daniel,

same Problem as Markus had, same solution:

“please change the Option “Use Coral CDN as JS/CSS source” in the Highslide Plugin Setting to OFF!
The Coral CDN seems broken. I will remove this in the next public release and replace it by another option.”

I estimate how much interested the commercial Plugin Users are in a remote CDN Hosted Highslide for a minor fee. Maybe I will implement something like a Level3 CDN but for the first step I will remove Coral CDN Option.

Please let me know if it works for you.
http://twitter.com/theSubtleSensor Daniel Romani

Hi,

Yes that worked straight away. Thanks for the quick response! can’t believe I didn’t think of that myself though, I’m using Coral CDN to cache the website and I noticed that it’s really slow in serving up pages today! D’oh!
nabate

Just installed yesterday with Core Theme on WordPress…Using it with InstaPress plugin. It was working fine, then all of a sudden, when clicking on the images, it just opens them in a new window. Any suggestions?

Thanks
http://solariz.de M|G

Hi, can you provide me a link where I can see the installation ? 1st try to disable the Coral CDN Option in the settings.
http://tarnaeluin.houseofbeor.net/ Beren

Nice plugin – I was looking at the HS galleries with the thumbnails displayed with the image – for example “box with thumbstrip above image” and wondering how to get that working with your plugin. Do you have some advice?

kind regards,

beren erchamion
http://tarnaeluin.houseofbeor.net/ Beren

Nice plugin! I was wondering how to add support for the highslide image viewers that also have a gallery/carousel with the expanded viewer either above or on the side vertically. Any advice on how to do this?

oops – sorry for the double post…

kind regards,
beren
http://solariz.de M|G

Hi,

a Highslide Gallery with thumbstrip is possible. For Exampe nexgen gallery is compatible to hs4wordpress.
To do it manually you can insert this https://gist.github.com/1653997 code in the custom config part of the plugin and insert the images like this:
https://gist.github.com/1654005

A slider / Carousel in WP itself isnt possible.
http://www.craftyjo.org.uk/ Nigelm

I love your plugin, but the latest version (v1.26) has killed the display of the navigation bar which usually shows on top of popup photos on my websites. Reverting to v1.25 fixes it. I wonder if anyone else has seen this?
Iakovosg

The same thing happened to my website. It killed the display of the website for Firefox. It still operates under Chrome and IE 9 ok
http://tarnaeluin.houseofbeor.net/ Beren

Thanks! I’ll give this a shot!
Kuba

The new version caused stop showing any photo on my site. It only apperas “Loading…” and nothing else. I ise it with Next Gen Gallery. Please fix it if it is possible.
Tobias

auch ich habe das Problem, dass wenn ich auf ein Bild klicken nur Loading dasteht und sich nichts tut
Mat

Same problem here. Only “Loading” appears, but nothing else happens. Any solutions?
Mat

Installing the old version again solved the problem for me, until a fix will be maybe available…
damjang

Same here :-(
Iakovosg

where did you find the older version? Can you please tell us ?
grappa

Works no more since las update :-( Only loading appears. Any Ideas?
Michele Cogo

i can change image only thanks to the keyboard. The graphic arrow disappeared. How fix it?
http://twitter.com/TimKras Tim Scheir

Is it posible to change te text ‘Click to close image, click and drag to move. Use arrow keys for next and previous.’ to the alt property of the image.
It would be great if you could set this in the options.
http://solariz.de M|G

@all:disqus New Version 1.27 should fix the problems occured with 1.26
Sorry for this buggy release, worked well on 3 test installations. Error only occured under several circumstances :(
Iakovosg

Version 1.27 has not fixed my issues.
When in Firefox v 9.0.1 with WP 3.3.1 and latest PHP, the website is not showing at all. I see a blank page.
I don’t know if it has fixed others problems…
Mat

The new release worked for me. Thanks!
http://solariz.de M|G

@3e57b9533ca5decf3e9e965a9ee2341e:disqus Please check your PHP Error log. A blank white page in general means that a critical PHP error HALT occured. You can find it in your apache error log or by truning on error display on the webpage. Normaly this only happens if a unsuported PHP Version is used < 5.3

Alternatively you can download a older version like 1.25 and check if it is working:
http://wordpress.org/extend/plugins/highslide-4-wordpress-reloaded/download/
Iakovosg

Hi @M|G,
Thanks for the msg. Isn’t WP supposed to complain if you try to upgrade to version 3.3.1 whilst on an older version of PHP ? I believe once WP accepts the PHP version it should be ok !? right ? I will check versions and error logs. Thanks for the tip
Pingback: Plugins im Blog — blog.krakovic.de
Scott Heimdal

The new release works but I no longer have controls for the galleries; each image must be opened and closed one at a time. Being able to select a format for the controls (black, white, large, small, etc) while specifying their position would be a great feature!
Scott Heimdal

Could you provide examples of proper code syntax to be used in the Custom Highslide Config section. Trying regular code from the Highslide website doesn’t seem to work (at least for me).
ronald

New version works with Firefox and Chrome, but not with Internet Explorer. Please fix it!
Thom

Since this newest version my whole website is down (404 not found). when disabeling your plugin, my webpage is working fine again
http://www.craftyjo.org.uk/ Nigelm

It hasn’t fixed the display of the navigation bar
which usually shows on top of popup photos on my websites. I’ve had to revert to
v1.25 to fix it again!
http://solariz.de M|G

@3a99bba85ec97e94265f4192f137ea18:disqus What is the “new version” ? There were 4 new versions in the past 10 days ;o
http://tarnaeluin.houseofbeor.net/ Beren

U rock! But you are taking all my fun – I was going to try and figure that out with the thumbstrip, but you have beat me to it. Nice work! Works great in FF and Chrome!
http://www.craftyjo.org.uk/ Nigelm

Are you aware that your example of an Image Expander above doesn’t work? I’m using FF9.0.1, and the image opens in a new page.
http://solariz.de M|G

Thanks, corrected now :p