jQuery Slider Evolution

Documentation

By aeroalquimia

HTML CONTENT

Highlight me...I'm CSS3 font-face text.

Pirates of the Caribbean: On Stranger Tides

Captain Jack Sparrow (Depp) crosses paths with a woman from his past (Cruz), and he's not sure if it's love -- or if she's a ruthless con artist who's using him to find the fabled Fountain of Youth.

When she forces him aboard the Queen Anne's Revenge, the ship of the formidable pirate Blackbeard (McShane), Jack finds himself on an unexpected adventure in which he doesn't know who to fear more: Blackbeard or the woman from his past.

View

Source Code

HTML

<div class="slider">

  <div>
    <div style="background:url(assets/html_1.jpg) no-repeat left top; width:900px; height:360px;">
      <div style="padding:112px 0 30px 0; text-align:center;">
        <h1 class="cs3">HTML CONTENT</h1>
        <h3 class="cs3">Highlight me...I'm CSS3 font-face text.</h3>
      </div>
    </div>
  </div>

  <div>
    <div class="slider-movie-example">
      <h4>Pirates of the Caribbean: On Stranger Tides</h4>
      <br/>
      <p>Captain Jack Sparrow (Depp) crosses paths with a woman from his past (Cruz)... </p>
      <p><a href="http://www.imdb.com/title/tt1298650/" class="button">View</a></p>
    </div>
    <img src="assets/html_4.jpg" alt=""/>
  </div>

  <div>
    <a href="assets/html_3.jpg" class="lightbox"><img src="assets/html_2.jpg" alt="" /></a>
  </div>

</div>

CSS

h1.cs3,
h3.cs3
{
  margin:0 0 8px;
  text-decoration:none;
  border:0;
  padding:0;
  font-family: 'Bangers', arial, serif;
  color:#FFFFFF;
  text-shadow:2px 2px 1px #222222;
}

h1.cs3
{
  font-size:80px;
  line-height:60px;
}

h3.cs3
{
  font-size:27px;
}

.slider-movie-example
{
  width:300px;
  height:100%;
  background:rgba(0,0,0,0.8);
  color:#FFFFFF;
  padding:10px;
  position:absolute;
  top:0;
  left:20px;
}

Javascript

jQuery(document).ready(function($) {

  $(".slider").slideshow({
    width      : 900,
    height     : 360,
    transition : 'squareRandom'
  });

  $('.lightbox').lightbox();
  
});