Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS Slideshow Problem: Need to show more images

    PLEASE! I NEED HELP!
    I inherited this problem from a client who insists on keeping this template. I've got all of the images in the correct folder, the slideshow css is correct, but I'm not sure how to edit the Slideshow.js file to show the 2 additional images. The first 3 images work perfectly. I was able to swap custom images for the original images without a problem.
    Here is the Slideshow.js code

    Code:
     var $$ = $.fn;
    
    $$.extend({
      SplitID : function()
      {
        return this.attr('id').split('-').pop();
      },
    
      Slideshow : {
        Ready : function()
        {
          $('div.tmpSlideshowControl')
            .hover(
              function() {
                $(this).addClass('tmpSlideshowControlOn');
              },
              function() {
                $(this).removeClass('tmpSlideshowControlOn');
              }
            )
            .click(
              function() {
                $$.Slideshow.Interrupted = true;
    
                $('div.tmpSlide').hide();
                $('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');
    
                $('div#tmpSlide-' + $(this).SplitID()).show()
                $(this).addClass('tmpSlideshowControlActive');
              }
            );
    
          this.Counter = 1;
          this.Interrupted = false;
    
          this.Transition();
        },
    
        Transition : function()
        {
          if (this.Interrupted) {
            return;
          }
    
          this.Last = this.Counter - 1;
    
          if (this.Last < 1) {
            this.Last = 3;
          }
    
          $('div#tmpSlide-' + this.Last).fadeOut(
            'slow',
            function() {
              $('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
              $('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
              $('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');
    
              $$.Slideshow.Counter++;
    
              if ($$.Slideshow.Counter > 3) {
                $$.Slideshow.Counter = 1;
              }
    
              setTimeout('$$.Slideshow.Transition();', 4000);
            }
          );
        }
      }
    });
    
    $(document).ready(
      function() {
        $$.Slideshow.Ready();
      }
    );
    The html code for the pages looks like this:
    Code:
     <div id='tmpSlideshow'> 
                  <div id='tmpSlide-1' class='tmpSlide'> 
                    <div class="banner1"> 
                      <div class="clear"> 
                        <div class="banner_inner"> 
                          <div class="clear"> 
                            <p>Care for the whole family</p>
                          </div>
                          <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                          <div class="clear"> 
                            <ul>
                              <li>Newborn Care</li>
                              <li>Children</li>
                              <li>Teenagers</li>
                              <li>Young Adults</li>
                              <li>Seniors</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id='tmpSlide-2' class='tmpSlide'> 
                    <div class="banner2"> 
                      <div class="clear"> 
                        <div class="banner_inner"> 
                          <div class="clear"> 
                            <p>Care for the whole family</p>
                          </div>
                          <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                          <div class="clear"> 
                            <ul>
                              <li>Newborn Care</li>
                              <li>Children</li>
                              <li>Teenagers</li>
                              <li>Young Adults</li>
                              <li>Seniors</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id='tmpSlide-3' class='tmpSlide'> 
                    <div class="banner3"> 
                      <div class="clear"> 
                        <div class="banner_inner"> 
                          <div class="clear"> 
                            <p>Care for the whole family</p>
                          </div>
                          <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                          <div class="clear"> 
                            <ul>
                              <li>Newborn Care</li>
                              <li>Children</li>
                              <li>Teenagers</li>
                              <li>Young Adults</li>
                              <li>Seniors</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id='tmpSlide-4' class='tmpSlide'> 
                    <div class="banner4"> 
                      <div class="banner"> 
                        <div class="banner_inner"> 
                          <div class="clear"> 
                            <p>Care for the whole family</p>
                          </div>
                          <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                          <div class="clear"> 
                            <ul>
                              <li>Newborn Care</li>
                              <li>Children</li>
                              <li>Teenagers</li>
                              <li>Young Adults</li>
                              <li>Seniors</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                        </div>
                        <div class="clear"><img src="images/specer.gif" width="1" height="31" alt="" /></div>
                    </div>
              </div>
    		   <div id='tmpSlide-5' class='tmpSlide'> 
                    <div class="banner5"> 
                      <div class="clear"> 
                        <div class="banner_inner"> 
                          <div class="clear"> 
                            <p>Care for the whole family</p>
                          </div>
                          <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                          <div class="clear"> 
                            <ul>
                              <li>Weight Loss</li>
                              <li>Fit for Life</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,548
    Thanks
    77
    Thanked 4,382 Times in 4,347 Posts
    Code:
          if (this.Last < 1) {
            this.Last = 3;
          }
    You aren't showing all the code. In particular, you aren't showing where the list of image URLs is. But I *believe* that all you need to do is change that 3 in the above code to the number of images you actually have.

    If that doesn't work, the best thing to do would be to give us a link to your live page, so we can see all the code, not just what you chose to share.

    Also, this isn't really a JavaScript question as much as it is a jQuery question. You might get better help by posting in the jQuery forum.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •