CODEWITHSUNDEEP
jqueryajaxload
Dirty Bird Design
Dirty Bird Design

Reputation: 5533

Help loading "galleria" gallery with .load

I have an image gallery of 100+ images, to make it load faster I want to split it up into groups of 30. On the page there is a navigation "Gallery 1 2 3 4 5" and when the user clicks any of the numbers I want to load the link's href into "#rCol" - but only the "#galleria" section. I can get it to load the content but it A)loads the whole page and B) the "galleria" functionality isn't enabled.

Is it possible to make an xml file that contains all the images and create a pager that will skip through 30 at a time?

I'm trying to make a var out of the link's href so I don't have to add a class to each and write a function for each class. 

$("ul#gallery li a").live('click',function(e) {
        e.preventDefault();
        var $parent = $(this).parent();
        $parent.addClass("selected").siblings().removeClass("selected");
        var href = $(this).attr('href');
        $("#rCol").load(href, function() {
            $("#galleria").galleria();
        });
    });

// Initialize Galleria
$("#galleria").galleria({
    transition: 'fade',
    width: 800,
    height: 536,


    extend: function(options) {

        Galleria.log(this) // the gallery instance
        Galleria.log(options) // the gallery options

        // listen to when an image is shown
        this.bind('image', function(e) {

            Galleria.log(e) // the event object may contain custom objects, in this case the main image
            Galleria.log(e.imageTarget) // the current image

            // lets make galleria open a lightbox when clicking the main image:
            $(e.imageTarget).click(this.proxy(function() {
               this.openLightbox();
            }));
        });
    }
});

any ideas?

Trying to reinitialize the "galleria" function here. all sorts of issues, not updating the thumbnails then after clicking Album 2, going back to album 1 it loads the whole page in the div.

$("ul#gallery li a").live('click',function(e) {
        e.preventDefault();
        var $parent = $(this).parent();
        $parent.addClass("selected").siblings().removeClass("selected");
        var href = $(this).attr('href');
        $("#rCol").load(href, function() {
            $("#galleria").galleria({
                              transition: 'fade',
                              width: 800,
                              height: 536,


                              extend: function(options) {

                              Galleria.log(this) // the gallery instance
                              Galleria.log(options) // the gallery options

                              // listen to when an image is shown
                              this.bind('image', function(e) {

                              Galleria.log(e) // the event object may contain custom objects, in this case the main image
                              Galleria.log(e.imageTarget) // the current image

            // lets make galleria open a lightbox when clicking the main image:
            $(e.imageTarget).click(this.proxy(function() {
                this.openLightbox();
            }));
            });
        }



                            });
        });
    });

Upvotes: 0

Views: 2270

Answers (1)

Rudie
Rudie

Reputation: 53811

The gallery (your HTML will be something like this. Right?)

<div id="rCol">
  <div id="galleria">
    <ul>
      <li><img src="" alt /></li>
      <li><img src="" alt /></li>
      <!-- etc -->
    </ul>
  </div>
</div>

The nav links (your nav links' semantics don't matter much)

<ul id="galleria-nav">
  <li><a href="?page=1">...</a></li>
  <li><a href="?page=2">...</a></li>
  <!-- etc -->
</ul>

Javascripts (this is the important part)

<script>
function loadPage(href) {
  // do ajax call, with success handler:
  $.post(href, function(rsp) {
    // `rsp` is now the ENTIRE html page (incl <html> etc????)
    // what you should do here, is filter the HTML, so you keep only div#galleria
    // I can't do that here, because I have no idea what your actual HTML looks like
    $('rCol').html(rsp);
    initGalleryClickables();
  }, null); // the `null` is just to show you there's no actual POST data
}
function initGalleryClickables() {
  // reinit the galleria plugin (DOM changed)
  $("#galleria").galleria({
    transition: 'fade',
    // more settings that you already have in your code
  });
  // reinit gallery image links? for lightbox or something? maybe not...
}
// no point in reiniting the nav links: their DOM doesn't change
$('#galleria-nav a').click(function(e) {
  e.preventDefault(); // it's not a link
  loadPage(this.href);
});
</script>

I don't like jQuery.live and try to avoid it. It uses bubbling and in big DOMs that's just not efficient. In many cases, it's not necessary either. Like this one.

I think in your case, the problem lies in the response you get from the ajax request (see inline comment). You might be able to filter the right piece of HTML with Javascript, but much much better would be to do this filtering server side. I assume you have access to the output script. A few if's should suffice.

edit
You could use .live for the nav links (and gallery picture links, if there are any (links)), but you'd still have to reinitialize the galleria plugin, so I don't use .live and reinit the whole thing

As I said: you'll need to filter the right piece of HTML. Preferably server side (less download and easier filtering than in Javascript). I can't help you with that unless you show me some server side code =)

Upvotes: 1

Related Questions