jQuery zAccordion

Javascript

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.zaccordion.min.js"></script>

jQuery

<script type="text/javascript">
$(document).ready(function(){
  $('#splash').zAccordion({
    slideWidth: 600,
    easing: 'easeOutQuint',
    width: 900,
    height: 310,
    timeout: 3000,
    slideClass: 'slide',
    animationStart: function() {
      $('#splash').find('li.slide-previous div').slideUp();
    },
    animationComplete: function() {
      $('#splash').find('li.slide-open div').slideDown();
    },
    afterBuild: function () {
      $('#example').fadeIn(3000);
    }
  });

  $('#splash').find('li.slide-closed div').css('display', 'none');
});
</script>

CSS style

<style type="text/css">
#example{
	display: none;
}
#splash li{
	overflow: visible !important
}
#splash div.splash-bg{
	background: #0a0a0a;
	bottom: 0;
	height: 95px;
	opacity: .3;
	position: absolute;
	width: 100%;
	z-index: 10;
	border-top: 1px solid #000;
}
#splash div.splash-info{
	bottom: 0;
	padding: 10px 20px;
	position: absolute;
	z-index: 15;
}
#splash h4{
	float: left;
	margin: 0;
	padding: 0;
	color: #fff;
	font: normal bold 16px/20px arial, verdana;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #000;
}
#splash p{
	float: left;
	color: #ddd;
	font: normal normal 12px/18px arial, verdana;
	text-shadow: 1px 1px 1px #000;
	margin: 0 !important;
}
</style>

HTML markup

<div id="example">
  <ul id="splash">
    <li>
      <img src="img/jquery-zaccordion-1.jpg" width="600" height="400" alt="" />
      <div class="splash-bg"></div>
      <div class="splash-info">
        <h4>First photo</h4>
        <p class="splash-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus
          sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed
          blandit at, bibendum non dolor.
        </p>
      </div>
    </li>
    <li>
      <img src="img/jquery-zaccordion-2.jpg" width="600" height="400" alt="" />
      <div class="splash-bg"></div>
      <div class="splash-info">
        <h4>Second photo</h4>
        <p class="splash-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem.
          Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a
          tellus.
        </p>
      </div>
    </li>
    <li>
      <img src="img/jquery-zaccordion-3.jpg" width="600" height="400" alt="" />
      <div class="splash-bg"></div>
      <div class="splash-info">
        <h4>Third photo</h4>
        <p class="splash-text">
          Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue
          molestie. Donec ultrices facilisis erat at porttitor.
        </p>
      </div>
    </li>
    <li>
    <img src="img/jquery-zaccordion-4.jpg" width="600" height="400" alt="" />
      <div class="splash-bg"></div>
      <div class="splash-info">
        <h4>Fourth photo</h4>
        <p class="splash-text">
          Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem
          luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.
        </p>
      </div>
    </li>
  </ul>
</div>

Demo »


Go Daddy


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art

05/08/2016

If you need Free Vector Art do not hesitate: visit Vecteezy.com

Free vector icons

Free vector icons

31/01/2016

Want to have some vector icons, free? Try this nice website.

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap

11/12/2015

Would you like some cool stock photos for free? Check out this article, and try this website.


Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the car *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top