Bildspel med horisontell accordion

Använd dina favoritbilder tillsammans med detta bildspel gjort i jQuery. Ladda ner: Git Hub | Slideshow

Användningsinstruktioner

  1. Ladda ner från GitHub
  2. Länka i header

    Se till att stilmall och script-fil länkas korrekt mellan <head></head>.
    Senaste jQuery-script kan laddas ner från 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>
  3. Anpassa innehållet (HTML)

    • Bilder placeras i en mapp mmed samma namn och länkas i html-koden:

      <img src="images/img1.jpg" />

    • Rubriker skrivs inom:

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

      element-taggar.

    • Bildtexter skrivs inom:

      <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-taggar.

    • En ny bildrad skrivs inom:

      <ul class='ss_accordion'>
        . . .
</ul>
  4. Anpassa utseendet (CSS)

    Fördefinierad storlek på bilderna är 500px (bredd) x 200px (höjd).
    För att ändra storlek på bilderna, följ instruktionerna nedan:

    • Bredden på bilderna ändras där det är grönmarkerat. Du måste ändra på varje ställe.
      Bredden på rubrikens box (50 px) måste läggas till bildens bredd för att visas korrekt.

    • Höjden på bilderna ändras där det är blåmarkerad. Du måste ändra på varje ställe.

    • Bredden på bildspelet (accordion) är lika med bredden på bilderna plus 4 st rubrik-boxar (4 x 50 px).
      Ändra där det är rosamarkerat. Du måste ändra på varje ställe.

  5. Bestäm rubrikernas placering

    När du ändrar storlek på bilderna måste rubrik-boxarnas placeringar uppdateras.
    Formeln för att hitta rätt placering är: topp-position = bredd / 2 - höjd / 2, och vänster-position = höjd / 2 - bredd / 2..
    Ändra där det är gråmarkerat.

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>Ett annat stycke.</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>Ett annat stycke.</p>
      </div>
    </li>
  </ul>
</div>

Css

/* Caption box */
#ss_content {
    width: 700px;       /* Samma bredd som 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;           /* Samma bredd som bildernas höjd */
    height: 40px;
    border-top: 1px solid #666;
    padding-top: 9px;       /* sammanlagd höjd 50px */
    position: absolute;
    top: 75px;              /* bredd/2 - höjd/2 */
    left: -75px;            /* höjd/2 - bredd/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;      /* Samma höjd som bildernas höjd */
    width: 700px;       /* Bildernas bredd + 200px (4 rubriker) */
    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;     /* Samma höjd som bildernas höjd */
    width: 50px;
    overflow: hidden;
}
 
.ss_accordion li img {
    float: left;
    margin-left: 50px;
}
 
.ss_accordion li.active {
    width: 550px; 	/* Samma bredd som i 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();
});