पृष्ठ परिवर्तन के आकार के बाद gridify.js केवल बताता है - जावास्क्रिप्ट, jquery, css, gridify

इस मुद्दे के साथ gridify - पेज पर ज़ूम इन या ज़ूम आउट करने के बाद छवियां केवल तभी निकाली जाती हैं। यह किसी भी उदाहरण पृष्ठों पर नहीं होता है।

यह मेरा कोड है:

$(document).ready(function(){
var albumId = "xxxxxxxxxxxxx";
$.ajax({
dataType:"json",
url:"http://graph.facebook.com/" + albumId + "?fields=photos.fields%28images,source,picture,link,name%29,photos.limit%2840%29&_=1425840156371",
success:function(incomming){
var photos = incomming.photos.data;
for (var key in photos){
$("#photos").append("<img src="/images/" + photos[key].source + "" class="image">");
}
},
error:function(err){
console.log("Error collecting photos: " + JSON.stringify(err, null, 2));
}
});
});
$(window).load(function() {
var options = {
items:3,
srcNode: "img",
margin: "20px",
width: "250px",
resizable: true,
transition: "all 0.5s ease"
}
$(".grid").gridify(options);
});

मेरे .grid तत्व एक खाली div के रूप में शुरू होता है।

उत्तर:

जवाब के लिए 2 № 1

आपकी समस्या तब होती है जब आप "चीजें कर रहे हैं (आप जो भी कर रहे हैं) नहीं। तो, आप इसे प्राप्त करना चाहते हैं:

  1. कुछ छवियों को पकड़ने के लिए फेसबुक पर अजाक्स कॉल करें
  2. फेसबुक से अपने डोम में नया मार्कअप संलग्न करें
  3. बुलाएं gridify अपने पृष्ठ में जोड़े गए मार्कअप को व्यवस्थित करने के लिए फ़ंक्शन करें

The .ready() घटना HTML दस्तावेज़ लोड किया गया है के बाद स्थानों लेता है, और यह "एस यहां आप कर रहे है (1) और (2) ।को onload घटना एक बार पृष्ठ पर सभी सामग्री (छवियों आदि सहित) को डाउनलोड समाप्त हो गया है, और यह "एस तुम यहां" (3) कर पुनः होता है ।तो, कि ठीक लगता है.. ।

महत्वपूर्ण बात हालांकि, onload घटना के लिए अपने अतुल्यकालिक कॉल जब तक इंतज़ार नहीं जा रहा है समाप्त हो गया है-यह है कि, यह ' s केवल मार्कअप के लिए चारों ओर लटका है कि "पहले से ही पृष्ठ पर जा रहा है की कोई जानकारी नहीं है ।इसका मतलब है कि आप एक अतुल्यकालिक कॉल शुरू कर रहे हैं, तो तुरंत (3) से पहले यह समाप्त हो गया है कूद ।अपने gridify समारोह बुलाया जा रहा है, वहां "एस अभी तक वहां कुछ नहीं के लिए अभी तक इसके साथ काम करने के लिए ।

आप इस व्यवस्था के साथ भाग्यशाली हो सकता है (कई बार यह काम हो सकता है), लेकिन जैसा कि आप "ve पाया यह बहुत मजबूत नहीं है ।(1), (2), (3) को सुनिश्चित करने के क्रम में चलाने के लिए, बस अपने कोड के आदेश थोड़ा tweak, डाल gridify आप फेसबुक से कॉलबैक में समारोह:

$(document).ready(function(){
var albumId = "xxxxxxxxxxxxx";
var options = {
items:3,
srcNode: "img",
margin: "20px",
width: "250px",
resizable: true,
transition: "all 0.5s ease"
};
$.ajax({
dataType:"json",
url:"http://graph.facebook.com/" + albumId + "?fields=photos.fields%28images,source,picture,link,name%29,photos.limit%2840%29&_=1425840156371",
success:function(incomming){
var photos = incomming.photos.data;
for (var key in photos){
$("#photos").append("<img src="/images/" + photos[key].source + "" class="image">");
}
$(".grid").gridify(options);
},
error:function(err){
console.log("Error collecting photos: " + JSON.stringify(err, null, 2));
}
});
});

मैं हेवन ' टी के लिए यह परीक्षण कर रहा है, लेकिन उंमीद है कि आप सही दिशा में कम से अंक ।


संबंधित सवाल
सबसे लोकप्रिय