Adding Highslide JS to BlogCFC

  Jan 7, 2010     15355 Views      Web , BlogCFC , ColdFusion       Comments (0)   

This post is to show how simply we can add Highslide JS to your blogCFC blog in a 4 simple steps. Highslide JS is an open source JavaScript image, media and gallery viewer library and its free only for Non-commercial use more details are at Highslide site read it before you start using in your blog. Highslide will be very useful in placing full size images at your blog without worrying about your blog layout size or width. Here are the steps on how we can include Highslide to blogCFC blog.

• Download Highslide JS from here and extract the zip file once it's get downloaded. The core files we need to use are in the Highslide folder (Highslide.min.js, Highslide.css) and graphics images in 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">
  </script>
  <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';
  </script>
• 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" />
  </a>
  <!---
  This is optional one to for display caption for the highlighted image
  --->
  <div class="highslide-caption">
  Another snow day at Chicago!
  </div>

We have all done to use the Highslide in your blogCFC blog and here is the demo on how it works. This photo was taken at Chicago while leaving to office from my room. Let me know what you think about using Highslide with blogCFC? For me this will be really useful in displaying images at our blog with its original size.