Kept Light Photography

Photography and Writing by A. Cemal Ekin

Note: After trying this technique for a week or so, I have found it to be too fragile when editing the post. At any time, because of an accidental opening in the “Visual” edit mode you may lose a line or two, crippling the Highslide effect. I am abandoning this idea for the time being, experiment at your own risk.
Better yet, try ShadowBox JS Plugin which integrates very smoothly and transparently with all the image and media links. I consider this post deprecated. It remains here to maintain history and blog integrity.

 

I have been trying to get Highslide integrated into WordPress and NextGen Gallery, I think I have figured out how to use a couple of tools together to make this happen. Mind you, I am not a JavaScript programmer, the code makes but little sense to me, especially one as elaborate as Highslide with much flexibility and capability. This post will outline my method of accomplishing the integration, not necessarily the best method. I am not sure if there is a unique method. I would have much preferred to have a little more plugin assistance but I will get anything I can get in this area. I assume you have already installed NextGen Gallery. If not, go get it and install it and learn what to do with that. I am not writing about how to use NGG, but how to integrate Highslide to display the images from the NGG pool.

  1. Download WP Highslide and install it just like any other plugin. It will go into your plugins directory and its default directory name is highslide. The actual PHP plugin is a single file that resides inside the highslide directory and there are some other highlside files but not necessarily the version you may need. Visit Highslide site and decide which version you want. Since I was interested in using it to display gallery images and Flash slide shows, I decided to get the “kitchen sink” variety. Who knows, I might decide to use it for other purposes too.
  2. As its instructions indicate, also download Highslide from its source. There you have the option of downloading different versions of HS with a different set of capabilities.
  3. Extracting the contents of the Highslide ZIP file, upload its contents to the plugin directory (also named highslide, no surprise there.)
  4. In WordPress, activate WP Highslide which will place a menu item under “Settings” to its control panel. In its control panel, there are some radio-button options that are fairly self-explanatory, and a window where you can edit some of the Highslide override parameters. Reading the HS documentation and looking at some samples may help.
  5. Now in WordPress dashboard, choose “Gallery” to access NextGen Gallery settings. There you will need to go to “Options/Effects” and from the JavaScript Thumbnail effect drop-down list, select Highslide. That’s all I did.
  6. At this point, all your NGG images will be displayed using Highslide script with its default settings.
  7. To integrate a Flash slideshow or another SWF file, you need to actually embed a script into your post in the HTML editor. You cannot do this part in the “Visual” editor. So, when the time comes to enter the code you must click on the HTML tab and paste the code there.
  8. Make sure you write everything you want as part of the post, proofread if you like and make it ready for posting except for the necessary code to display the Flash file. When you are ready, click on the HTML tab on top of the editor. Making sure you do not paste the code in the wrong place, go to the very top of the document, press enter to open a blank line and paste it there. Do not switch back to the Visual mode as it may result in your code be trimmed and parts of it to be chopped off.
  9. Take the following code and paste it into your post at the point you prepared for it. Make sure to replace the domain and file information as well as the HS overlay dimensions to your needs.
    <script type=”text/javascript”>
    //
    // Apply the Highslide settings
    // ]]>
    hs.graphicsDir = ‘highslide/graphics/’;
    hs.outlineType = ’rounded-white’;
    hs.wrapperClassName = ‘draggable-header no-footer’;
    hs.allowSizeReduction = false;
    // always use this with flash, else the movie will be stopped on close:
    hs.preserveContent = false;// 3) Optionally set the swfOptions.
    // See http://highslide.com/ref/hs.swfOptions for full documentation
    /* hs.swfOptions = {
    version:              “7”,
    expressInstallSwfurl: null,
    flashvars:            {},
    params:               {},
    attributes:           {}
    }; */
    //</script>// The following style block hides some of the controls I do not want
    // The following block actually presents the link to trigger HS
    // Replace the width and height parameters to fit your SWF file
    // You can actually take this block and place it very carefully elsewhere
    objectType: ‘swf’, width: 700, objectWidth: 700, objectHeight: 500, maincontentText: ‘You need to upgrade your Flash player’  } )” href=”http://www.yourdomain.com/yourshow.swf”>
    Display flash</a>
  10. Save your post and preview it. You should see a link like the one below when clicked should trigger Highslide and display your Flash file.

(Demos no longer work, sorry!)

Note: As of 12/6/2008 it seems to work with IE7, again, I don’t know why it oscillates between working and not working. One thing is for sure. If you edit your post with this code in it in the Visual edit mode, WordPress deletes some CSS and/or HTML entities, breaking the functionality. If you accidentally enter the Visual edit, switch to HTML edit mode and leave the page without editing or saving. Then come back again, you will find yourself in the HTML edit mode retaining the integrity of the post code. WordPress has to find a fix for this code trimming, it also deletes DIVs for some reason. I need to read up on this.)

I am sure some of you who are better (much better) at JavaScript, PHP, and other matters may find my process cumbersome because you can streamline the process. I sure hope someone takes this idea and turns it into a simple to use plugin, or perhaps expand the functionality of existing ones. For embedding Flash into posts I use Kimili Flash Embed, I even wrote to its author to please add Highslide functionality. All these developers are busy people and doing this work for the love of it, many thanks to you all for your contributions to WordPress world.

If you find easier ways of doing this please let me know. Every time I paste the script and the style components I fear that something would go wrong. So, I saved the above code in a separate post that is not published, that is my backup copy.

Category: , Tag:

Reader Interactions

Comments

  1. I couldn’t find your e-mail address (the welcome page says it’s at the bottom of the page). This seemed the most relevant post for my question.

    I am in awe over your flash image gallery used on your “galleries” and “exhibits, etc” pages. Would you mind sharing with me whether that is a custom job you made in flash or a 3.rd party gallery available from somewhere ?

  2. Morten, thank you for your kind words and also noticing my missing address. I will take care of the missing address right away.

    I use a couple of tools for creating and managing the images in the Flash galleries. They are both made by the same people at SlideShowPro. The local component allows me to determine the size and other parameters and the server component, SlideShow Pro Director, allows me to manage the images in a database. They are very affordable and very good tools, I highly recommend them. The local version comes in two flavors, a plugin for Adobe Photoshop Lightroom, and a Flash tool. I have them both and attest to their functionality.

    Thanks again for writing and giving me your kind praise.

    Cemal

  3. You are correct, in order to use the Flash version you need Flash. It has a couple of additional features which are well documented on the SSP site. There is no difference in terms of their look. In fact the Lightroom plugin can, optionally, upload the SWF file and all the images to your Web site after creating it locally. You’ll like it.

    I visited your site under development, very nice work. Although I did not understand the language, I liked what I saw. You seem to be a practicing professional with a way with children, very nice.

  4. That’s great, definitely something i will be giving a try on my photo website which is under development.

    Will probably give it a try ( probably standalone without the director component first off).
    I will have to decide on the flash or lightroom versions though. Are there any major disadvantages to using the lightroom version – I imagine that one would be considerably more convenient, not to mention not requiring Flash CS3/CS4 ?

    //Morten.

  5. Thank you, you are very kind. I dream of going pro, but for now it’s just for the weekends. I do product photography as well and that is very challenging technically, but children and wedding guests are much more fun to work with :-)

    In many ways I would like to have my site in english language as the world is just so much bigger, but for the target audience danish is more appealing. Maybe I’ll start a separate blog in English, where I can share how-to’s and have a small image gallery – kind of what you are doing here. I found your site while searching for info on 4GB, Win XP and Photoshop, by the way. It’s great that you put such information out there and it makes me want to share what odds and ends I have learned with the world also.

  6. hi,

    i do all the steps, when i click on a image it comes “loading” and nothing else happens. what can be the problem?i use wordpress 2.7, is that the problem?

    the “hs.graphicsDir” points on the gallery-folder. is that right?

  7. What you describe seems to be an indication of improperly implemented HighSlide. The hs.graphicsDir should point to the subdirectory under HS where it keeps small images that it uses to frame the image and those used in the navigation overlay. Here is the schematic location of that directory:

    wordpress
	|-wp-content
		|-plugins
			|-higslide
				|-graphics

    See the sample script in the post which points to this by simply indicating that it is under the highslide directory itself.

    I hope this helps

  8. is it not allowed to point the graphicsdir-folder to another location like this:

    wordpress
    |-wp-content
    |-plugins
    |-higslide
    |-graphics

    that means that i copy all my gallerys in this folder!? or only the thumbnails?

  9. If you have not done anything to modify the higslide code or its internal directory structure, the entry for that would be what you see above, just use the following line in your script:

    hs.graphicsDir = ‘highslide/graphics/’;

    It does not refer to where your images are but to where HigSlide can find its own graphics to properly display the borders and navigation controls.