My client wants to see 16 slides in the slideshow, which seemed perfectly doable considering that the javascript looks up how many images there are and how big they are, then just cycles through. I'm running into a problem where if I add more than 12 slides, when the slideshow is running it starts flipping through all the previous slides on the way to the next one once you get to slide thirteen.

For example:
slide 10 to slide 11: smooth transition
slide 11 to slide 12: smooth transition
slide 12 to slide 13: you see slides 1-12 slide through really quick, then you get to slide 13
slide 13 to slide 14: you see slides 1-13 slide through really quick, then you get to slide 14
etc.

It looks like it's doing what should happen when you get to the end of the slideshow and go back to the first slide, but instead you get all the slides in the middle. Once you get to the end, rather than scrolling back through it just jumps statically to the first one.

Any ideas what's up? I thought it might be a deal with image size, but I think it still happens when I swap out what image is shown in that 13th spot.

Here is my slideshow code:

    <div id="banner">
    <?php print render($page['banner']); ?>
    
        <div class="main_view">
            <div class="window">
                <div class="image_reel">
                    <a href="<?php print url('about'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/about-IMGP6115crop.jpg'; ?>"></a>
                    <a href="<?php print url('http://www.racing.com'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/slideshow/end-IMG_8229_peck2009crop.jpg'; ?>"></a>
                    <a href="<?php print url('youth'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/youth-nznd075crop.jpg'; ?>"></a>
                    <a href="<?php print url('community'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 				'/slideshow/community-IMG_8148crop.jpg'; ?>"></a>
                    <a href="<?php print url('news'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/news-IMGP5214crop.jpg'; ?>"></a>
                    <a href="<?php print url('media'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/media-IMGP2429crop.jpg'; ?>"></a>
                    <a href="<?php print url('store'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/store-IMG_0186crop.jpg'; ?>"></a>
                    <a href="<?php print url('donate'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/donate-IMGP6688crop.jpg'; ?>"></a>
                    <a href="<?php print url('about'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/about-IMG_7718crop.jpg'; ?>"></a>
                    <a href="<?php print url('http://www.racing.com'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/slideshow/end-070crop.jpg'; ?>"></a>
                    <a href="<?php print url('youth'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/youth-IMGP4934crop.jpg'; ?>"></a>
                    <a href="<?php print url('community'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 				'/slideshow/community-IMGP5726crop.jpg'; ?>"></a>
                    <a href="<?php print url('news'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/news-IMGP6152crop.jpg'; ?>"></a>
                    <a href="<?php print url('media'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/media-041crop.jpg'; ?>"></a>
                    <a href="<?php print url('store'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/store-IMG_8035crop.jpg'; ?>"></a>
                    <a href="<?php print url('donate'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . 					'/slideshow/donate-031crop.jpg'; ?>"></a>
                </div>
                <div class="descriptions">
                    <div class="desc" style="display: none;">About</div>                
                    <div class="desc" style="display: none;">Racing</div>
                    <div class="desc" style="display: none;">Youth</div>
                    <div class="desc" style="display: none;">Community Projects</div>
                    <div class="desc" style="display: none;">News</div>                
                    <div class="desc" style="display: none;">Media</div>
                    <div class="desc" style="display: none;">Store</div>
                    <div class="desc" style="display: none;">Donate</div>
                    <div class="desc" style="display: none;">About</div>                
                    <div class="desc" style="display: none;">Racing</div>
                    <div class="desc" style="display: none;">Youth</div>
                    <div class="desc" style="display: none;">Community Projects</div>
                    <div class="desc" style="display: none;">News</div>                
                    <div class="desc" style="display: none;">Media</div>
                    <div class="desc" style="display: none;">Store</div>
                    <div class="desc" style="display: none;">Donate</div>
                </div>
            </div>
        
            <div class="paging">
                <a rel="1" href="#">1</a>
                <a rel="2" href="#">2</a>
                <a rel="3" href="#">3</a>
                <a rel="4" href="#">4</a>
                <a rel="5" href="#">5</a>
                <a rel="6" href="#">6</a>
                <a rel="7" href="#">7</a>
                <a rel="8" href="#">8</a>
                <a rel="9" href="#">9</a>
                <a rel="10" href="#">10</a>
                <a rel="11" href="#">11</a>
                <a rel="12" href="#">12</a>
                <a rel="13" href="#">13</a>
                <a rel="14" href="#">14</a>
                <a rel="15" href="#">15</a>
                <a rel="16" href="#">16</a>
            </div>
        </div>
    </div><!--EOF:banner-->

Comments

gtsopour’s picture

Assigned: Unassigned » gtsopour
gtsopour’s picture

Hello dakotaroar,
I will try to reproduce your issue and i will inform you.

mattbk’s picture

Any thoughts on this yet?

gtsopour’s picture

Hello dakotaroar

there is no limit to the number of slides that you can add. Ι just made an example implementation with 18 slides without any problem.
Is there any slide image in your slideshow without the required size 930x320px? Also, is there your drupal installation online, in order to see your problem live?

Thanks

mattbk’s picture

You can see it on the front page of www.groundupadventures.com. I'll look through all the images to see if there are any that are the wrong size.

gtsopour’s picture

Hello dakotaroar

now I realized your issue at www.groundupadventures.com. I'll reply to you soon after examining the javascript code.

Thanks for the report.

chefarov’s picture

Sry wrong post. Please delete

mattbk’s picture

There was one image (fixed) that was one pixel short, but I still see the same results.

hondaman900’s picture

Hey dakotaroar, where do you put your code to increase the number of slides and their links? I'm not finding a suitable location to place the code. I'm trying to change the number of slides and their hyperlink, but so far not getting anywhere.

Thx

chefarov’s picture

You add elements/images by hand with html in page--front.tpl.php file right after
class="image_reel"

Telex’s picture

Can someone PLEASE fix this? I am having the same exact issue at slide 13 and above. It doesn't matter what picture I use. If there is anything I can do to help get this resolved, please let me know!

djsagar’s picture

Status: Active » Needs review

Hi,

There is no limit to the number of slides you can add it,
you can add slides as much you want go to page--front.tpl.php and add slides.

Thanks!

gaurav.kapoor’s picture

Status: Needs review » Closed (outdated)