Added Highslide JS to my blog

I finally figured out how to get the random image in the sidebar to use the Highslide JS code. Yay!

Since I had to add the js code to my blog template to make the random image work the way I wanted, it means any image in my blog can use the code, too. I’m going to use the code for inline images in my posts.

Try it out with the image below:

Black dress on, holding calla lily back only

If you would like to add this functionality to your blog, go to the Highslide JS website. Download the files and read the instructions. Make the changes in your wordpress theme here: wp-content/themes/yourtheme/header.php

To add the thumbnail code to your blog, edit/create a post. Switch to HTML view. Then enter the html code. This is the code to generate the image in this post:

<a
href="http://takethu.com/albums/thu/marin_headlands/by_doug/black-2.jpg"
class="highslide" onclick="return hs.expand(this)"
onmouseover="self.status='Click to enlarge thumbnail'; return true;"
><img
src="http://takethu.com/albums/thu/marin_headlands/by_doug/thumb_black-2.jpg"
height="80" alt="Black dress on, holding calla lily back only"
align="left" border="0" title="Click to enlarge" id="thumb583"
/></a> <div class="highslide-caption"
id="caption-for-thumb583"> <a
href="http://takethu.com/displayimage.php?pos=-583"
>Details</a> </div>

I use a modified version of bbcode generator for Coppermine to generate the code so I don’t have to do it manually. In displayimage.php, add the following code after the other $info variable:

			$info['Highslide HTML'] = '
<a href="' . $CONFIG["ecards_more_pic_target"] . (substr($CONFIG["ecards_more_pic_target"], -1) == '/' ? '' : '/') . get_pic_url($CURRENT_PIC_DATA) .  '" class="highslide" onclick="return hs.expand(this)" onmouseover="self.status='Click to enlarge thumbnail'; return true;"
><img src="'. $CONFIG["ecards_more_pic_target"] . (substr($CONFIG["ecards_more_pic_target"], -1) == '/' ? '' : '/') . get_pic_url($CURRENT_PIC_DATA,'thumb') . '" height="' . $CONFIG['thumb_width'] . '" alt="' . $CURRENT_PIC_DATA['title'] . '" align="left" border="0" title="Click to enlarge" id="thumb' . $CURRENT_PIC_DATA[pid] . '" /></a>
<div class="highslide-caption" id="caption-for-thumb' . $CURRENT_PIC_DATA[pid] . '">
<a href="' . $CONFIG["ecards_more_pic_target"] . (substr($CONFIG["ecards_more_pic_target"], -1) == '/' ? '' : '/') . basename($_SERVER['PHP_SELF']) . "?pos=-$CURRENT_PIC_DATA[pid]" . '" >Details</a>
</div>';

FYI, you can drag the enlarged image around the page.

8 thoughts on “Added Highslide JS to my blog”

  1. Thanks for the info. I’m using the cpg plugin which works pretty good and now I’m trying to implement it into my wp as well.

    I’m still learning as I go…I was wondering, where in the highslide.js file do you edit the thumbnail border?..I’m really not sure where to edit it, there’s no clear css files and I’m not familiar with js code.

    I spent A LOT of time just putting the files where the need to go in order work properly. All of the css is in the header.php..wouldn’t it be better to create it’s own css file?

    Thanks

  2. I had the thumbnail border before I implemented Highslide JS, so it has nothing to do with it. In my blog’s theme’s style.css, this is what I have:

    .post a img {
    border: 2px solid #000000;
    margin: 5px
    }

    As for using external stylesheets, you could probably do that. But I think that the code was offered for easy implementation. It’s much easier to copy and paste into one file than to copy and paste into one file and create another file and copy and paste there.

    Hope that helps.

  3. I haven’t been able to get friendly URL’s to work. They work OK when you view the main content, but once you enter into a post, highslide no longer works. Only by using the default permalink structure was highslide able to work when viewing a post.

    Do you have this problem and/or a resolution?

  4. Hi there. A question. I’ve been using highslide with the images in my sidebar. But i’d like the images that appear in my sidebar to be random and have highslide work with them.

    I’m assuming you had the random image first and then found highslide. Sort of opposite to my approach. So how do i get the random image in my sidebar and how do i get it to work with highslide?

    Hope you can help

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>