Build a Slideshow with jQuery

July 30, 2017 Maria C. Lima

Below is the code to build a slideshow using HTML, CSS, and JavaScript/jQuery. Please contact me at maria@mclinteractive.com if you have any questions or would like me to create a slideshow for you.

Demo

Fine Arts

Fine Art for Auction Online | Auction King

Fine Art Festival | Amdur Productions

Leeds College of Art


Resources

Dependency. The jQuery Library can be included at the bottom of the html document just above the </body>.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Description

We used a stack of images, one on top of each other with captions. When we click the thumbnails,
their respective image displays on the panel. Please note the transition between the images is very smooth.

jQuery

Place the JavaScript below under the JQuery library.

<script>
(function($, window, document, undefined) {

  var showMoreJQObj = $('.show-more'),
    showMorePanel = showMoreJQObj.find('.show-more-panel'),
    showMoreBtn = showMoreJQObj.find('.show-more-btn'),
    width = (window.innerWidth > 0) ? window.innerWidth : screen.width,
    windowWidth = (width < 760) ? 85 : 170;

  var ShowMoreLikeThis = function() {

    $(showMoreBtn).each(function(index) {
      $(this).on('click', function() {

        if ($('.clicked').length <= 0) {
          $(this).parent().find('.show-more-panel')
            .css({
              'display': 'block',
              'height': '0px',
              'margin-top': '30px',
              'opacity': 1
            })
            .stop(true, true).animate({
              'height': windowWidth,
              'opacity': 1
            }, {
              'duration': 500,
              step: function(now, fx) {
                if (now == 1) {
                  $(this).find('.show-more-box').css({
                    'display': 'inline-block'
                  });
                }

              }
            }, 'linear');

          //replace button text on show/hide
          $(this).find('.show-more-text').animate({
            'opacity': 0,
          }, 500, 'linear', function() {
            $(this).css({
              'z-index': 100,
              'display': 'none'
            });
          });

          $(this).find('.hide-more-text')
            .css({
              'display': 'block',
              'z-index': 200
            })
            .animate({
              'opacity': 1,
            }, 500, 'linear');

          $(this).addClass('clicked');

        } else {

          $(this).parent().find('.show-more-panel')
            .stop(true, true).animate({
              'height': 0,
              'margin-top': '-30px',
              'opacity': 0
            }, 500, 'linear', function() {
              $(this).find('.show-more-box').css({
                'display': 'none'
              });
            });

          //replace button text on show/hide
          $(this).find('.hide-more-text').animate({
            'opacity': 0,
          }, 500, 'linear', function() {
            $(this).css({
              'z-index': 100,
              'display': 'none'
            });
          });

          $(this).find('.show-more-text')
            .css({
              'display': 'block',
              'z-index': 200
            })
            .animate({
              'opacity': 1,
            }, 500, 'linear');

          $(this).removeClass('clicked');
        }



      });

    });

    $(showMorePanel).each(function(index) {

      var showMoreClass = $(this).parent();

      $(this).on('mouseover', '.show-more-thumb', function() {

        var showMoreClass = $(this).parent().parent().parent();

        //remove border and box shadow
        $(showMoreClass).find('.show-more-border').removeClass('show-more-border');
        $(showMoreClass).find('.show-more-trans').removeClass('show-more-trans');

        //add border and box shadow
        $(this).parent().addClass('show-more-border');
        $(this).find('img').addClass('show-more-trans');

      });

      $(showMoreClass).on('mouseleave', function() {

        var showMoreClass = $(this),
          smActive = $(showMoreClass).prevAll('.showMoreLikeThis:first').find('.mainAdWrap.sm-active');
        var activeImgIndex = $(smActive).attr('class').match(/\bsm-ad(\d+)\b/)[1];
        var activateThumb = $(this).parent().find('.show-more-thumb.smthumb' + activeImgIndex).parent();

        //remove border and box shadow
        $(showMoreClass).find('.show-more-border').removeClass('show-more-border');
        $(showMoreClass).find('.show-more-trans').removeClass('show-more-trans');

        activateThumb.addClass('show-more-border')
          .find('img').addClass('show-more-trans');
      });

      $(this).on('click', '.show-more-thumb', function() {

        var showMoreClass = $(this).parent().parent().parent(),
          smActive = $(showMoreClass).prevAll('.showMoreLikeThis:first').find('.mainAdWrap.sm-active'),
          sm2ndClass = $(this).attr('class').split(' ')[1],
          index = (sm2ndClass).match(/smthumb(\d+)/)[1];

        $(smActive)
          .css({
            'z-index': 100
          })
          .animate({
            'opacity': 0
          }, 1000, 'linear')
          .removeClass('sm-active');
        //show new image
        $(showMoreClass).prevAll('.showMoreLikeThis:first').find('.mainAdWrap.sm-ad' + index + ':first')
          .css({
            'display': 'block',
            'opacity': 0,
            'z-index': 300
          }).stop(true, true).animate({
            'opacity': 1
          }, 1000, 'linear', function() {}).addClass('sm-active');
      });
    });

  };

  $(function() { // ON DOM READY
    ShowMoreLikeThis();
  });

})(jQuery, window, document);
</script>

HTML

Place the HTML somewhere in your page between <body> and <\body>.

<main id="showMoreLikeThis">
    <section class="showMoreLikeThis">
      <div class="mainAdWrap sm-active sm-ad0">
              <h1>Fine Arts</h1>
          <div class="adWrap">
              <img src="images/img0.png" alt="" />
          </div>
      </div>
     <div class="mainAdWrap sm-ad1">
              <h1>Fine Art for Auction Online | Auction King</h1>
          <div class="adWrap">
              <img src="images/img1.png" alt="" />
          </div>
      </div>
      <div class="mainAdWrap sm-ad2">
              <h1>Fine Art Festival | Amdur Productions</h1>
          <div class="adWrap">
              <img src="images/img2.png" alt="" />
          </div>
      </div>
     
     <div class="mainAdWrap sm-ad3">
              <h1>Leeds College of Art</h1>
          <div class="adWrap">
              <img src="images/img3.png" alt="" />
          </div>
      </div>
    </section>
    <aside class="show-more">
      <div class="show-more-panel">
        <div class="show-more-box show-more-border">
          <div class="show-more-thumb smthumb0">
            <img src="images/thumb0.png" class="show-more-trans" alt="" />
          </div>
        </div>
        <div class="show-more-box">
          <div class="show-more-thumb smthumb1">
            <img src="images/thumb1.png" alt="" />
          </div>
        </div>
        <div class="show-more-box">
          <div class="show-more-thumb smthumb2">
            <img src="images/thumb2.png" alt="" />
          </div>
        </div>
        <div class="show-more-box">
          <div class="show-more-thumb smthumb3">
            <img src="images/thumb3.png" alt="" />
          </div>
        </div>
      </div>
      <div class="show-more-btn">
        <span class="show-more-text">Show More</span>
        <span class="hide-more-text">Hide</span>
      </div>
    </aside>
    </main>

CSS

Place the CSS somewhere between <head> and <\head>.

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');

#showMoreLikeThis {
	font-family: 'Roboto', sans-serif;
}
#showMoreLikeThis .showMoreLikeThis {
	position:relative;
	width:320px;
	height:150px;
	margin:0 auto;
}
#showMoreLikeThis h1 { 
	position:absolute;
	top:0;
	left:0;
	font-size:14px;
	z-index:300;
}
#showMoreLikeThis .mainAdWrap {
	position:absolute;
	bottom:0;
	left:0;
	z-index:100;
}
#showMoreLikeThis .adWrap img {
	width:320px;
	height:150px;
}
#showMoreLikeThis .sm-ad0 { z-index:200;}
#showMoreLikeThis .sm-ad1, #showMoreLikeThis .sm-ad2, #showMoreLikeThis .sm-ad3 { display: none; }
#showMoreLikeThis .show-more {
	background-color:#ffefa3;
    width: 100%;
	position: relative;
	color:#333;
    text-align:center;
    border-left:1px solid #ffd507;
	border-right:1px solid ffd507;
	border-bottom:1px solid #ffd507;
    margin: -13px auto 0;
    padding-top:1px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    z-index:500;
}
#showMoreLikeThis .show-more-panel {
	background-color:#ffea84;
	margin:5px;
	padding:15px;
	border:1px solid rgba(255,255,255,0.2);
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:none;
}
#showMoreLikeThis .show-more-box {
	display:inline-block;
	margin:10px;
	border:1px solid transparent;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
	border-radius:5px;
}
#showMoreLikeThis .show-more-border {
	border:1px solid #ffd507;
}
#showMoreLikeThis .show-more-trans {
	opacity:0.55;
	box-shadow: 1px 1px 2px #000;
}
#showMoreLikeThis .show-more-thumb {
	border:1px solid rgba(255,255,255,0.5);
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
	border-radius:5px;
	padding:3px;
	cursor:pointer;
}
#showMoreLikeThis .show-more-thumb img {
	width:35px;
	height:35px;
	cursor:pointer;
}
#showMoreLikeThis .show-more-btn {
	width:250px;
	height:25px;
	font-size:21px;
	font-weight:500;
	border:1px solid #ffd507;
	-moz-border-radius:20px;
    -webkit-border-radius:20px;
	border-radius:20px;
	margin:10px auto 5px;
	padding:5px 10px;
	cursor:pointer;
	position:relative;
	z-index:600;
}
#showMoreLikeThis .show-more-text {
	width:250px;	
	position:absolute;
	top:5px;
	left:10px;
	text-align:center;
	z-index:200;
	display:inline-block;
}
#showMoreLikeThis .hide-more-text {
	width:250px;
	position:absolute;
	top:5px;
	left:10px;
	text-align:center;
	z-index:100;
	display:none;
}
#showMoreLikeThis .show-more-plus {
	font-size:21px;
	vertical-align: baseline;
    position: relative;
    top: 0.05em;
}


@media screen and (min-width: 47.5em ) {

	#showMoreLikeThis h1 { 
		font-size:24px;
	}
	#showMoreLikeThis .showMoreLikeThis, #showMoreLikeThis .adWrap img {
		width:1186px;
		height:277px;
	}
	#showMoreLikeThis .show-more-thumb img {
		width:133px;
		height:133px;
	}
}
</style>
, ,
Maria C. Lima

Maria C. Lima

Maria is an esteemed and celebrated independent web developer based in New York City. Her design and development work show tremendous passion and insight, which she brings to all of her clients and projects with love, professionalism, and an esteemed work ethic admired by all who partner with Maria.