Slideshow with horizontal accordion

Place your favourite images in this extensible slideshow-plugin, made in jQuery. Download: Git Hub | Slideshow

Instructions for use

  1. Download from GitHub
  2. Link source in header

    Make sure the stylesheet and script source are linked correctly between <head></head>.
    Latest jQuery-script can be downloaded at jQuery.com.

  3. <link rel="stylesheet" type="text/css" href="slideshow.css">
    <script src="jquery-1.11.0.js"></script>
    <script src="slideshow.js"></script>
    
  4. Customize the content (HTML)
    • Images are placed in folder with the same name and linked into the html-code:

      <img src="images/img1.jpg" />
      
    • Headings are written inside:

      <p class='ss_heading ss_rotate'>Image 1</p>
      

      element tags.

    • Captions are written inside:

      <div class='ss_caption'>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis 
        volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.</p>
        <p>Another paragraph.</p>
      </div>
      

      element tags.

    • A new row of images are written inside:

      <ul class='ss_accordion'>
              . . .
      </ul>
      
  5. Customize the look (CSS)

    Predefined size of images in this slideshow is: 500px (width) x 200px (height).
    To change size of the images, follow instructions below:

    • Width of the images are changed where marked green. You must change on every occasion.
      The width of the heading (50px) have to be added to the images width to show correctly.

    • Height of the images are changed where marked cyan. You must change on every occasion.

    • Width of slideshow (accordion) equals the width of the images plus 4 headings (4 x 50px).
      Change where marked pink. You must change on every occasion.

  6. Positioning of the headings

    When changing the size of the images, you must correct the positioning of the headings.
    The formula to get the right position is: top-position = width / 2 - height / 2, and left-position = height / 2 - width / 2.
    Change where marked gray.

Html

<div id="ss_content">
<ul class="ss_accordion">
    <li>
      <img src="images/img1.jpg" />
      <p class='ss_heading ss_rotate'>Image 1</p>
    </li>
    <li>
      <img src="images/img2.jpg" />
      <p class='ss_heading ss_rotate'>Image 2</p>
      <div class='ss_caption'>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis
        volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.</p>
        <p>Another paragraph.</p>
      </div>
    </li>
    <li>
      <img src="images/img3.jpg" />
      <p class='ss_heading ss_rotate'>Image 3</p>
    </li>
    <li>
      <img src="images/img4.jpg" />
      <p class='ss_heading ss_rotate'>Image 4</p>
      <div class='ss_caption'>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis
        volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.</p>
        <p>Another paragraph.</p>
      </div>
    </li>
  </ul>
</div>

Css

/* Caption box */
#ss_content {
    width: 700px;       /* Same width as ss.accordion */
    padding: 0;
    border: 0.5em solid white;
}

.ss_caption {
    position: absolute;
    left: 50px;
    bottom: 0px;
    padding: 4px 8px 8px 8px;
    background: rgba(255,255,255,0.8);
}
/* Caption text */
.ss_caption p {
    font-family: Arial, sans-serif !important;
    margin-top: 4px !important;
    font-size: 0.75em;
    margin: 0;
    color: black;
    line-height: 120% !important;
}

.ss_caption p + p {
    margin-top: 8px !important;
}
/* Heading */
.ss_heading {
    margin:0px;
    text-align: center;
    text-shadow: -1px 1px 3px #222;
    -webkit-text-shadow: -1px 1px 3px #222;
    -moz-text-shadow: -1px 1px 3px #222;
    -ms-text-shadow: -1px 1px 3px #222;
    -o-text-shadow: -1px 1px 3px #222;
    letter-spacing: 1px;
    width: 200px;           /* Same width as images height */
    height: 40px;
    border-top: 1px solid #666;
    padding-top: 9px;       /* height 50px altogether */
    position: absolute;
    top: 75px;              /* width/2 - height/2 */
    left: -75px;            /* height/2 - width/2 */
    background: #444;
    color: #999;
    font: 1.5em "Impact" !important;
}

.ss_rotate {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/* Image row */
ul.ss_accordion {
    list-style: none;
    padding: 0;
    margin:0;
    height: 200px;      /* Same height as images height */
    width: 700px;       /* Images width + 200px (4 headings) */
    overflow: hidden;
    background: #666;
    position: relative;
}

ul.ss_accordion + ul.ss_accordion {
    padding: 0;
    border-top: 0.5em solid white;
}
 
.ss_accordion li {
    position: relative;
    float: left;
    height: 200px;     /* Same height as images height */
    width: 50px;
    overflow: hidden;
}
 
.ss_accordion li img {
    float: left;
    margin-left: 50px;
}
 
.ss_accordion li.active {
    width: 550px; 	/* Same width as in plugin.js */
}

Script

$(document).ready(function(){
  (function($) {
    $.fn.slideshow = function() {
      activeItem = $(".ss_accordion:first li:last");
      $(activeItem).addClass('active');
      $(".active p.ss_heading").css("color", "white");

      $(".ss_accordion li").hover(function(){
        $(".active p.ss_heading").css("color", "none");
        $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
        // Change width according to the images width + 50px (heading)
        $(this).animate({width: "550px"}, {duration:300, queue:false});
        $("p.ss_heading").css("color", "none");
        $("p.ss_heading", this).css("color", "white");
        activeItem = this;
      });
    };
  })(jQuery);
  $(".ss_accordion").slideshow();
});