title: Trying to add an additional title animation to my jquery slideshow
body: <p>So I downloaded a slideshow for my home page. It comes with 2 animated text titles (H2 and H3) that slide in from the left of the screen to center. I am now trying to add an additional line of text (H4) that should slide in from the right... with a few seconds delay.</p>
  
  <p>I already edited the webpage and .css file accordingly, but the javascript I am not too sure I know exactly what to do, and I don't wanna mess it up all together.</p>
  
  <p>I will paste here part of the js file where the title animation is being handled (if necessary I also stick the whole file at the bottom of this post).</p>
  
  <pre><code>        // titles animation
              $nextSlide.find('div.ei-title &gt; h2')
                    .css( 'margin-right', 50 + 'px' )
                    .stop()
                    .delay( this.options.speed * this.options.titlesFactor )
                    .animate({ marginRight : 0 + 'px', opacity : 1 },  
              this.options.titlespeed, this.options.titleeasing )
                    .end()
                    .find('div.ei-title &gt; h3')
                    .css( 'margin-right', -50 + 'px' )
                    .stop()
                    .delay( this.options.speed * this.options.titlesFactor )
                    .animate({ marginRight : 0 + 'px', opacity : 1 }, 
           this.options.titlespeed, this.options.titleeasing )
  </code></pre>
  
  <p>And here's the css file (already edited to include the added text as 'H4'):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ei-slider{
   position: relative;
   width: 100%;
   max-width: 1999px;
   height: 500px;
   margin: 0 auto;
  }
  .ei-slider-loading{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index:999;
   background: rgba(0,0,0,0.9);
   color: #fff;
   text-align: center;
   line-height: 400px;
  }
  .ei-slider-large{
   height: 100%;
   width: 100%;
   position:relative;
   overflow: hidden;
  }
  .ei-slider-large li{
   position: absolute;
   top: 20px;
   left: 0px;
   overflow: hidden;
   height: 100%;
   width: 100%;
  }
  .ei-slider-large li img{
   width: 100%;
  }
  .ei-title h4{
   position: absolute;
   left: 50%;
   margin-right: 13%;
   top: 30%;
  }
  
  .ei-title h2, h3{
   position: absolute;
   right: 50%;
   margin-right: 13%;
   top: 30%;
  }
  
  .ei-title h2, .ei-title h3{
   text-align: right;
  }
  
  .ei-title h4 {
          text-align: left;
  }
  
  .ei-title h2{
   font-size: 40px;
   line-height: 50px;
   font-family: 'Playfair Display', serif;
   font-style: italic;
   color: #b5b5b5;
  }
  .ei-title h3{
   font-size: 20px;
   line-height: 20px;
   font-family: 'Open Sans Condensed', sans-serif;
   text-transform: uppercase;
   color: #000;
  }
  
  .ei-title h4{
   font-size: 10px;
   line-height: 20px;
   font-family: 'sans-serif'; italic;
   text-transform: uppercase;
   color: #f0ffff;
  }
  
  
  
  
  /* the thumbs... */
  
  .ei-slider-thumbs{
   height: 1px;
   margin: 0 auto;
   position: relative;
  }
  .ei-slider-thumbs li{
   position: relative;
   float: left;
   height: 10%;
  }
  .ei-slider-thumbs li.ei-slider-element{
   top: 0px;
   left: 0px;
   position: absolute;
   height: 10%;
   z-index: 10;
   text-indent: -9000px;
   background: #000;
   background: rgba(0,0,0,0.9);
  }
  .ei-slider-thumbs li a{
   display: block;
   text-indent: -9000px;
   background: #666 ;
   width: 100%;
   height: 100%;
   cursor: pointer;
   -webkit-box-shadow: 
          0px 1px 1px 0px rgba(0,0,0,0.3), 
          0px 1px 0px 1px rgba(255,255,255,0.5);
   -moz-box-shadow: 
          0px 1px 1px 0px rgba(0,0,0,0.3), 
          0px 1px 0px 1px rgba(255,255,255,0.5);
   box-shadow: 
          0px 1px 1px 0px rgba(0,0,0,0.3), 
          0px 1px 0px 1px rgba(255,255,255,0.5);
   -webkit-transition: background 0.2s ease;
      -moz-transition: background 0.2s ease;
      -o-transition: background 0.2s ease;
      -ms-transition: background 0.2s ease;
      transition: background 0.2s ease;
  }
  .ei-slider-thumbs li a:hover{
   background-color: #f0f0f0;
  }
  .ei-slider-thumbs li img{
   position: absolute;
   bottom: 10px;
   opacity: 0;
   z-index: 999;
   max-width: 100%;
   -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
      transition: all 0.4s ease;
   -webkit-box-reflect: 
          below 0px -webkit-gradient(
              linear, 
              left top, 
              left bottom, 
              from(transparent), 
              color-stop(50%, transparent), 
              to(rgba(255,255,255,0.3))
              );
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  .ei-slider-thumbs li:hover img{
   opacity: -1;
   bottom: -1px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  
  
  @media screen and (max-width: 830px) {
   .ei-title{
    position: absolute;
    right: 0px;
    margin-right: 0px;
    width: 100%;
    text-align: center;
    top: auto;
    bottom: 10px;
    background: #fff;
    background: rgba(255,255,255,0.9);
    padding: 5px 0;
   }
   .ei-title h2, .ei-title h3, .ei-title h4 {
    text-align: center;
   }
   .ei-title h2{
    font-size: 30px;
    line-height: 24px;
   }
   .ei-title h3{
    font-size: 20px;
    line-height: 20px;
   }
   
   .ei-title h4{
    font-size: 10px;
    line-height: 20px;
   }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the html/js code on the webpage:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="wrapper"&gt;
                  &lt;div id="ei-slider" class="ei-slider"&gt;
                      &lt;ul class="ei-slider-large"&gt;
        &lt;li&gt;
                              &lt;img src="uploads/2016/01/slider-3.jpg" alt="image01"&gt;
                              &lt;div class="ei-title"&gt;
                                  &lt;h2&gt;High end Management Tools&lt;/h2&gt;
                                  &lt;h3&gt;Available at your fingertips!&lt;/h3&gt;
                                  &lt;h4&gt;With the available technologies, we provide the methods and tools that will help society to excel to new heights&lt;/h4&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;img src="uploads/2016/01/about-1.jpg" alt="image02" /&gt;
                              &lt;div class="ei-title"&gt;
                                  &lt;h2&gt;Enterprises, Administration Managers&lt;/h2&gt;
                                  &lt;h3&gt;Improve your Performance!&lt;/h3&gt;
                                  &lt;h4&gt;Regardless of your position, we have the solutions for all levels of professionals, and students alike.... &lt;/h4&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;img src="uploads/2016/01/home-parallax.jpg" alt="image03" /&gt;
                              &lt;div class="ei-title"&gt;
                                  &lt;h2&gt;Stunning Solutions&lt;/h2&gt;
                                  &lt;h3&gt;For Remarkable results!&lt;/h3&gt;
                                  &lt;h4&gt;We are bringing today's technology to assist the traditional family with promising results.&lt;/h4&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          
                      &lt;/ul&gt;&lt;!-- ei-slider-large --&gt;
  
   &lt;/div&gt;&lt;!-- ei-slider --&gt;
             
          &lt;/div&gt;&lt;!-- wrapper --&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.eislideshow.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
              $('#ei-slider').eislideshow({
      animation   : 'center',
      autoplay   : true,
      slideshow_interval : 6000,
      titlesFactor  : 0
              });
          });
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Oh, and finally, the entire javascript file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> 
   
   (function( window, $, undefined ) {
    
    /*
    * smartresize: debounced resize event for jQuery
    *
    * latest version and complete README available on Github:
    * https://github.com/louisremi/jquery.smartresize.js
    *
    * Copyright 2011 @louis_remi
    * Licensed under the MIT license.
    */
   
    var $event = $.event, resizeTimeout;
   
    $event.special.smartresize  = {
     setup: function() {
      $(this).bind( "resize", $event.special.smartresize.handler );
     },
     teardown: function() {
      $(this).unbind( "resize", $event.special.smartresize.handler );
     },
     handler: function( event, execAsap ) {
      // Save the context
      var context = this,
       args  = arguments;
   
      // set correct event type
      event.type = "smartresize";
   
      if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
      resizeTimeout = setTimeout(function() {
       jQuery.event.handle.apply( context, args );
      }, execAsap === "execAsap"? 0 : 100 );
     }
    };
   
    $.fn.smartresize    = function( fn ) {
     return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
    };
    
    $.Slideshow     = function( options, element ) {
    
     this.$el   = $( element );
     
     /***** images ****/
     
     // list of image items
     this.$list   = this.$el.find('ul.ei-slider-large');
     // image items
     this.$imgItems  = this.$list.children('li');
     // total number of items
     this.itemsCount  = this.$imgItems.length;
     // images
     this.$images  = this.$imgItems.find('img:first');
     
     /***** thumbs ****/
     
     // thumbs wrapper
     this.$sliderthumbs = this.$el.find('ul.ei-slider-thumbs').hide();
     // slider elements
     this.$sliderElems = this.$sliderthumbs.children('li');
     // sliding div
     this.$sliderElem = this.$sliderthumbs.children('li.ei-slider-element');
     // thumbs
     this.$thumbs  = this.$sliderElems.not('.ei-slider-element');
     
     // initialize slideshow
     this._init( options );
     
    };
    
    $.Slideshow.defaults   = {
     // animation types:
     // "sides" : new slides will slide in from left / right
     // "center": new slides will appear in the center
     animation   : 'sides', // sides || center
     // if true the slider will automatically slide, and it will only stop if the user clicks on a thumb
     autoplay   : false,
     // interval for the slideshow
     slideshow_interval : 3000,
     // speed for the sliding animation
     speed   : 1000,
     // easing for the sliding animation
     easing   : '',
     // percentage of speed for the titles animation. Speed will be speed * titlesFactor
     titlesFactor  : 0.60,
     // titles animation speed
     titlespeed   : 900,
     // titles animation easing
     titleeasing   : '',
     // maximum width for the thumbs in pixels
     thumbMaxWidth  : 150
       };
    
    $.Slideshow.prototype   = {
     _init     : function( options ) {
      
      this.options   = $.extend( true, {}, $.Slideshow.defaults, options );
      
      // set the opacity of the title elements and the image items
      this.$imgItems.css( 'opacity', 0 );
      this.$imgItems.find('div.ei-title &gt; *').css( 'opacity', 0 );
      
      // index of current visible slider
      this.current  = 0;
      
      var _self   = this;
      
      // preload images
      // add loading status
      this.$loading  = $('&lt;div class="ei-slider-loading"&gt;Loading&lt;/div&gt;').prependTo( _self.$el );
      
      $.when( this._preloadImages() ).done( function() {
       
       // hide loading status
       _self.$loading.hide();
       
       // calculate size and position for each image
       _self._setImagesSize();
       
       // configure thumbs container
       _self._initThumbs();
       
       // show first
       _self.$imgItems.eq( _self.current ).css({
        'opacity'  : 1,
        'z-index' : 10
       }).show().find('div.ei-title &gt; *').css( 'opacity', 1 );
       
       // if autoplay is true
       if( _self.options.autoplay ) {
       
        _self._startSlideshow();
       
       }
       
       // initialize the events
       _self._initEvents();
      
      });
      
     },
     _preloadImages  : function() {
      
      // preloads all the large images
      
      var _self = this,
       loaded = 0;
      
      return $.Deferred(
      
       function(dfd) {
      
        _self.$images.each( function( i ) {
         
         $('&lt;img/&gt;').load( function() {
         
          if( ++loaded === _self.itemsCount ) {
          
           dfd.resolve();
           
          }
         
         }).attr( 'src', $(this).attr('src') );
        
        });
        
       }
       
      ).promise();
      
     },
     _setImagesSize  : function() {
      
      // save ei-slider's width
      this.elWidth = this.$el.width();
      
      var _self = this;
      
      this.$images.each( function( i ) {
       
       var $img = $(this);
        imgDim = _self._getImageDim( $img.attr('src') );
        
       $img.css({
        width  : imgDim.width,
        height  : imgDim.height,
        marginLeft : imgDim.left,
        marginTop : imgDim.top
       });
       
      });
     
     },
     _getImageDim  : function( src ) {
      
      var $img    = new Image();
          
      $img.src    = src;
        
      var c_w  = this.elWidth,
       c_h  = this.$el.height(),
       r_w  = c_h / c_w,
       
       i_w  = $img.width,
       i_h  = $img.height,
       r_i  = i_h / i_w,
       new_w, new_h, new_left, new_top;
        
      if( r_w &gt; r_i ) {
       
       new_h = c_h;
       new_w = c_h / r_i;
      
      }
      else {
      
       new_h = c_w * r_i;
       new_w = c_w;
      
      }
        
      return {
       width : new_w,
       height : new_h,
       left : ( c_w - new_w ) / 2,
       top  : ( c_h - new_h ) / 2
      };
     
     },
     _initThumbs   : function() {
     
      // set the max-width of the slider elements to the one set in the plugin's options
      // also, the width of each slider element will be 100% / total number of elements
      this.$sliderElems.css({
       'max-width' : this.options.thumbMaxWidth + 'px',
       'width'  : 100 / this.itemsCount + '%'
      });
      
      // set the max-width of the slider and show it
      this.$sliderthumbs.css( 'max-width', this.options.thumbMaxWidth * this.itemsCount + 'px' ).show();
      
     },
     _startSlideshow  : function() {
     
      var _self = this;
      
      this.slideshow = setTimeout( function() {
       
       var pos;
       
       ( _self.current === _self.itemsCount - 1 ) ? pos = 0 : pos = _self.current + 1;
       
       _self._slideTo( pos );
       
       if( _self.options.autoplay ) {
       
        _self._startSlideshow();
       
       }
     
      }, this.options.slideshow_interval);
     
     },
     // shows the clicked thumb's slide
     _slideTo   : function( pos ) {
      
      // return if clicking the same element or if currently animating
      if( pos === this.current || this.isAnimating )
       return false;
      
      this.isAnimating = true;
      
      var $currentSlide = this.$imgItems.eq( this.current ),
       $nextSlide  = this.$imgItems.eq( pos ),
       _self   = this,
       
       preCSS   = {zIndex : 10},
       animCSS   = {opacity : 1};
      
      // new slide will slide in from left or right side
      if( this.options.animation === 'sides' ) {
       
       preCSS.left  = ( pos &gt; this.current ) ? -1 * this.elWidth : this.elWidth;
       animCSS.left = 0;
      
      } 
      
      // titles animation
      $nextSlide.find('div.ei-title &gt; h2')
          .css( 'margin-right', 50 + 'px' )
          .stop()
          .delay( this.options.speed * this.options.titlesFactor )
          .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
          .end()
          .find('div.ei-title &gt; h3')
          .css( 'margin-right', -50 + 'px' )
          .stop()
          .delay( this.options.speed * this.options.titlesFactor )
          .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
      
      $.when(
       
       // fade out current titles
       $currentSlide.css( 'z-index' , 1 ).find('div.ei-title &gt; *').stop().fadeOut( this.options.speed / 2, function() {
        // reset style
        $(this).show().css( 'opacity', 0 ); 
       }),
       
       // animate next slide in
       $nextSlide.css( preCSS ).stop().animate( animCSS, this.options.speed, this.options.easing ),
       
       // "sliding div" moves to new position
       this.$sliderElem.stop().animate({
        left : this.$thumbs.eq( pos ).position().left
       }, this.options.speed )
       
      ).done( function() {
       
       // reset values
       $currentSlide.css( 'opacity' , 0 ).find('div.ei-title &gt; *').css( 'opacity', 0 );
        _self.current = pos;
        _self.isAnimating  = false;
       
       });
       
     },
     _initEvents   : function() {
      
      var _self = this;
      
      // window resize
      $(window).on( 'smartresize.eislideshow', function( event ) {
       
       // resize the images
       _self._setImagesSize();
      
       // reset position of thumbs sliding div
       _self.$sliderElem.css( 'left', _self.$thumbs.eq( _self.current ).position().left );
      
      });
      
      // click the thumbs
      this.$thumbs.on( 'click.eislideshow', function( event ) {
       
       if( _self.options.autoplay ) {
       
        clearTimeout( _self.slideshow );
        _self.options.autoplay = false;
       
       }
       
       var $thumb = $(this),
        idx  = $thumb.index() - 1; // exclude sliding div
        
       _self._slideTo( idx );
       
       return false;
      
      });
      
     }
    };
    
    var logError     = function( message ) {
     
     if ( this.console ) {
      
      console.error( message );
      
     }
     
    };
    
    $.fn.eislideshow   = function( options ) {
    
     if ( typeof options === 'string' ) {
     
      var args = Array.prototype.slice.call( arguments, 1 );
   
      this.each(function() {
      
       var instance = $.data( this, 'eislideshow' );
       
       if ( !instance ) {
        logError( "cannot call methods on eislideshow prior to initialization; " +
        "attempted to call method '" + options + "'" );
        return;
       }
       
       if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
        logError( "no such method '" + options + "' for eislideshow instance" );
        return;
       }
       
       instance[ options ].apply( instance, args );
      
      });
     
     } 
     else {
     
      this.each(function() {
      
       var instance = $.data( this, 'eislideshow' );
       if ( !instance ) {
        $.data( this, 'eislideshow', new $.Slideshow( options, this ) );
       }
      
      });
     
     }
     
     return this;
     
    };
    
   })( window, jQuery );</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://examscan.us/sb/frontslider.php" rel="nofollow">My slider in action</a></p>