Slideshow with horizontal accordion-effect
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Slideshow with horizontal accordion-effect

##Working Demo Working demo is displayed on my page: Slideshow.

##Description Place your favourite images in this extensible slideshow-plugin, made in jQuery.

##Link source in header Make sure the stylesheet and script source are linked correctly between <head></head> Latest jQuery-script can be downloaded at

<link rel="stylesheet" type="text/css" href="slideshow.css">
<script src="jquery-1.11.0.js"></script>
<script src="slideshow.js"></script>

##Customize the content (HTML)

  1. Images are placed in folder with the same name and linked into the html-code:

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

    <p class='ss_heading ss_rotate'>Image 1</p>
     element tags.
  3. Caption text inside image is written inside tags:

    <div class='ss_caption'><p>A very small paragraph.</p></div>
  4. A new row of images is created between ul tags:

     <ul class='ss_accordion'>
     		<img src="images/img1.jpg" />
    			<p class='boxheading rotate'>Image 1</p>
     		<div class='textbox'>
       			<p>A very small paragraph.</p>
     		<img src="images/img2.jpg" />
    . . . </ul>

##Customize the look (CSS) Predefined size of images in this slideshow is: 500px (width) x 200px (height). To change size of the images, see instructions in slideshow/slideshow.css. You only have to do this if the images differ from the predefined default image size.

Read more in downloaded index.html.

##Have fun!

Change Log

  • v1.0 - 10 mars 2014 - First release