thomasphorton

<div id="banner" class="flex-container box-shadow">
  <div class="flexslider">
    <ul class="slides">
      <li>
        <a href="#">
          <img src="images/carousel/bnr-a-perfect-way-to-understand-energy-use.jpg" alt="" width="626" height="356">
        </a>
      </li>
      <li>
        <a href="#">

thomasphorton

<div id="promo-banner"> 
  <div>
    <a href="#">
      <img src="/_assets/images/carousels/DealsPageLgPromo.jpg" alt="Get bulbs that use less energy." width="498" height="320" />
    </a>
  </div> 
  <div>
    <a href="#">
      <img src="/_assets/images/carousels/mobilewebsite.jpg" alt="New Feature: Duke Energy Mobile" width="498" height="320" />
    </a>

thomasphorton

<div class="collapsible">
  <h4 class="closed">Find an installer</h4>
  <div class="expand">
    <p>Unfortunately, Duke Energy does not endorse specific  products or companies for your generation project. We recommend you visit the North  American Board of Certified Energy Practitioners&rsquo; <a href="http://www.nabcep.org/installer-locator-agreement" target="_blank">Installer Locator</a>, as well  as the <a href="http://www.awea.org/" target="_blank">American Wind Energy Association</a> and <a href="http://www.ncsc.ncsu.edu/" target="_blank">N.C. Solar Center</a>, to learn more about the  possibilities of renewable energy generation.</P>
    <p>Contractors and suppliers interested in working with Duke  Energy should view the <a href="/suppliers/default.asp">detailed information on  our website</a>.</P>
  </div>
</div>

thomasphorton

<div class="collapsible faq">
  <h4 class="collapsible-trigger">Collapsible Trigger</h4>
  <div class="collapsible-pane">
    <p>Collapsible content- anything can go inside <code>.collapsible-pane</code></p>
  </div>
</div>

thomasphorton

/*****************************************************************************************************
    Load a video inside a lightbox - https://gist.github.com/de-ux/6010476
    
*****************************************************************************************************/
 
// replace .lightbox-video-trigger with a selector for whatever jQuery object you'd like to use as the trigger.
 
$('.lightbox-video-trigger').click(function(e) {
  
  e.preventDefault();

thomasphorton

/*****************************************************************************************************
    Load a video using jwplayer plugin - https://gist.github.com/de-ux/6010476
    
    Dependencies:
    /includes/js/plugins/jwplayer/jwplayer.js
*****************************************************************************************************/

// jw.create will only take an id as an argument 

jw.create('id-of-video-element', {

thomasphorton

if Request.ServerVariables("HTTPS") = "off" then
  protocol = "http"
else
  protocol = "https"
end if
serverName = protocol & "://"

hostname = Request.ServerVariables("HTTP_HOST")
serverName = serverName & hostname

thomasphorton

<a href="#" class="lightbox-trigger-iframe" data-plugin-options='{"source": "iframe", "URL": "http://thomasphorton.com"}'>iframe lightbox</a>

thomasphorton

height: 586,  // Integer: height of lightbox (without border and padding)
width: 780,  // Integer: width of lightbox (without border and padding)
source: 'html', // String: type of content in lightbox, "html" or "iframe"
content: 'foobar', // String: static content of lightbox. only used if "source" is set to "html".
URL: null, // String: URL of iframe content to be placed in lightbox. only used if "source" is set to "iframe".
wrapClass: '', // String: class added to the lightbox overlay.
maskClass: '', // String: class added to the lightbox overlay content.
onClose: function(){  // added to allow new functions to be added to the lightbox close.
  $this.closeLightbox($this.options);
  return false;

thomasphorton

<a href="#" class="lightbox-trigger" data-plugin-options='{"source": "html", "content": "#"}'>Activate lightbox</a>