Reload content when switching tabs jquery/php

I'm trying to divide a photo gallery here into two parts.

The developer posted on his website the advice just below but I can't figure out how I should integrate that code :

" Customized the pageload(hash) method that is called by the history plugin as such: Determine which set of thumbs is being invoked using some jQuery trickery like such:

var thumbContainerId = $('div.navigation 
a.thumb').eq(+hash).parents('div.navigation').attr('id');
    Hide all "thumbnail containers" except the one in context (determined by the 
previous step)
    Call $.galleriffic.goto(hash);

Here is where in the js it seems that I have to integrate the changes.

function pageload(hash) {
                    // alert("pageload: " + hash);
                    // hash doesn't contain the first # character.


                    if(hash) {
                        $.galleriffic.gotoImage(hash);
                    } else {
                        gallery.gotoIndex(0);
                    }
                }

Here is the html :

<div id="page">
    <div class="navigation-container">
        <div id="thumbs1" class="navigation">
            <ul class="thumbs noscript">
               <li>
                          <img src="/images/pct_romania/001.jpg"/>
               </li>

            </ul>
        </div>
        <div id="thumbs2" class="navigation">
            <ul class="thumbs noscript">
               <li>
                          <img src="/images/pct_hungary/001.jpg"/>
               </li>

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

Here is the full js :

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

                // Initially set opacity on thumbs and add
                // additional styling for hover effect on thumbs
                var onMouseOutOpacity = 0.67;
                $('#thumbs1 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
                    mouseOutOpacity:   onMouseOutOpacity,
                    mouseOverOpacity:  1.0,
                    fadeSpeed:         'fast',
                    exemptionSelector: '.selected'
                });


                // Initialize Advanced Galleriffic Gallery
                var gallery = $('#thumbs1').galleriffic({
                    delay:                     2500,
                    numThumbs:                 10,
                    preloadAhead:              10,
                    enableTopPager:            false,
                    enableBottomPager:         false,
                    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:             true,
                    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);

                        // Update the photo index display
                        this.$captionContainer.find('div.photo-index')
                            .html(''+ (nextIndex+1) +' / '+ this.data.length);
                    },
                    onPageTransitionOut:       function(callback) {
                        this.fadeTo('fast', 0.0, callback);
                    },
                    onPageTransitionIn:        function() {
                        var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
                        var nextPageLink = this.find('a.next').css('visibility', 'hidden');

                        // Show appropriate next / prev page links
                        if (this.displayedPage > 0)
                            prevPageLink.css('visibility', 'visible');

                        var lastPage = this.getNumPages() - 1;
                        if (this.displayedPage < lastPage)
                            nextPageLink.css('visibility', 'visible');

                        this.fadeTo('fast', 1.0);
                    }
                });


                /**************** Event handlers for custom next / prev page links **********************/

                gallery.find('a.prev').click(function(e) {
                    gallery.previousPage();
                    e.preventDefault();
                });

                gallery.find('a.next').click(function(e) {
                    gallery.nextPage();
                    e.preventDefault();
                });

                /****************************************************************************************/

                /**** Functions to support integration of galleriffic with the jquery.history plugin ****/

                // PageLoad function
                // This function is called when:
                // 1. after calling $.historyInit();
                // 2. after calling $.historyLoad();
                // 3. after pushing "Go Back" button of a browser
                function pageload(hash) {
                    // alert("pageload: " + hash);
                    // hash doesn't contain the first # character.


                    if(hash) {
                        $.galleriffic.gotoImage(hash);
                    } else {
                        gallery.gotoIndex(0);
                    }
                }

                // Initialize history plugin.
                // The callback is called at once by present location.hash. 
                $.historyInit(pageload, "advanced.html");

                // set onlick event for buttons using the jQuery 1.3 live method
                $("a[rel='history']").live('click', function(e) {
                    if (e.button != 0) return true;

                    var hash = this.href;
                    hash = hash.replace(/^.*#/, '');

                    // moves to a new page. 
                    // pageload is called at once. 
                    // hash don't contain "#", "?"
                    $.historyLoad(hash);

                    return false;
                });

                /****************************************************************************************/
            });
        </script>

Answers


All contents for second gallery are present in html.

they are hidden because no style and Javascript is applied to it to add Gallery effect as it was done for first gallery.

there for you need to add following code in your Javascript spinet

// Initialize Advanced Galleriffic Gallery
                 var gallery2 = $('#thumbs2').galleriffic({
                    delay: 2500,
                    numThumbs: 10,
                    preloadAhead: 10,
                    enableTopPager: false,
                    enableBottomPager: false,
                    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: true,
                    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);

                        // Update the photo index display
                        this.$captionContainer.find('div.photo-index')
                                .html('' + (nextIndex + 1) + ' / ' + this.data.length);
                    },
                    onPageTransitionOut: function(callback) {
                        this.fadeTo('fast', 0.0, callback);
                    },
                    onPageTransitionIn: function() {
                        var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
                        var nextPageLink = this.find('a.next').css('visibility', 'hidden');

                        // Show appropriate next / prev page links
                        if (this.displayedPage > 0)
                            prevPageLink.css('visibility', 'visible');

                        var lastPage = this.getNumPages() - 1;
                        if (this.displayedPage < lastPage)
                            nextPageLink.css('visibility', 'visible');

                        this.fadeTo('fast', 1.0);
                    }
                });







                /**************** Event handlers for custom next / prev page links **********************/

                gallery2.find('a.prev').click(function(e) {
                    gallery2.previousPage();
                    e.preventDefault();
                });

                gallery2.find('a.next').click(function(e) {
                    gallery2.nextPage();
                    e.preventDefault();
                });

hope it will work.


You're lost the anchor tags from the thumbnail list, so this

$("a[rel='history']").live('click', function(e) {

does nothing. Put the tags back.

<li>
    <a class="thumb" href="#1" title="Romania 1" rel="history">
        <img src="/images/pct_romania/001.jpg"/>
    </a>
</li>

Need Your Help

Cannot create a jsTree inside of a jQueryUI tab

jquery jquery-ui jquery-ui-tabs jstree

I am not able to create a jsTree inside of a jQuery UI tab. If I create the jsTree outside of the tab, it works fine. Does anybody know if jsTree is incompatible with jQuery UI tab?

PHP file() vs fopen()+fgets() performance debate

php performance file fopen fgets

I am in process of rewriting some scripts to parse machine generated logs from perl to php