Question

I’ve a gallery with a large image slider and a small grid of thumbnails working in php but I need a javascript function to swap and reuse this function to interactively load the new images and thumbnails. How would I pass the start parameter to a Jquery function to fill the image slider and the grid? Currently I’m writing a href to the document with the start parameter and in the document.load function I scrap this href und fire a getjson function to pull the records from my database?

Here is my Jquery, it looks for the first href in my menu li document subtree and use it as get parameter to pull the records from my database:

   $j("#tx-gallery-pi1 #menu li").click(function() {  
     $j.getJSON($j(this).find('a').attr('href'), function(json) {
    var container = $j('#tx-gallery-pi1 #container');
    container.masonry();
    $j.each(json, function(idx, ele) {
      container.append($j("#brickTemplate").tmpl(ele).css({
        "display": "block"
      })).masonry('reload');

      container.imagesLoaded(function() {
        // bricks correct height
        var brick = $j("#tx-gallery-pi1 #container .brick"); 
        brick.each(function() {
          var content = $j(this).find(">div");
          var img = $j(this).find("img");
           content.css({
            height: img.attr("height")
           });
        });
      });
    });
  });
  return false; // don't follow the link!
});

}

Answer 1

when you create an HTML document with php, you can say

<script>
    var startvar ='<?php echo($yourvariable); ?>';
</script>

and use it later on in the site.

You can update your output document using AJAX.