jquery lazy ajax loader

by pj_js15

HTML

<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.2/jquery.lazy.min.js"></script>
<div class="gallery-box col-md-9">
  <div class="col-md-11 pull-right">
    <ul>
      <li class="lazy" data-loader="ajaxLoader" data-id="1">
        <div class="inner"></div>
      </li>
      <li class="lazy" data-loader="ajaxLoader" data-id="2">
        <div class="inner"></div>
      </li>
      <li class="lazy" data-loader="ajaxLoader" data-id="3">
        <div class="inner"></div>
      </li>
      <li class="lazy" data-loader="ajaxLoader" data-id="4">
        <div class="inner"></div>
      </li>
      <li class="lazy" data-loader="ajaxLoader" data-id="5">
        <div class="inner"></div>
      </li>
      <li class="lazy" data-loader="ajaxLoader" data-id="6">
        <div class="inner"></div>
      </li>
      <li class="lazy" data-loader="ajaxLoader" data-id="7">
        <div class="inner"></div>
      </li>
      <li class="lazy" data-loader="ajaxLoader" data-id="8">
        <div class="inner"></div>
      </li>
      <li class="lazy" data-loader="ajaxLoader" data-id="9">
        <div class="inner"></div>
      </li>
      <li class="lazy" data-loader="ajaxLoader" data-id="10">
        <div class="inner"></div>
      </li>
    </ul>
    <div style="clear:both;"></div>
  </div>
</div>

CSS

.gallery-box ul > div {
  margin-bottom: 20px;
}
.gallery-box li {
  float: right;
  margin-left: 5%;
  display: block;
  margin-bottom: 20px;
  min-height: 205px;
  width: 218px;
}
.gallery-box li:last-child {
  margin-left: none;
}
.gallery-box li h4 {
  text-align: center;
}
.gallery-box li .inner {
  display: none;
  background-color: #fff;
  padding: 9px;
  width: 200px;
}
.gallery-box li img {
  width: 200px;
  height: 145px;
}

JavaScript

// this is only a helerp for this jsFiddle example
// please ignore this ;)
var contentHelper = '<a href="images/gallery2/image{ID}.jpg" title="Item {ID} title"><img src="images/gallery2/thumb{ID}.jpg" /><h4>جشن امضاء عادل فردوسی پور</h4></a>';

$(function() {
    $('li.lazy').lazy({
        // set the threshold to zero makes the effect more visible for the user
        threshold: 0,
        
        // this will create your loader named 'ajaxLoader'
        // it has two parameters, the 'element' to load and a 'response' function for Lazy
				ajaxLoader: function(element, response)  {
            // nor use jQuery's `$.ajax` function to load your data
            // maybe from a php script, static files or somthing else
            $.ajax({
                // this has to be your script url, where you will get the data from
                // this strange url here is only for jsFiddle example
                url: "/echo/html/",
                // we made a POST request with this
                method: "POST",
                // this defines the response type of your ajax request
                dataType: "html",
                // this is the data, posted to the script
                // we use the 'data-id' of the elements to identify the 'li' to load
                // (please ignore the second property 'html', it in only for jsFiddle example!)
                data: {id: element.data("id"), html: contentHelper},
                // this is the action, executed on a successfull request
                // parameter 'data' will contain the responded html content ...
                success: function(data) {
                	console.log('test:'+element.data("id"));
                    // for our example we got no php backend, so we fake the response a bit here
                    // (please ignore this line, it is only for this jsFiddle example!)
                    data = data.replace("{ID}", element.data("id"));
                    // we want to pass out content...