title: Stuck while Implementing complex jQuery Image Slider
body: <p>I have stuck some where while modifying <a href="http://landofcoder.com/demo/jquery/lofslidernews/" rel="nofollow"> <strong>THIS</strong> </a> slider.</p>
  
  <p>Here Thumbnail &amp; main display Image have one to one relationship i.e by clicking on 1 thumbnail, It shows a single Image &amp; then it slides to the next thumbnail &amp; displays its associated image &amp; so on.</p>
  
  <p>Now, I want to modify this slider in such a way that one thumbnail should be assiciated / linked with multiple Images i.e one thumbnail to many main display images relationship (one –to-many)</p>
  
  <p>i.e by clicking on “<strong>Bedroom thumbnail</strong>” (As shown in attached image .. <a href="http://i41.tinypic.com/fbjo77.png" rel="nofollow"> <strong>SCREENSHOT</strong></a> ) , It should only display &amp; slide 5 (or n) number of Images related to this particular thumbnail, then in the same way if I am clicking on “Bathroom thumbnail” , It should display &amp; slide 5 (or n) number of images related to this particular section &amp; so on. So this is how I wanna modify the code from ONE-to-ONE [one thumbnail-to-one main display image] to ONE-to-MANY [one thumbnail-to- 5 or n number of images related to that particular thumbnail]</p>
  
  <p>My Modified Thumbnail Section’s HTML code is same.</p>
  
  <p>I have modified the Main Image section as shown ..</p>
  
  <pre><code>&lt;div id="lofslidecontent45" class="lof-slidecontent" style="width:670px;height:236px;"&gt;
  &lt;div class="preload"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="lof-main-outer" style="width:670px; height:236px;"&gt;
  &lt;ul class="lof-main-wapper"&gt;
      &lt;li&gt;
          &lt;ul class=”lof-main-subwapper”&gt;
                      &lt;li&gt;
   &lt;img src="images/slider1.jpg" title="Newsflash 2" &gt;           
                          &lt;div class="lof-main-item-desc"&gt;
                          &lt;h3&gt;Innovation&lt;/h3&gt;
  &lt;h2&gt;lorem ipsum is simply dummy text&lt;/h2&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                       &lt;li&gt;
                           ..
                       &lt;/li&gt;
           &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li&gt;
          &lt;ul class=”lof-main-subwapper”&gt;
              &lt;li&gt;
                  …
              &lt;/li&gt;
              &lt;li&gt;
                  …
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am modifying the slider’s Script code, so far I have adder another wrappersub  class &amp; I am stuck while linking the group of images to one thumbnail i.e linking main image section’s ul with thumbnail’s li... </p>
  
  <pre><code> (function($) {
   $.fn.lofJSidernews = function( settings ) {
      return this.each(function() {
          // get instance of the lofSiderNew.
          new  $.lofSidernews( this, settings ); 
      });
   }
  
  
  $.lofSidernews = function( obj, settings ){
      this.settings = {
          direction           : '',
          mainItemSelector        : 'li',
                      mainInnerItemSelector   : 'li',
          navInnerSelector    : 'ul',
          navSelector         : 'li' ,
          navigatorEvent      : 'click',
                      subWrapperSelector      :'.lof-main-subwrapper',
          wapperSelector:     '.lof-main-wapper',
          interval        : 4000,
                      innerinterval           :20000,  
          auto                : true, // whether to automatic play   the slideshow
  maxItemDisplay      : 5,
          startItem           : 0,
          navPosition         : 'vertical', 
          navigatorHeight     : 100,
          navigatorWidth      : 310,
          duration            : 600,
  navItemsSelector    : '.lof-navigator li',
          navOuterSelector    : '.lof-navigator-outer' ,
          isPreloaded         : true,
          easing              : 'easeInOutQuad'
      }   
  
  $.extend( this.settings, settings ||{} );   
      this.nextNo         = null;
      this.previousNo     = null;
      this.maxWidth  = this.settings.mainWidth || 600;
      this.wrapper = $( obj ).find( this.settings.wapperSelector );
              this.subSlides = this.wrapper.find( this.settings.mainItemSelector );
              this.subwrapper = this.subslides.find(this.settings.subWrapperSelector)
              this.slides = this.subwrapper.find(this.settings.mainInnerItemSelector)
  
  if( !this.wrapper.length || !this.subslides.length ) return ;
  if( !this.subwrapper.length || !this.slides.length ) return ;
  if( this.settings.maxItemDisplay &gt; this.slides.length ){
          this.settings.maxItemDisplay = this.slides.length;  
  }
      this.currentNo      = isNaN(this.settings.startItem)
  )||this.settings.startItem &gt; this.slides.length?0:this.settings.startItem;
  this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );  
      this.navigatorItems = $( obj ).find( this.settings.navItemsSelector );
  this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
  if( this.settings.navPosition == 'horizontal' ){ 
          this.navigatorInner.width( this.slides.length *   this.settings.navigatorWidth );
          this.navigatorOuter.width( this.settings.maxItemDisplay *   this.settings.navigatorWidth );
          this.navigatorOuter.height( this.settings.navigatorHeight );
  } else {
          this.navigatorInner.height( this.slides.length *    this.settings.navigatorHeight );    
  
          this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
          this.navigatorOuter.width(  this.settings.navigatorWidth );
      }       
  
  this.navigratorStep = this.__getPositionMode( this.settings.navPosition );      
      this.directionMode = this.__getDirectionMode();  
  if( this.settings.direction == 'opacity') {
  this.subwrapper.addClass( 'lof-opacity' );
  $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
  } else { 
          this.subwrapper.css
  ({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) *    this.slides.length } );
      }
      if( this.settings.isPreloaded ) {
          this.preLoadImage( this.onComplete );
      } else {
          this.onComplete();
      }
  
   }
  
  
    $.lofSidernews.fn =  $.lofSidernews.prototype;
   $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
  
   $.lofSidernews.fn.extend({
  
  
      startUp:function( obj, subwrapper ) {
          seft = this;
  
          this.navigatorItems.each( function(index, item ){
              $(item).click( function(){
                  seft.jumping( index, true );
                  seft.setNavActive( index, item );                   
              } );
              $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
          })
          this.registerWheelHandler( this.navigatorOuter, this );
          this.setNavActive(this.currentNo );
  
          if( this.settings.buttons &amp;&amp; typeof (this.settings.buttons) == "object" ){
              this.registerButtonsControl( 'click', this.settings.buttons, this );
  
          }
          if( this.settings.auto ) 
          this.play( this.settings.innerinterval,'next', true );
  
          return this;
      },
  onComplete:function(){
          setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );
      },
  preLoadImage:function(  callback ){
          var self = this;
          var images = this.subwrapper.find( 'img' );
  var count = 0;
          images.each( function(index,image){ 
              if( !image.complete ){                
                  image.onload =function(){
                      count++;
                      if( count &gt;= images.length ){
                          self.onComplete();
                      }
                  }
                  image.onerror =function(){ 
                      count++;
                      if( count &gt;= images.length ){
                          self.onComplete();
                      }   
                  }
              }else {
                  count++;
                  if( count &gt;= images.length ){
                      self.onComplete();
                  }   
              }
          } );
      },
      navivationAnimate:function( currentIndex ) { 
  
          if (currentIndex &lt;= this.settings.startItem 
              || currentIndex - this.settings.startItem &gt;=   this.settings.maxItemDisplay-1) {
                  this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
                  if (this.settings.startItem &lt; 0) this.settings.startItem = 0;
                  if (this.settings.startItem &gt;this.slides.length-this.settings.maxItemDisplay) {
                      this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
                  }
          }       
  </code></pre>
  
  <p>Any HELP would be appreciated.</p>
  
  <p>Thank you</p>