1

I'd appreciate some help with my jQuery gallery I'm trying to write. I'm way out of my depth compared to the small bits of jQuery I usually write, I've been searching a lot and reading things but pulling it all together is proving VERY hard for me!

Here's the general idea;

  • I have my own small function which adds an additional thumbnail to a gallery. When a thumbnail is clicked the main (larger) image changes to display the selected image. This works ok, but when calling this function multiple times I get duplicate thumbnails. This is a symptom on my main issue (turning functions on and off). This gallery will run on smaller screens (set to 980 as you'll see).

  • My second function is a plugin called fancyBox. I'd like this to work on windows larger than 980. I was planning to deactivate this in a very simplistic manner, which is using removeClass() to take away the "fancybox" class the plugin uses. This may not be sufficient though, as a window resize may cause this plugin to be called over and over again. I would love to know more about this subjet.

  • I found some script from Paul Irish's site which is designed to slow down the rate at which the window resize fires. This will hopefully make the load on the clients machine much lower.

  • The two pieces of functionality are controlled by this: jQuery(window).smartresize(function() - I'll post the full snippets below.

So..my issue/question is this. How do I turn these two pieces of functionality on and off when the window is resized? I don't know enough (so please don't laugh!), but I'm expecting I need to get rid of data (event listeners?) or something like that? I just don't know. As I make responsive websites I would really like to know how to get this working because I'm bound to use it over and over.

Here is what I have so far:

                    //window resize function, to slow down the response
    (function(jQuery,sr){

      // debouncing function from John Hann
      // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
      var debounce = function (func, threshold, execAsap) {
          var timeout;

          return function debounced () {
              var obj = this, args = arguments;
              function delayed () {
                  if (!execAsap)
                      func.apply(obj, args);
                  timeout = null;
              };

              if (timeout)
                  clearTimeout(timeout);
              else if (execAsap)
                  func.apply(obj, args);

              timeout = setTimeout(delayed, threshold || 100);
          };
      }
    // smartresize 
    jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

    })(jQuery,'smartresize');

My dodgy gallery..

    // gallery function
    var responsiveGallery = 
    //responsive gallery
    function tabletGallery(){
        var featuredImg = $('.gallery .featured_img a').attr('href');
        var featuredImgThumb = $('.gallery .featured_img a').data('thumb');
        //count children for class
        var newClass = $('ul#gallery_thumbnails li').length + 1;
        $('ul#gallery_thumbnails').append(
            $('<li>').addClass('_' + newClass).append(
                $('<span>').addClass('img_shell').append(
                    $('<a>').attr('href', featuredImg).append(
                        $('<img>').attr('src', featuredImgThumb)
                    )
                )
            )
        );
        $('.gallery .featured_img a').click(function(e){ e.preventDefault(); });
        $('ul#gallery_thumbnails a').click(function(e){
            e.preventDefault();
            var bigLink = $(this).attr('href');
            $('.gallery .featured_img img').attr('src', bigLink);
        });
    }

This is where I think I need to stop the gallery from working

    // destroy gallery
    var destroyGallery = 
    function destroyGallery(){
        $('.gallery a').unbind(click);
    }

And here's the window resize function working

    // usage:
    jQuery(window).smartresize(function(){
        var WW = jQuery(window).width();
        if(WW < 980)
        {
            responsiveGallery();
            jQuery('.gallery a').removeClass('fancybox');
        }
        else
        {
            destroyGallery();
            jQuery('.fancybox').fancybox({ nextEffect:"fade" , prevEffect:"fade", padding:5 }); 
        }
    });

I'm aware this is a large post, but I'm hoping I'm not too far off completing this. Thank you very much for taking the time to look at this.

4

0 回答 0