Question

I managed to apply this excellent example to my needs:

http://code.google.com/p/galleriffic/issues/attachmentText?id=76&aid=-3045121742886940548&name=example-2.html&token=4nlvmgAfVpc5whcXC9UEqHZaSz0%3A1339257750721

With a small twist: both galleries apply the image to the same slideshow container, so instead of having “#thumbs0” thumbnails change the image in “#slideshow0”, and “#thumbs1” thumbnails change the image in “#slideshow1” , i have them both set to change the image in “#slideshow” .

This is because I use tabs to separate 2 different categories of thumbnails, that change the image in one single slideshow container.

I did this by setting imageContainerSel to ‘#slideshow’, instead of ‘#slideshow’+i like in the example.

Here is the code:

HTML:

<div id="tabs">
<div class="each-gallery">
    <div id="thumbs0" class="navigation">
        <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
        </ul>

            <div id="tabs-1">
                <ul class="thumbs noscript">
                    <li>
                        <a class="thumb" href="images/1.jpg" title="Title #0">
                        <img src="images/thumbs/1.jpg" alt="Title #0" />
                            Title 1
                        </a>
                        <div class="caption">
                            <div class="image-title">Title 1</div>
                            <div class="image-desc">Description 1</div>
                        </div>
                    </li>
                    <li>
                        <a class="thumb" href="images/2.jpg" title="Title #0">
                            <img src="images/thumbs/2.jpg" alt="Title #0" />
                            Title 2
                        </a>
                        <div class="caption">
                            <div class="image-title">Title 2</div>
                            <div class="image-desc">Description 2</div>
                        </div>
                    </li>

                </ul>
            </div>

        </div>
</div>

            <div id="tabs-2">
                <div class="each-gallery">
                    <div id="thumbs1" class="navigation">

                <ul class="thumbs noscript">
                    <li>
                        <a class="thumb" href="images/3.jpg" title="Title #0">
                        <img src="images/thumbs/3.jpg" alt="Title #0" />
                            Title 3
                        </a>
                        <div class="caption">
                            <div class="image-title">Title 3</div>
                            <div class="image-desc">Description 3</div>
                        </div>
                    </li>
                    <li>
                        <a class="thumb" href="images/4.jpg" title="Title #0">
                            <img src="images/thumbs/4.jpg" alt="Title #0" />
                            Title 4
                        </a>
                        <div class="caption">
                            <div class="image-title">Title 4</div>
                            <div class="image-desc">Description 4</div>
                        </div>
                    </li>

                </ul>
                    </div>
                </div>
            </div>

Javascript:

 <script type="text/javascript">
                    jQuery(document).ready(function($) {
                            // We only want these styles applied when javascript is enabled
                            // We only want these styles applied when javascript is enabled
                            $('div.navigation').css({'width' : '960px', 'float' : 'left'});
                            $('div.content').css('display', 'block');

                            $(".each-gallery").each(function(i){
                                    // Initially set opacity on thumbs and add
                                    // additional styling for hover effect on thumbs
                                    var onMouseOutOpacity = 0.67;
                                    $('#thumbs + i + ul.thumbs li').opacityrollover({
                                            mouseOutOpacity:   onMouseOutOpacity,
                                            mouseOverOpacity:  1.0,
                                            fadeSpeed:         'fast',
                                            exemptionSelector: '.selected'
                                    });

                                    // Initialize Advanced Galleriffic Gallery
                                    var gallery = $('#thumbs'+i).galleriffic({

                                            delay:                     2500,
                                            numThumbs:                 20,
                                            preloadAhead:              0,
                                            enableTopPager:            false,
                                            enableBottomPager:         false,
                                            maxPagesToShow:            7,
                                            imageContainerSel:         '#slideshow',
                                            controlsContainerSel:      '#controls',
                                            captionContainerSel:       '#caption',
                                            loadingContainerSel:       '#loading',
                                            renderSSControls:          true,
                                            renderNavControls:         true,
                                            playLinkText:              'Play Slideshow',
                                            pauseLinkText:             'Pause Slideshow',
                                            prevLinkText:              '&lsaquo; Previous Photo',
                                            nextLinkText:              'Next Photo &rsaquo;',
                                            nextPageLinkText:          'Next &rsaquo;',
                                            prevPageLinkText:          '&lsaquo; Prev',
                                            enableHistory:             false,
                                            autoStart:                 false,
                                            syncTransitions:           true,
                                            defaultTransitionDuration: 900,
                                            onSlideChange:             function(prevIndex, nextIndex) {
                                                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                                                    this.find('ul.thumbs').children()
                                                            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                                                            .eq(nextIndex).fadeTo('fast', 1.0);
                                            },
                                            onPageTransitionOut:       function(callback) {
                                                    this.fadeTo('fast', 0.0, callback);
                                            },
                                            onPageTransitionIn:        function() {
                                                    this.fadeTo('fast', 1.0);
                                            }
                                    });
                            });

                    });
            </script>

The problem:

on page load, both galleries load their first image to #slideshow at the same time, so on initial page load, the image appears twice, one below the other. Only after clicking on a different thumbnail the second image disappears and everything works as expected.

How do I fix it?

Answer 1

I managed to solve the problem myself.

In case anyone is interested, here is the solution:

I gave the first thumb in the first gallery a unique name:

<a class="thumb" name="first" href="images/1.jpg" title="Title #0">

And modified jquery.galleriffic.js:

                var buuga = this.data[nextIndex].hash;
            if(buuga !== 'first') {
                            var newSlide = this.$imageContainer
                .append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'">&nbsp;</a></span>')
                .find('span.current').css('opacity', '0');
            }

What i changed was adding the ‘buuga’ variable to store the name, and wrapped the part that constructs a new hidden span for the image in an “if” condition that does not run if the name is “first’.