Dynamically loading Justified gallery images with infinite scroll - javascript

I'm using jQuery Justified gallery with the inbuilt infinite scroll plugin.
http://miromannino.github.io
This may be stupid question but how can i load the images dynamically with PHP.
I know how to do it with the below infinity scroll plugin but this plugin doesn't work with the infinity scroll plugin.
http://www.infinite-scroll.com/
Code
$('#gallery').justifiedGallery({rowHeight:120});
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
for (var i = 0; i < 5; i++) {
$('#gallery').append('<a>' +
'<img src="http://path/to/image" />' +
'</a>');
}
$('#gallery').justifiedGallery('norewind');
}
});

$('#gallery').justifiedGallery({rowHeight:120});
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() == $(document).height()){
//jquery ajax for dynemic loading images
$.ajax({
type:'post',//method can bet get,post
url:'yourPHPFile.php',//url of your php file
data:{"key":value},//if you want to send some data for query
success:function(result){ //function call when successful response from server
var PhpImageArray=JSON.parse(result);
$.each(PhpImageArray, function(index, item) {
$('#gallery').append('<a>' +
'<img src="http://path/to/image"'+item.image+' />' +
'</a>');
});
}
});
$('#gallery').justifiedGallery('norewind');
}
});
phpfile.php
<?php
//array contain image object as
$img_array=array();
//your database query
$query=mysqli_query($DB_connect,"select imageName from ImageTable");
while($img=mysqli_fetch_array($query))
{
//object name with "image"
$obj["image"]=$img["imageName"];
//push object to arraay
array_push($img_array,$obj);
}
//convert array in to json format for javascript use
echo json_encode($img_array);
?>

You could count the amount of images by using Javascript
var offset = $('#gallery').children().length
Then you could make an ajax call to a given route (e.g /giveImages) which returns an JSON-Array containing the image URL's
$.get('/giveImages?offset=' + offset, function(data) {
// data = [
// 'http://foo.com/image/3.jpg',
// 'http://foo.com/image/4.jpg',
// 'http://foo.com/image/5.jpg'
// ]
// APPEND STUFF HERE AND justifyGallery
})
Full example:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
var offset = $('#gallery').children().length
$.get('/giveImages?offset=' + offset, function(data) {
for(var i = 0; i < data.length; i++) {
$('#gallery').append(
'<a>' +
'<img src="' + data[i] + '" />' +
'</a>'
)
$('#gallery').justifiedGallery('norewind')
}
})
}
}

Related

Jquery mobile open individual feed items on separate page

I have this code which is supposed to be an RSS reader using JQuery, HTML5 and CSS.
The challenge is that, I'm trying to open each individual feed item on a separate page after clicking on the title.
I'm not sure how to go about it.
Here's my code:
function getRSSFeed(feed) {
var qryRSS = 'select * from rss where url=' + '"' + feed + '"';
$.getJSON("http://query.yahooapis.com/v1/public/yql", {
q: qryRSS,
format: "json"
},
function (data) {
for (i = 0; i < 10; i++)
{
var con = data.query.results.item[i].link;
$('#body-content').append(' <div id="rss-bdy">' + data.query.results.item[i].encoded + '</div>');
$('#body-content').append('<hr>')
$('#body-content').append('<div id="rss-ttle"><h4>' + data.query.results.item[i].title + '</h4></div>');
$('#body-content').append('<p id="rss-dte">' + data.query.results.item[i].pubDate + '</p><br>');
$('#body-content2').append('<div id="full-article">' + con + '</div>');
}
$(function () {
$("#rssDivBody").rssDivBody();
});
});
};
getRSSFeed('meps4wildlife.eu/feed');

How to do load() on ajax loaded images?

want to do nice image loading, but my images are loaded by ajax (prepend). How to do load() on each image. I want it to load one by one, order doesn't matter. Before image load I want some loading gif.
Here is what I tried:
.done(function( data ) {
var obj = JSON.parse(data);
for(i = 0; i < obj.length; i++)
if(obj[i].indexOf("blank.gif") > -1)
continue;
else
$("#images_for_this_gallery").prepend("<div id='fd_" + i + "' class='featured_image_div'>" +
"<span class='imageloading'>loading</span>" + //LOADING MEESAGE FOR EACH IMAGE
"<img class='images' src='" + image_path + obj[i] + "' />" + // IMAGE FOR NICE LOAD
"<a href='#' id='" + obj[i] + "' class='image_delete'>X</a>" +
"</div>").hide();
});
And here is my attempt:
$(".images").each(function() {
if (this.complete) {
// this image already loaded
// do whatever you would do when it was loaded
} else {
$(this).load(function() {
$(".imageloading").hide();
$(this).show();
});
}
});
Here is another attempt:
$(function() {
$(".images").load(function(){
$(".imageloading").hide();
$(".images").show();
});
});
It works on normal image but not on ajax generated image...
Thank you!

Increase jquery variable by 1 on scroll

I'm having issues increasing a variable by 1 every time I scroll. I successfully increase the variable by 1, but only once. This is the code I got. I need to increase the variable page.
$(document).ready(function () {
$(document).scroll(function (e) {
currentPage = 0;
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
++currentPage;
$.getJSON("../campus/Settings/TranslationSettings.ashx?command=show&page=" + currentPage + "&Lang=en", function (data) {
var items = [];
$.each(data.Keys, function (key, val) {
$("<ul/>", {
"class": "translateinfo",
html: "<li class='keystring'><span class='label'>text string:</span>" + val["text string"] + "</li>" + "<li class='autotranslate'><span class='label'>Automated translation:</span>" + val["automated translation"] + "</li>" + "<li class='functionnumber'><span class='label'>Function Number:</span>" + val["function number"] + "</li>" + "<li class='translateurl'><span class='label'>URL:</span>" + val["url"] + "</li>"
}).appendTo("#updatepanel");
});
});
}
});
});
Not sure if you copy/paste your entire code. But you're recreating currentPage everytime the user scroll
Working fiddle, I create the variable before the scroll loop.
var currentPage = 0;
$(document).scroll(function (e) {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
++currentPage;
console.log(currentPage);
}
})
http://jsfiddle.net/dCr3Z/

Displaying 30 Instagram Images of certain tag of certain userID

I have an Instagram API call that requests images tagged with CrookedSpaces, when those images return I am filtering the data making sure that only images from a certain user (using their userID), the code follows:
$(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/tags/crookedspaces/media/recent/?count=100&access_token=TOKEN",
success: function(data) {
for (var i = 0; i < 31; i++) {
var igUID = data.data[i].user.id;
if(igUID === "USER ID") {
$(".instagram").append("\
<div class='instagram-feed'>\
<img class='instagram-image' src='" + data.data[i].images.standard_resolution.url +"' width='325px' alt='" + data.data[i].user.id + " " + igUID + "' onMouseOver=\"toggle_visibility('igImageHover" + i + "');\"/>\
<div class='igHover' id='igImageHover" + i + "' onMouseOut=\"toggle_visibility('igImageHover" + i + "');\">\
<div class='igHover2'>\
SMALL TEST!\
</div />\
</div>\
</div>\
");
} else {
console.log("Else portion of code ran " + elseCount + " time(s).");
++elseCount;
}
}
}
});
});
However, I am only able to display 27 images because there are 4 images not posted by that specific userID. Is there some way to force the for loop to not increment? Or to subtract 1 from i without sending the code into an infinite loop?
Here is the JSFiddle -- http://jsfiddle.net/UQcZP/
You could use a while loop:
var i = 0;
var used=0;
while (used<31)
{
if (i < data.data.length){
// .. Do your work here
// only increment used when you actually get a match
}
else
{
// Here we are past the end of the data and did not reach the 30 items,
// so just set the number of items to 31 to exit the loop.
used = 31;
}
i++;
}​

Elements added with appendTo() not immediately available

I'm having a problem with elements added with appendTo() not being immediately available in the DOM.
First, I'm reading some data from a JSON file and then appending some html to a div. Then I'm calling a random shuffler plugin to show one of the added divs at a time.
jsonUrl = "js/performers.json";
$.getJSON(jsonUrl, function(json) {
$.each(json.performers, function(i, performer) {
var html = '<div class="performer_mini">';
html += '<img src="' + performer.thumbnail + '" alt="' + performer.name + '" /><br />';
html += performer.name + '<br /></div>';
$(html).appendTo("div#performer_spotlight");
});
});
$("#performer_spotlight").randomShuffler(".performer_mini", 3000, 3000, 9000);
The random shuffler does the following:
(function($) {
$.fn.randomShuffler = function(shuffledElements, fadeInTime, fadeOutTime, timeout) {
fadeInTime = fadeInTime || 3000;
fadeOutTime = fadeOutTime || 3000;
timeout = timeout || 9000;
$(shuffledElements).hide();
var $old_element;
var $new_element;
var old_index = 0;
var new_index = 0;
function shuffleElement() {
$old_element = $new_element;
old_index = new_index;
while ($(shuffledElements).length > 0 && old_index == new_index) { // don't display the same element twice in a row
new_index = Math.floor(Math.random()*$(shuffledElements).length);
}
$new_element = $(shuffledElements + ":eq(" + new_index + ")");
if ($old_element != undefined) {
$old_element.fadeOut(fadeOutTime, function() {
$new_element.fadeIn(fadeInTime);
});
} else {
$new_element.fadeIn(fadeInTime);
}
setTimeout(shuffleElement, timeout);
}
$(this).show();
shuffleElement();
}
})(jQuery);
The first time the shuffleElement() function is called $(shuffledElements).length equals 0, so no element is displayed. On the next call to shuffleElement(), the elements added with appendTo() are available and one is selected at random as expected. Everything works correctly after that.
Is there some way to refresh the DOM or make these elements available to jQuery immediately after I add them with appendTo()? Any other suggestions for how to accomplish this?
When exactly do you call randomShuffler? You call this function after the AJAX-request succeeds? I have always believed that the element added by appendTo available immediately after the addition.
This code works very well for me:
<script language="javascript">
var test = "<div class=\"test\">1</div>";
$(test).appendTo("div#performer_spotlight");
$("div.test").html("<b>Hello</b>");
</script>
Yes, like #MeF Convi says you need to call the plugin only after the getJSON finishes:
$.getJSON(jsonUrl, function(json) {
$.each(json.performers, function(i, performer) {
var html = '<div class="performer_mini">';
html += '<img src="' + performer.thumbnail + '" alt="' + performer.name + '" /><br />';
html += performer.name + '<br /></div>';
$(html).appendTo("div#performer_spotlight");
});
$("#performer_spotlight").randomShuffler(".performer_mini", 3000, 3000, 9000);
});

Categories

Resources