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.
Permalink
Failed to load latest commit information.
slideshow
README.md
index.html
slideshow.jpg
style.css
vanja_250.jpg

README.md

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 jQuery.com

<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'>
     	<li>
     		<img src="images/img1.jpg" />
    			<p class='boxheading rotate'>Image 1</p>
     		<div class='textbox'>
       			<p>A very small paragraph.</p>
     		</div>
     	</li>
     	<li>
     		<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