WordPress “How To?” Highslide Tutorial
You can be using Highslide Js with your WordPress site in no time. This is a relatively simple (as simple as I can make it) tutorial on how to do it. There are tons of alterations and advanced settings that you’ll be able to add to this if you wish.
1. Download Highslide Js (this tutorial is currently working off of 2.7-2.9 Tutorial updates for the new version 3 coming soon, these may work for it but I haven’t tested it quite yet.) making sure to take note of the author’s license (must pay for commercial sites).
2. Open the file you just downloaded and view the index.htm - this should open in a browser window. From here you can see several beginning style options. Look through all of these, decide on one you want to start out with. From the thumbnail page of your choice view the source code. Copy and paste all of this into a text file for future reference. This is important, we will go off if this text to set up everything. Note - I am using the rounded-white slideshow with controlbar & custom overlay for this tutorial. If you make a different choice your code will look slightly different from what is posted here.
3. Upload all of the download files into your website directory. It doesn’t really matter where, just make note of where you put it (and try not to put it anywhere really out of place).
4. Open your header.php theme file (in any editor of your choice).
Look for any links that start with:
<script type="text/javascript"
Copy the line starting with the same thing from the source file you saved in step 2 (this will be item #1 in the source file) and paste it in line with your other JavaScript code. The new line you put in should look like this:
<script type="text/javascript" src="highslide/highslide.js"></script>
Make sure to change the path (highslide/highslide.js) to where you have put this file.
5. Copy the next section (#2) of JS from our source file. It should look like this:
<script type="text/javascript">
// remove the registerOverlay call to disable the controlbar
hs.registerOverlay(
{
thumbnailId: null,
overlayId: 'controlbar',
position: 'bottom left',
hideOnMouseOut: true,
opacity: 0.75
}
);
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages(5);
}
</script>
I put this directly under the line of code from the previous step. Make sure again to change the path (highslide/graphics/) to where you have put these files.
6. Skip to #4 in our source file. Copy the line of code :
<div id="highslide-container"></div>
and paste it directly after
<body></body>
in your header.php theme file.
7. If you want the control bar shown with your images (enables prev/next buttons) add this code from #7 in our source file directly after the code we just put in in the previous step.
<div id="controlbar" class="highslide-overlay controlbar">
<a href="javascript:void(0)" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="javascript:void(0)" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="javascript:void(0)" class="highslide-move" title="Click and drag to move"
style="margin-left: 10px"></a>
<a href="javascript:void(0)" onclick="hs.close(this)" title="Close"></a>
</div>
8. Open your theme css file. Copy and paste the css code from the source file #3 (our step 2) into your theme css. Make sure you copy all the code you see that is after (but not including)
<style type="text/css"></style>
and before (but not including)
that is in the source files #3. You can put this right in the top of your css file to refer to it easily. There are several places in this code that refers to highslide graphics, make sure you change these to the paths in which you uploaded them.
9. Now you should be ready to try it out. Under Users - Your Profile make sure that “Use the visual rich editor when writing” is NOT checked. Posting will not work properly if you have WYSIWYG enabled. You can toggle this on/off just when you are posting pictures if you like.
10. This is the easiest way I have found to correctly post this code. First upload your photo (just know the url if you already have it somewhere). Click the thumbnail you want in your upload section to see the menu. Click “Not Linked” so that it shows “Linked to Image” and then Send to editor.
Copy the code from #5 in our source file (again our step 2) or #6 (if you want to include a caption) and paste it into the editor.
Using information from the photo code you just uploaded we will adjust this for your photo. Replace the text “thumb1″ or “thumb2″ with the img id from your upload. Make sure that you enter this in both places (if you are using the caption option). Replace the image source for both the thumbnail and the full size images. Change the text to the caption you want (if you are using that). Also change the image title (if you don’t want it to say “Click to enlarge” when you hover over the posted thumbnail). Change the “Highslide JS” to whatever you want your alternate text to be (if you want to change it). Also change the size values of the thumbnail if you wish.
Delete the automatic code from your upload (what was put in the post in the first part of this step) and PUBLISH.
Since this can be the tricky part to get all the components correct here is an example of what your post window should look like when you first insert all the code:
<a class="imagelink" href="http://yourimage.jpg" title="your image name"><img id="image83" src=http://yourimage.thumbnail.jpg alt="your image name" /></a>
<div class='highslide-caption' id='caption-for-thumb1'>
This caption can be styled using CSS.
</div>
<a id="thumb2" href="images/full6.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/thumb6.jpg" alt="Highslide JS"
title="Click to enlarge" height="80" width="120" /></a>
and here is what it looks like when you after you replace all the code components:
<a class="imagelink" href="http://yourimage.jpg" title="your image name"><img id="image83" src=http://yourimage.thumbnail.jpg alt="your image name" /></a>
<div class='highslide-caption' id='caption-for-image83'>
My Caption Text.
</div>
<a id="image83" href=http://yourimage.jpg class="highslide" onclick="return hs.expand(this)">
<img src=http://yourimage.thumbnail.jpg alt="Highslide JS"
title="Click to enlarge" height="80" width="120" /></a>
and here is what it looks like after deleting the first upload code:
<div class='highslide-caption' id='caption-for-image83'>
My Caption Text.
</div>
<a id="image83" href=http://yourimage.jpg class="highslide" onclick="return hs.expand(this)">
<img src=http://yourimage.thumbnail.jpg alt="Highslide JS"
title="Click to enlarge" height="80" width="120" /></a>
That’s It. There are tons of customization options listed on the HIghslide download page. Use the information there to change your settings, comment here to ask a question about what I have done, or use the Highslide support forum. Enjoy.
6 Responses to “WordPress “How To?” Highslide Tutorial”
Leave a Reply
Search
This is a tutorial on using Highslide JavaScript in your WordPress website. Below, you can see a few of my recent photos that are utilizing this script. Please feel free to ask any questions about anything here.
Recent Photos
- January 30, 2007
Just three of the many faces of our trip to the zoo. Click the thumbnails to enlarge. Oh, and that is popcorn he is eating, stale zoo concession popcorn.
- January 22, 2007
- January 19, 2007
Click to see the images in a larger size. Hold and drag to move, open many at once, or just click again to close.
Hey there,
You seem familiar with using highslide in wordpress, wonder if you could shed light on a problem. I’ve got my thumbnails in my sidebar and it seems to work ok in opera, but IE6 is doing something a bit odd and i can’t understand why.
How is the SEO for HighSlide? Are your images showing up in the google image bowser? Can you add title and alt tags to the images that the search engines can read? What about links to other web pages under the large image? Thanks for any answers.
Another question about HighSlide — Is there a way to protect your large images from people saving them? Like maybe putting a clear GIF or PNG image on top of the image you want to protect?
Joni - I haven’t checked if the images show up in the Google browser, but the alt tags do work, and you can put any html in the large image captions so links to other sites is definitely easy to do. As for your last question, that I’m not sure of yet. I am looking into this though, as it would be very useful. You may want to direct that question to the Highslide support forum.
i am using the highslide wordpress plugin because i have failed to integrate the script with wordpress before. it made my life easier. but now, i need to open an iframe using highslide. but then i don’t know how i can add right script calls in the plugin. maybe i should take it out all together and use your guide. are the instructions in your guide applicable for the highslide-html.js script too? thanks for the help!
nice, was trying to implement it manually , i missed the
so it wasn’t working, not its all ok, i will implement it soon.
by the way there are some plugs allowing to bypass code wordpress formatting in a post by a simple line command before the post ( coffee2code.com) i must be able to keep my wysiwig editor on and just put this line before a post when i want to implement some highslide in it.