Adding Highslide JS to BlogCFC

  Jan 7, 2010     14095 Views      Web , ColdFusion , BlogCFC       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.

Highslide JS

Related Entries


About Me

CFML/Web/Salesforce/Agile Enthusiast, Husband & Dad, an avid learner & android fan. Creator of GetCFMLJobs.com who works as a Tech Consultant in Toronto, Canada.

GetCFMLJobs.com!
Get Your Next CFML Job!
ColdFusion Tuts
ColdFusion Tutorials & Resources


Categories

Adobe Agile AppCore Creator BlogCFC Books Bootstrap CFBuilder CFEclipse CFML Chennai CFUG Chrome Extensions ColdFusion Google IIS India Learning MySQL Railo Subversion Tools & Utilities Web Windows 7


Archives

2018 2017 2016 2014 2013 2012 2011 2010 2009 2008

Search


Akbarsait © 2008 - 2019 | Hosting provided by Vivio Technologies

Home | Blog | Sitemap | RSS Feed