Tech Projects » Wordpress HighSlide JS Plugin

Home » Wordpress HighSlide JS Plugin

Wordpress HighSlide JS Plugin

Highslide JS is a brilliant thumbnail viewer written in javascript. WP-Highslide is a wordpress plugin that allows you to easily use Highslide by automatically inserting the necessary javascript into your posts or pages. The plugin makes uses of a wordpress quicktag to make the insertion process painless.

Also, for users looking to customize highslide, this plugin gives you the flexibility of editing the javascript object settings, setting global options through the options page, or overriding the global options for indivdiual images, all without having dig through the plugin code. [See FAQ for more info]

Demo

Previous Next Close

Corpse Bride Wedding Cake

Previous Next Close

Topsy Turvy Cake NJ

Previous Next Close

Wedding Cake from www.pinkcakebox.com

Previous Next Close

Billiard Cupcakes from www.pinkcakebox.com

Other Examples

See the plug-in in action at our wedding cake gallery, novelty cake gallery or Gourmet Cupcake Gallery or Gourmet Cookie Gallery

Check out Sébastien use of this plugin on his photo blog.

Larry Hnetka gives a review and demonstration of the highslide plugin on his blog.

Some cool graphic design work by Doug Nelson

Niklas has put together a short video of some of highslides features.

Installation

THIS PLUGIN REQUIRES Highslide JS from Torstein Hons which is YOU MUST DOWNLOAD SEPARATELY. If you are running a COMMERCIAL site you must pay for Highslide JS. Current version of plugin is compatible with Highslide 3.3.3 or greater

Note, as of version 1.23, WP-Highslide is compatible with all 2.X versions up to 2.3.1

Unzip contents of zip file to your plugins folder, usually ‘wp-content/plugins/’. It should create a highslide folder underneath the plugins folder.
Download Highslide JS and copy highslide.js to
the new highslide folder created under your plugins folder.
Activate the plugin in wordpress under plugins. Look for WP-Highslide.
Check ‘WP-Highslide’ under options to customize the javascript for highslide
Check Highslide JS site for further customization options

Note: You download Highslide JS script in order for this plug-in to properly work.

Download

Current version of Wordpress HighSlide JS plug-in is 1.28

Download wp-highslide.zip

Change Log

1.0

Initial Release from Beta

1.1

Fixed highslide folder structure so that outlines are properly shown.
Fixed CSS issue in Firefox
Adjusted CSS to properly center caption and right justify close button.

1.11

Fixed css issue with caption. Thanks to Russ Anema for the fix

1.2

Adding global settings options to display caption box, close link and next previous links. Also added ability to override global settings using the <highslide> tag.

1.21

Fixed thumbid generation to ensure compatibility with RSS readers. Thanks to Sébastien for pointing out an issue with the thumbid generation

1.22

Fixed CSS issue in IE6. CSS was generating a 404 on cursor download because of a CSS parsing issue.

1.23

This version is compatible with wordpress 2.1. Fixed issue with quicktags not appearing in editor.

1.24

This version no longer includes highslide.js as part of the zip file download. This component must be downloaded separately. This was done to ensure users get the latest version of highslide.

1.25 - August 14, 2007

Folder structure updated to match new folder structure of latest version of highslide. Also removed windows.onload for preloading images. That is not taken care of internally by highslide.js

1.26 - Sept 20, 2007

Fixed issue with javascript close button not working correctly

1.27 - Oct 2, 2007

Removed extra } from javascript. Thanks to Max for catching this.

1.28 - Dec 19, 2007

Upgraded CSS so it’s compatible with latest version of Highslide 3.3.3. Fullexpand.gif has changed in this version.

Frequently Asked Questions

= Where is my highslide quicktag? =
Unfortunately quicktags do not show up in Visual Rich Editor mode. You have a few alternatives. If you are using Wordpress 2.1, simply switch over to code view and the Highslide quicktag will be available. If you are using Wordpress 2.0.x then you can disable Visual Rich Editor mode or
you can create the tag yourself by using the special <highslide> tag. This tag takes 4 attributes:

image
This is should be the path to the image you want displayed when the user clicks on the thumbnail

thumbnail
This should be the path to the THUMBNAIL image you want displayed initially.

altdesc
This is the copy that will appear in the ALT tag description. Filling this in is good practice for search engines.

captiontext
The caption displayed directly under the large image when the user clicks on the thumbnail

Example Code

<highslide image="/path/to/myimage.jpg" thumbnail="/path/to/thumbnail.jpg" altdesc="" captiontext="" />

Future versions we’ll look to embed a button in the visual rich editor similar to how Viper’s Video Quicktags did.

= Do I have to pay for Highslide JS? =

Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. If you are a non-commercial site the script is free. It costs $30 for each commercial domain

= How can I tell if it’s working? =

Try creating a test post and check to see if the HIGHSLIDE quicktag is available. Click on the tag and follow the prompts to insert your first image.

= When using the HIGHSLIDE quicktag what do all the prompts mean? =

The quicktag will prompt you for the following information:

Prompt 1: Enter path to large Image
This is should be the path to the image you want displayed when the user clicks on the thumbnail

Example: /images/mylargeimage.jpg

Prompt 2: Enter path to thumbnail image
This should be the path to the THUMBNAIL image you want displayed initially.

Example: /images/mythumbnailimage.jpg

Prompt 3: Enter the Alternate Description of the image
This is the copy that will appear in the ALT tag description. Filling this in is good practice for search engines.

Prompt 4: Enter the Caption for the image
The caption displayed directly under the large image when the user clicks on the thumbnail

= When I look at the generated code it is surrounded by a <p> tag. How can I remove that <p> tag? =

This is a “feature” of wordpress. Here is the generated HTML required for highslide. Notice the <p> tags that surround it:

<p><a href="http://www.pinkcakebox.com/images/cake200.jpg" class="highslide"  onclick="return hs.expand(this)"> 
               <…snip…>       
</p>
 

To remove the <p> tag open your default-filters.php and comment out the following line:

add_filter(‘the_content’, ‘wpautop’);

Alternatively there are plugins you can use to disable this feature.

= What version of Highslide JS does this plugin support? =

As of August 14th this plugin works has been tested with version 3.2.3

= Can I still customize Highslide JS using your plugin? =
The plugin was designed to give a high level of flexibility in customizing Highslide. In the WP-HIGHSLIDE options page there are global settings that allow you to toggle off/on the highslide caption box, close link, or next/previous links:

Additionally, you can override the global settings for individual images by using override flags in the <highslide> tag. For example, to override the Show Caption Box:

<highslide image="http://www.pinkcakebox.com/images/cake205.jpg" thumbnail="http://www.pinkcakebox.com/images/cake205-circle.jpg" altdesc="" captiontext="null" show_caption="y"  />
 

Tags that are available

Flag	Usage	Description
show_caption	show_caption=”y” show_caption=”n”	Toggle on/off Highslide Caption
show_close	show_close=”y” show_close=”n”	Toggle on/off Highslide Close Link
show_prv_next	show_prv_next=”y” show_prv_next=”n”	Toggle on/off Highslide Next/Previous Links

Credits

Russ - tester
Torstein Honsi - highslide js creator
Roel Meurders - FLV code that I used as a basis for highlslide

Donations

If you use this script and find it worthwhile please link back to our main site. While we enjoy releasing scripts to the general community, we also look to benefit by drawing more traffic to our sites. Feel free to link back however you want - here is a guideline:

J J. Heap & Son - Manufacturers and distributors of a wide variety of labor saving devices and factory automation technologies including dye sublimation equipment, Heat transfer machines, Fusing Machines, So-Fast Cutting Equipment, Material Handling Equipment and an inventory of rebuilt machines.

Pink Cake Box - Our New Jersey Wedding Cake Shop that specializes in custom made wedding cakes, novelty cakes, cupcakes, wedding cupcake stands and specialty cookies.

86 Responses to “Wordpress HighSlide JS Plugin”

Weblog Tools Collection » Blog Archive » WP Plugin: HighSlide JS Says:
January 9th, 2007 at 10:33 pm
[...] WP Plugin: HighSlide JS allows you to easily use HighSlide by automatically inserting the necessary javascript into your posts or pages. The plugin makes uses of a wordpress quicktag to make the insertion process painless. (No Ratings Yet) Loading … [...]
BloggingPro China » WordPress Plugin: HighSlide JS Says:
January 10th, 2007 at 4:49 am
[...] 　　HighSlide JS，提供漂亮的图片弹出样式，类似缩放效果。　　上传激活。在Options => WP-Highslide可以作一些基本设置，插件在quicktag中提供按钮用于插入图片。 Tags: image, js, picture, thumbnail [...]
Paul HOckley Says:
January 10th, 2007 at 4:53 am
Hey…I just wanted to know if there is any way to force the size of the thumbnails, because if I understood well, now it is set to 100*100 and I have some different sized thumbnails??
Thanks in advance

Paul - this was a bug in my plugin. I was explicitly setting each thumbnail to 100 x 99. I removed those explicit settings to let the browser render the dimensions. This will allow you to use different sized plugins. Download the latest version (1.0) for this fix.
wordpress에 Highslide를 적용하는 방법(2) - 더 쉽고 편한 새로운 플러그인 « Heaven2 Says:
January 10th, 2007 at 7:03 am
[...] Unzip contents of zip file to your plugins folder, usually ‘wp-content/plugins/’. It should create a highslide folder underneath the plugins folder. Download Highslide JS 2.2.7 and copy highslide.js to the folder created in step one, usually ‘wp-content/plugins/highslide/’ Activate the plugin in wordpress under plugins. Look for WP-Highslide. Check ‘WP-Highslide’ under options to customize the javascript for highslide Check http://vikjavev.no/highslide/ for further customization options Download!!! [...]
Paul Hockley Says:
January 10th, 2007 at 8:23 am
woohoo!! thank you so much….very cool plugin BTW
Paul Hockley Says:
January 10th, 2007 at 8:37 am
Hey…another little problem…if you check this page where the plugin is activated…http://jesusrevolution.fr/blog/informations/ the bigger picture opens at the bottom of the screen and the style of the surrounding box seems to be messed up…any idea why?

Paul it’s likely another javascript or css is conflicting with highslide. As a test, try disabling all your plugins and ensure all script and css references are commented out. See if that fixes the problem. If so, you can begin to enable each plugin to try to isolate the issue
Tom M Says:
January 10th, 2007 at 6:19 pm
This seems like a GREAT plug-in…. but what I’d really like is a way to use this in my eBay listings. Any ideas/suggestions??

Tom

Tom if ebay listings allows you to use javascript you can embed the necessary javascript and html into your ebay lists
HighSlide JS Plugin » D’ Technology Weblog — Technology, Blogging, Gadgets, Fashion, Life Style. Says:
January 10th, 2007 at 9:14 pm
[...] Tech Projects [...]
Niklas’ blog » Blog Archive » Interesting image-viewer for the web Says:
January 11th, 2007 at 2:30 am
[...] Thanks to Highslide JS, “a piece of JavaScript that streamlines the use of thumbnail images on web pages”, I’ve implemented it together with Jesse Heap’s Wordpress HighSlide JS Plugin. [...]
Niklas’ blog » Blog Archive » My Del.icio.us bookmarks created during the past week Says:
January 12th, 2007 at 12:19 am
[...] WordPress HighSlide JS Plugin — "Highslide JS is a brilliant thumbnail viewer written in javascript. WP-Highslide is a wordpress plugin that allows you to easily use Highslide by automatically inserting the necessary javascript into your posts or pages." Tagged as: [wordpress thumbnail plugin javascript highslide quicktag viewer] [...]
Alex Says:
January 12th, 2007 at 5:56 am
Though the initial Highslide JS script works on IE7, for some reason the plugin doesn’t work well with IE 7 (it opens up a new window instead of the enlarging effect in firefox.) I’m supposing IE may be ignoring “return false”. Is there any way I can make it work? I’m really preferring this new plugin to the past lightbox plugins. Sorry for the inconvenience and pardon my bad english.

Alex - I just ran the demo at http://projects.jesseheap.com/all-projects/wordpress-highslide-js-plugin in IE 7 and it worked fine. I’m running IE 7.0.5730.11CO. What version are you running? And did you try the demo above?
links for 2007-01-12 en newdisco Says:
January 12th, 2007 at 7:22 am
[...] Tech Projects » Wordpress HighSlide JS Plugin Plugin de Wordpress que hace que las imagenes se vean …. como si estuvieran en el futuro… veanlo para que me crean. (tags: wordpress plugin plugins images photos slideshow javascript web2.0 image gallery2) [...]
301志｛从这里出发，去梦想的草原｝ » Blog Archive » WP插件：Wordpress HighSlide JS Plugin Says:
January 14th, 2007 at 7:00 pm
[...] 又一种浏览图片的方式，比lightbox更吸引眼球。点击看这里 [...]
Sébastien Says:
January 19th, 2007 at 3:14 pm
Hi, thanks for the plugin, works great!

I made a slight modification you may ne interested in.
In wp-lightbox.php, around line 88, when you compute a random number to get an unique THUMBID, I replaced that by appending the md5 hash of the image url:

$val = ‘P’ . $post->ID . md5($o['image']) ;

My understanding is the random number you append to the post ID is just so you get a unique thumb ID. The problem I saw with the random number thing is you get a new ID every single time this is run, including every single time the RSS feed is loaded. That is causing a problem to some RSS readers, they detect the posts containing an image has changed and keep marking them as new. Many RSS readers have the option to ignore updated posts but not all of them, and some people like to be notified when a post is modified and won’t use that option.
Appending the md5 of the image url guarantees uniqueness and does not change each time the page is loaded. Taking the md5 of the image+the thumb+the description might be safer, though. Anyways, works for me.

Thanks again for the great plugin.

Sébastien: Thanks so much for the feedback. I did not know this method caused issues with RSS readers.

I tried using the md5 and unfortunately the CLOSE link doesn’t display when I use that. However, I realized there is even a simpler solution. I can just use the post id and the variable $i which is the loop iterator:

$val = ‘P’ . $post->ID . $i;

That should always be unique. I released this as version 1.21. Thanks again for pointing this out. Also, great photos on blog - they are amazing. I wish we had half your talent, it would come in handy for the cake photos we have to take for my wife’s specialty cake shop.
kingleo Says:
January 23rd, 2007 at 8:59 pm
In WP 2.1, the quicktag in non-wysiwyg editor disappeared.

Thanks for the info. This has been fixed in version 1.23
doug nelson: DISENGAGE! » Do Not Disturb. Says:
January 24th, 2007 at 7:05 pm
[...] (Note: If you’re looking at this in an RSS reader, you’re missing the awesome HighSlide plugin fun) [...]
Doug Nelson Says:
January 25th, 2007 at 10:11 am
Heyyyy, thanks for the mention. And thanks for making HighSlide so accessible…I’m planning on using this on several upcoming projects, so Torstein should definitely be seeing some money coming his way thanks to you.
Let’s Love,Sugar.ღ | plugin test:highslide Says:
January 26th, 2007 at 1:15 am
[...] plugin test:highslide HIGHSLIDE JS [...]
Larry Says:
January 26th, 2007 at 2:10 pm
Yikes, I’m a bit overwhelmed seeing the link to my blog as an example of how your plugin works. It was a quick post and not fancy-schmancy at all so I hope it does justice to how the plugin basically works. This weekend I plan to check out some of the other options in your plugin so check back for more than just the default settings!

Larry, I haven’t done much customization either. With highslide you can create custom skins and overlays which I have yet to attempt. Let me know if you come across any issues…

Leo Says:
February 5th, 2007 at 10:18 am

Hi. I was just wondering how to make a row of pictures in wordpress, especially when using highslide plugin.
Leo - surround your tag with:

<div class="thumbnail">
<highslide .... >
</div>

Where thumbnail is defined as:

.thumbnail
		{
			float: left;
			width: 120px;
			margin-left: 0 15px 15px 0;
			/*border: 1px solid #999;*/
                        text-align:center;
                        border: none;
		}

Run As Never Get, Wander as Never. COMe » Wordpress HighSlide JS Plugin Says:
February 6th, 2007 at 5:43 pm
[...] HighSlide JS Plugin Tech Project’s Wordpress HighSlide JS Plugin is similar feature to WP lightbox 2 which I’m using. The two plugins do the same thing -overlay images on the current page. Tech Projects claim that its Highslide JS 1.23 is fully compatible with Wordpress 2.1 (as well as WP lightbox 2 is also functioning well). Good news that it’s free for non commercial use. [...]
BSD Says:
February 7th, 2007 at 3:56 pm
This plugin gave me 6 errors when I tried to validate my XHTML.

BSD: Okay. Do you have any suggestions on how to fix it or even where the errors occur? I’m not a stickler for XHTML compliance so I’m not intimately familiar with validation issues. Any help would be appreciated
the Perverted Monk» posts archive » Pikachu (biga! biga!) | "mundane monkish musings..." Says:
March 1st, 2007 at 12:53 pm
[...] I’ve just implemented the wonderful Highslide Plugin [↩]Share This [...]
brucenico Says:
March 3rd, 2007 at 7:32 am
Well, that’s a coooooool plugin… ;-)
It would be interesting to offer a thumbnail generation (with this, you’ll just have to upload your full-size image, without care about the thumbnails name and location), but I’m not sure that’s in the scope of the plugin.

Thanks. Yeah that is a good idea for a future feature
baptiste Says:
March 23rd, 2007 at 1:13 am
Hi !

I would like to know if it will be possible in the future to have the html extension to display html or flash content ?

Thanks.

Baptiste - I assume you are referring to the new functionality offered in the latest version of Highslide. I haven’t look at the new functionality yet, but I’ll put it on my list of things to do :)
vicrry Says:
March 24th, 2007 at 11:54 am
When I click to enlarge an image while you viewing another one, two frames viewing the full-size of it’s photo are laying on each other, usually the former one being covered. Seems there’s a single handler on the keyboard events … and no focus changing among frames.
Maybe a callback closing the opening frame that triggers when a frame opens would solve.
Vicrry - that’s by design. The former frame should always be covered, and the newest image should take precedence. There may be a way to configure highslide to automatically close the former image, we’d have to talk to the creator

Also, when I click on the wedding cake photo on this page, I found a weird display on the title contains a line break on firefox. It seems some border or oversized background becoming transparent.
Good catch. I adjusted .highslide-caption height parameter to 40px to remove the transparency gap
Afterall, the plug-in is just impressive and fantastic!

I appreciate your comments. Thanks for the feedback.
Julien Says:
March 25th, 2007 at 10:16 am
thanks for this great plugin, could you tell me if it’s possible to link other thing that image (jpg etc) ? like php or html web page ? thanks !

Julien - I believe the latest version of highslide allows you to link to html pages. I have not tested it with my plugin. Let me know if you are successfully able to get it to work.

Regards,

Jesse
Eddie Says:
April 11th, 2007 at 10:42 am
Great plugin. Is there any way to use the same image for both the full size and thumbnail image? I generally optimize all my images for the web, so they aren’t big in size. I’d like to use the same image for the thumbnail image, but just be able to specify the size of the thumbnail (so it fits nicely on the page) without having to create 2 images each time. Is there any way to do that?

Thanks.

Eddie:

I don’t expose the ability to specify the size of the thumbnail through the plugin, but you can code it yourself once you have the plugin installed. It would look something like this:
<a href="http://www.pinkcakebox.com/images/myimage.jpg" class="highslide" onclick="return hs.expand(this)" rel="nofollow"> <img src="http://www.pinkcakebox.com/images/myimage.jpg" width="100" height="100" id="P180" title="Corpse Bride Wedding Cake" /></a>
I’ll look to expose this in future versions
Panorama des diaporama en Flash pour WordPress Says:
April 16th, 2007 at 1:07 pm
[...] y a aussi Highslide JS [...]
kac Says:
April 20th, 2007 at 6:28 am
Excellent plugin, j’en suis ravi !
Weblog Tools Collection » Blog Archive » WordPress Plugin Releases for 04/21 Says:
April 21st, 2007 at 8:47 am
[...] WP-Highslide is a WordPress plugin that allows you to easily use Highslide by automatically inserting the necessary javascript into your posts or pages. [...]
HighSlide JS Plugin at hybridtext Says:
April 21st, 2007 at 1:00 pm
[...] 사진을 클릭해보고 어!? 이건 lightbox 도 아니고 뭘까? 궁굼해 하다가 발견한 wp HighSlide JS Plugin 그런데 문제는 이건 lightbox 처럼 동작 하지 않는다는거다. 이미지를 [...]
HighSlide JS Plugin » D’ Technology Weblog: Technology, Software, Hardware, Internet, Web, Google, AdSense, Microsoft, Yahoo, WordPress, Gadgets, Fashion Says:
April 21st, 2007 at 1:43 pm
[...] more info and download…. [...]
ovizii Says:
April 22nd, 2007 at 10:21 am
just found this plugi nand it sounds nice but I was wodnering if we can use any version of highslide? I mean they offer a normal one (around 40kb) and a packed one with 20kb so I’d prefer using that smaller one…

ovizii - any version, whether packed or unpacked, greater then or equal to 3.00 is supported

WeblogToolsCollection Español » Blog Archive » Plugins de WordPress publicados 21/4 Says:
April 24th, 2007 at 10:31 am
[...] WP-Highslide es un plugin de WordPress que te permite usar Highslide fácilmente mediante la inserción automática del código de javascript necesario en tus entradas o páginas. [...]

macreloaded[dot]com - Blog Archive » Podcast Nr.8 - Flying/Scripd Says:
April 24th, 2007 at 12:20 pm
[...] kleine Wordpress Plugin Vorstellung hatte ich diesmal ein Plugin zur Grafischen Aufmachung von Bildern im Blog. In der Art und Weise ähnlich dem bekannten Lightbox [...]

Listado de plugins del dia at Escuela De Blogs Says:
April 30th, 2007 at 3:10 am
[...] WP-Highslide es un plugin de WordPress que te permite usar Highslide fácilmente mediante la inserción automática del código de javascript necesario en tus entradas o páginas. [...]

Wordpress Plugins II at 坦然沒有藉口 Says:
May 1st, 2007 at 10:24 am
[...] 這個是添加註解的 (才加上測試的時候遇到無法顯示的問題…先Deactivate) WP-Highslide [...]

Alan Says:
May 20th, 2007 at 1:50 am
Anyone managed to intergrate this plugin with the wordpress e-commerse plugin?

wBc Says:
June 6th, 2007 at 7:27 pm
Thanks for doing all the heavy lifting of linking wordpress and highslide together.

Have a question though - I want to have my text wrap around my highslide image. So I added in a div tag around it, with styling padding the way I want it and all. Wonderful.

However, everytime I edit that page again, WP turns my div into a P screwing everyhing up.

I know this is not an issue with wp-highslide specifically, but I was hoping you had some experience with it!

Thanks!

WBc,

Yeah wordpress is a pain in visual mode. I turned off the visual editor and have not had any problems. I would imagine there is a better way especially if you enjoy using the visual editor - any have any tips?

links for 2007-06-08 | krynsky.com Says:
June 7th, 2007 at 11:22 pm
[...] Tech Projects » Wordpress HighSlide JS Plugin I got lucky and found a wordpress plugin for the High Slide script I found earlier today. I’m still trying to decide if I like it better than Lightbox and I’m leaning towards yes. (tags: wordpress plugins gallery) [...]

Image Gallery Plugin Recommendation >> PiXELWiT Says:
June 13th, 2007 at 6:41 am
[...] Highslide [DEMO] : Pretty slick, images expand in place, no gallery management [...]

iSight Says:
June 21st, 2007 at 5:26 pm
Hi. I’ve installed your plugin and it seems awesome, but when I get to my page that I’ve used the plugin on, it doesn’t work. Here’s the test page: http://mylife.blogrunn.com/index.php/need-a-laugh/funny-pics/. It shows the caption and close link below the image and doesn’t show the thumbnail. It just shows the whole image. What have I done wrong?

Hi,

It’s likely the theme you are using probably isn’t using the standard wp_head() function.

Tech Projects » Highslide Plugin Update Says:
August 15th, 2007 at 4:49 am
[...] highslide wordpress plugin has been updated to work with Torstein’s latest version of Highslide - [...]

Office Snapshots » Blog Archive » New Gallery Tutorial Says:
August 31st, 2007 at 6:01 am
[...] I wanted to give a quick explanation of all of the features of the gallery system we just installed here. If you were wondering what script it uses, it is called Highslide. I use a wordpress plugin to implement it, which is called WP-Highslide. [...]

2046 Says:
September 20th, 2007 at 7:17 am
hello man
I’m testing your plugin and I realized one problem there. If you allow the close link and the user actually click on it, it redirect him to empty page with word false.
I guess the problem is in this piece of code(hopefully it’ll be posted as I paste it)
Close
even you have the problem on this page.

keep going, thx 2046

Good catch. I fixed it in version 1.26

Brady Says:
October 5th, 2007 at 10:47 am
I found HighSlide a while back and think it’s a great plugin for any site. I’m glad to see someone’s done the legwork to make it useful in WordPress.

I’m having a couple of problems though. I’ve been embedding WMV videos on my Word Press site using the CoolPlayer plugin and when I click on an image to expand it in Firefox, I still see the video controls showing through the photo. Also, when I mouseover my thumbnails in IE7, they all shift around in different ways by a few pixels.

Brady Says:
October 5th, 2007 at 12:08 pm
I figured out the thumbnails jumping around. It was a border issue in CSS. I thought the other issue might be resolved with z-index, but HighSlide already has it set at 1001.

Someone above commented about HighSlide opening one picture on top of another. If you’d prefer to have only one image open at a time, HighSlide (version 3.2.7) will auto-close the first to open the second if you configure highslide.js line 38 to “allowMultipleInstances: false,”

Ain't it nice ? | 365questions.org Says:
December 9th, 2007 at 5:36 am
[...] with WP-Highslide, for the nice javascript zoom effect, and it’s really [...]

mozey Says:
January 5th, 2008 at 11:38 am
THANK YOU for your work. Great stuff.

wordpress files their images as such

year/month/day/image.jpg
year/month/day/image.thumbnail.jpg

Knowing this, the processes of creating the quicktag could be automated a bit more than what it is now. We dont have to FORCE people to use the default upload dirs, but they can make fairly decent defaults.

I’ll be more than happy to help with some coding. Please let me know.

Luffy Says:
January 29th, 2008 at 1:14 am
Hello,

GREAT PLUGIN, it’s an eaysy way to use Highslide.
After a short quick test it’s working great.

Thanks you for this.

150 Adet Wordpress Eklentisi Turkce Açıklamalı | PcUzMaNi.NeT Says:
February 5th, 2008 at 5:06 pm
[...] Sitenizdeki resimlerin efekt ile gösterimini sağlar.Link [...]

Een flora in foto’s | AnneTannes Kruidenklets Says:
February 6th, 2008 at 10:43 pm
[...] dit blogje in te voeren, en vond alvast een voorlopig oplossing via Highslide JS en de bijbehorende Wordpress-plugin. Het is een lightbox-achtig gebeuren, waarbij de thumbnail van een foto in een laag boven je [...]

dinky island » Orálfekalizátor Says:
February 9th, 2008 at 9:51 am
[...] jó dolog, de csak 6000×4500-as felbontásban. az alatt szopóálarc. Úgyhogy sikerült a highslide AJAX-os mágiája segítségével… elbasznom a már jól működő és bevált technikámat. [...]

WP Highslide · EZGN Says:
February 11th, 2008 at 9:23 pm
[...] THIS PLUGIN REQUIRES Highslide JS from Torstein Hons which is YOU MUST DOWNLOAD SEPERATELY. If you are running a COMMERCIAL site you must pay for Highslide JS. Note: Installation Instructions also at on Project Page [...]

Matt Burkhardt Says:
February 18th, 2008 at 3:19 pm
Hey - love the plug-in - BUT one small problem. When I’m viewing the site using Ubuntu 7.10 and Firefox, after you click the thumbnail and right after the script loads up to the largest size, the page itself shifts a bit to the left. Doesn’t do this on any other os/browser combination that I’ve found.

Matt - if you get the chance post your issue on the Highslide Forum to notify the highslide developer. It’s likely an issue with the highslide javascript

wordpress indir wordpress tema wordpress theme » Blog Arşivi Says:
February 20th, 2008 at 4:41 am
[...] Sitenizdeki resimlerin efekt ile gösterimini sağlar.Link [...]

List Of Useful WordPress Plugins - Web Tech Daily Says:
February 28th, 2008 at 10:25 pm
[...] Slimbox: This is a lighter version of Lightbox plugin for WordPress. Provides a neat effect for images on your blog to show up in a transparent popup overlay. You can see this effect in action when you click on any thumbnail images in this post. An alternative is the HighSlide JS Plugin. [...]

Wordpress HighSlide JS Plugin Güzel Bir Resim Efekti Eklentisi Says:
March 5th, 2008 at 8:26 pm
[...] Wordpress Eklentilerinden “HighSlide JS” Eklentisinin Kurulumu Ve Kullanılışından Bahsedeceğim.Eklentinin Nasıl Birşey [...]

Antony Says:
March 10th, 2008 at 4:18 am
Great refreshment to any blog. Great plugin. Thumbnails moving. Thanks.

WordPress plugin—WP-highslide ‖ 蚂蚁ωo` Says:
March 12th, 2008 at 7:01 am
[...] plugin—WP-highslide Posted by Mayick in WordPress 试用了三个WordPress plugin：slimbox、highslide、lightview，最终选择了highslide。 [...]

My Top 5 Wordpress Tips at Return True Says:
March 14th, 2008 at 3:08 am
[...] there are lots of versions of the Lightbox such as the original Lightbox, Thickbox. I also like Highslide JS but if you are a commercial site you will need to pay for it. There are lot’s more but some [...]

Sebastien Says:
March 14th, 2008 at 10:22 am
Hi,

Thanks for this great plugin! Now, my web host wants me to upgrade to WP 2.3.3. Do you know of compatibility issues?

Regards,

SC

Sebastien - I’m running it in WP 2.3.3 w/o any issues

y@yl@l@r.org » Blog Archive » 150 Adet Wordpress Eklentisi Turkce Açıklamalı Says:
March 20th, 2008 at 11:32 am
[...] Sitenizdeki resimlerin efekt ile gösterimini sağlar.Link [...]

Mark Says:
March 21st, 2008 at 5:15 pm
Hi,

Thanks for the plugin. I have it running on my site, but when using it in a post, the images are arranged diagonally running down the page:

http://markww.com/?p=30

How can we format the thumbnails so they’re just lined up horizontally? Something must be amiss in my post, because the bottom navigation for the post is also somehow stragely wrapped!

Thanks,
Mark

This was answered already here

Mark Says:
March 29th, 2008 at 11:33 am
Hi,

Thanks for the reply. That seems to have helped:

http://markww.com/?p=30

only thing is that the ‘topics’ listing automatically generated by wordpress now seems to be misplaced (should go below the images somehow?):

Topics: Artwork | Edit |

now it just follows the images. Is there a way to just get it below at the bottom of the post like it used to be?

Thanks

Yes Mark - at the end of the last thumbnail closing </div> add the following code:

<div style="clear:both"></div>

Niklas Says:
April 3rd, 2008 at 3:08 am
Hey there! I’d just like to say that WP-Highslide works for me under WordPress 2.5, and I’ve noted so at the WordPress Codex list over working plugins.

Thanks Niklas. I’ve experienced the same success as well. Thanks for updating Codex

baron Says:
April 8th, 2008 at 4:43 pm
thanks for plugin, perfect

cybereality Says:
April 11th, 2008 at 9:50 am
Nice work man, works like a charm in WP 2.5.

Its giving me waaaaay better performance than any of the flash galleries I’ve tried. In fact, I don’t think it could really get any faster. This has saved me a lot of time, thanks.

cybereality Says:
April 12th, 2008 at 2:59 am
One question: how do I disable or re-skin the default rounded-white graphic around the image? I tried looking through the source files but I just cannot find where it is getting the graphic from. Thanks.

Check out the documentation here

cybereality Says:
April 12th, 2008 at 7:53 am
Nevermind, I just figured it out. I couldn’t find where to set it in the wordpress plugin, but I was able to edit the highslide.js file to my liking.

In the highslide.js file you have the set the variable ‘outlineType’ to something different, like ‘drop-shadow’. But after you do that, you also need to remove ‘outlineType’ from the ‘overrides’ array listed below it (this is what was tripping me up). This will force it to use the ‘outlineType’ you set in the javascript. Otherwise the wordpress plugin will make it rounded-white by default. I assume there is a way to customize it without resorting to hacking the javascript, but it worked for me. Again, the solution above is most likely the hackish work-around, but hey, it works!

Note: You do NOT have to hack highslide.js to set the different outlinetypes. In the plugins menu there is a javascript window which lets you change the outline types per the Highslide documentation

WordPress プラグイン WP-Highslide - RaouNote Says:
May 6th, 2008 at 12:34 am
[...] 確かに配布先にも下記のように書かれているのでこれからのバージョンアップ待ちですね。 Note, as of version 1.23, WP-Highslide is compatible with all 2.X versions up to 2.3.1 [...]

Plugin overhead when not in use | Binary Tendencies Says:
May 17th, 2008 at 10:34 pm
[...] WP-Highslide 1.28 by Jesse Heap [...]

Plugin HighSlide JS per WordPress | Davide Savelli Design World Says:
May 20th, 2008 at 3:15 am
[...] il plugin per wordpress, così l’avevo integrato “a mano”. Ora ho trovato questo plugin. Non l’ho installato qui, perchè andrebbe a sovrapporsi all’altro, ma se partite da [...]

wordpress 图片增效插件 highslide at COMのFAQ | 电脑常见问题 | 电脑使用技巧 | 系统优化 | 软件推荐 | 编程语言 Says:
May 26th, 2008 at 7:10 am
[...] wordpress插件下载地址(官方) [...]

Wordpress Plugin Centre - Free Unique WP Plugin - Tech Projects Wordpress HighSlide JS Plugin Says:
June 5th, 2008 at 12:08 am
[...] Tech Projects Wordpress HighSlide JS Plugin are a non-commercial site the script is free you compute a random number to get an unique I ve been embedding WMV videos on my Word Press site using the CoolPlayer plugin [...]

librarygrrrl.net » Final (almost) Updates Says:
June 6th, 2008 at 3:07 pm
[...] Added several new plugins (Admin Dropdown Menu, Flickr Manager, FlickrRSS, and WP-Highslide) [...]

“En iyi nasihât; iyi örnek olmaktır.” » WordPress’ e yasal engel Says:
June 7th, 2008 at 8:03 am
[...] Resim galerisi. Link 29) WP-Highslide Sitenizdeki resimlerin efekt ile gösterimini sağlar.Link 30) Bluetrait Event Viewer Buda hangi işlemlerin hangi kullanıcı tarafından yapıldığını [...]

Unter der Motorhaube #4 | F!XMBR Says:
June 15th, 2008 at 3:23 am
[...] WP-Highslide: Für die bessere Darstellung größerer Bilder. Ein Thumbnail wird eingebunden - per Klick wird das Bild per JS vergrößert. [...]

Wordpress 2.5 Uyumlu Eklentiler (Liste) | Wordpress Tema Ve Eklenti Says:
June 29th, 2008 at 12:33 pm
[...] WP-Highslide 1.28 [...]

Nggallery at zwck Blogs Says:
July 2nd, 2008 at 9:35 am
[...] man gerne (wie hier auf dieser Seite, den Highslide-Effekt verwenden, werden Highlide JS und wp-Highslide benötigt. Auch der Lightbox-Effekt muss über ein zusätzliches Plugin in die [...]

WordPress Working Plugins | Utricks Says:
July 4th, 2008 at 3:04 am
[...] WP-Highslide 1.28 [...]

2.5 Sürümüyle Uyumlu Eklentiler | WordPress Destek Says:
July 6th, 2008 at 3:06 am
[...] WP-Highslide 1.28 [...]

Pierss Says:
July 6th, 2008 at 7:46 am
Without option of making your blog a bit unusual, chances for blog to be successful are too few. This plugin is great help to that direction.

wordpress 2.5 Uyumlu Eklentiler Listesi | Nazlı Reklam Reklam ve Hosting Says:
July 6th, 2008 at 8:27 am
[...] WP-Highslide 1.28 [...]

Wordpress 2.5 Uyumlu Eklentiler Listesi | Taha'nın Yeri Says:
July 6th, 2008 at 2:32 pm
[...] WP-Highslide 1.28 [...]

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

About This Blog

Categories

Projects

Wordpress HighSlide JS Plugin

Demo

Other Examples

Installation

Download

Change Log

1.0

1.1

1.11

1.2

1.21

1.22

1.23

1.24

1.25 - August 14, 2007

1.26 - Sept 20, 2007

1.27 - Oct 2, 2007

1.28 - Dec 19, 2007

Frequently Asked Questions

Example Code

Credits

Donations

86 Responses to “Wordpress HighSlide JS Plugin”

Leave a Reply