{ Akbarsait NoorMohamed }

Adding Highslide JS to BlogCFC

Jan 07, 2010
     #blog   #coldfusion  
2 minutes

This post is to demonstrate how quickly we can include Highslide JS to blogCFC in a four simple steps. Highslide JS is an open source JavaScript image/gallery library and is free Non-commercial use. Highslide will be extremely useful in placing full-size images without worrying about the blog layout. Over here are the steps on how we can include Highslide to blogCFC.

  • Download Highslide JS from here and extract the zip file once downloaded. The core files are in the Highslide folder (Highslide.min.js, Highslide.css) and graphics images are in the graphics folder.
  • Copy the highslide folder with above-mentioned files and Upload that to includes folder of blogCFC. For my installation it will be like this akbarsait.com/blog/includes/highslide/.
  • Edit your layout.cfm file to add the code as below.
<!--- HighSlide JS and CSS Files --->
<script  type="text/javascript"   src="#application.rooturl#/includes/highslide/highslide.min.js">
<link rel="stylesheet" type="text/css" href="#application.rooturl#/includes/highslide/highslide.css" />

Optionally override the settings defined at the top of the highslide.js file. The parameter hs.graphicsDir is important!
<script type="text/javascript">
hs.graphicsDir = '#application.rooturl#/includes/highslide/graphics/';
hs.outlineType = 'rounded-white';
  • Link the images in your blog post as below.
<a id="img1" href="http://www.akbarsait.com/blog/images/ChicagoSnow.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="http://www.akbarsait.com/blog/images/ChicagoSnow.jpg" alt="Snow at Chicago" title="Click to enlarge" height="160" width="150" />
This is optional one to for display caption for the highlighted image
<div class="highslide-caption">
Another snow day at Chicago!

We have all done to use the Highslide in blogCFC and over here is the demo on how it works.

Highslide JS