I have been struggling to get Isotope to work. I have an application where after clicking a button I load some more images by getting their URLs from JSON. The issue I am having is that when I add the images to the 'galleryContainer' div (my div that I am holding all the images in) the images overlap. That or nothing happens and the whole page seems to freeze. Apparently this is a frequent problem but I still have not been able to get it working for my project. I try to use 'imagesLoaded' but it never seems to work for me.
Here is the relevant code:
// Get more images and add them to the galleryContainer
function getMoreImages() {
for (var i = 0; i < 3; i++) {
var newImage = $('<div class="objects"></div>');
var x = Math.floor((Math.random() * 750) + 750);
var y = Math.floor((Math.random() * 750) + 750);
newImage.append($('<img width="750" src="http://lorempixel.com/' + x + '/' + y + '">'));
$container.append(newImage).imagesLoaded(function() {
$container.isotope('appended', newImage);
});
}
}
Here is a (JSFiddle)[http://codepen.io/dirtshell/pen/emdjGv] demonstrating my problem.
It is totally possible that I am simply making a simple mistake JS wise (like not using the imagesLoaded plugin correctly), since I am sort of new to it.
Thanks =)
One issue is that your codepen is using isotope v2 but your js and CSS are for isotope v1.5.
You need imagesLoaded to prevent the overlap but it is not included as part of isotope v2 as it was in v1.5. You need to load it separately.
Is the getMoreImages() function what you are actually using on your site to load new images?
Also there is no longer "animationOptions" in isotope v2:
This
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
is now this:
transitionDuration: '0.4s'
and in v2, you can remove any v1.5 isotope CSS
ADDENDUM
Here is an update to you Codepen
here is the relevant code (altered):
var $container = $('.galleryContainer');
// Initialize isotope on window load and image load
$(window).load(function() {
$container.isotope({
itemSelector: '.objects',
masonry: {
columnWidth: 780
},
transitionData: '0.4s'
});
});
// Get more images and add them to the galleryContainer
$('.loadButton').on( 'click', function() {
var x = Math.floor((Math.random() * 750) + 750);
var y = Math.floor((Math.random() * 750) + 750);
for (var i = 0; i < 3; i++) {
var newImage = $('<div class="objects"><img width="750" src="http://lorempixel.com/' + x + '/' + y + '"></div>');
}
$container.append(newImage).imagesLoaded(function() {
$container.isotope('appended', newImage);
});
});
Related
I try to implement a javascript function that animate an image sequence while scrolling.
I try to create the animation with the script from this link: https://www.jqueryscript.net/animation/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer.html
My problem is that this script is already three years old and does not work with jQuery 3.2.1. But I have to use this much newer jQuery version.
The code of the script looks like this:
/**
* jQuery-Sequencer
* https://github.com/skruf/jQuery-sequencer
*
* Created by Thomas Låver
* http://www.laaver.com
*
* Version: 2.0.0
* Requires: jQuery 1.6+
*
*/
(function($) {
$.fn.sequencer = function(options, cb) {
var self = this,
paths = [],
load = 0,
sectionHeight,
windowHeight,
currentScroll,
percentageScroll,
index;
if(options.path.substr(-1) === "/") {
options.path = options.path.substr(0, options.path.length - 1)
}
for (var i = 0; i <= options.count; i++) {
paths.push(options.path + "/" + i + "." + options.ext);
}
$("<div class='jquery-sequencer-preload'></div>").appendTo("body").css("display", "none");
$(paths).each(function() {
$("<img>").attr("src", this).load(function() {
$(this).appendTo("div.jquery-sequencer-preload");
load++;
if (load === paths.length) {
cb();
}
});
});
$(window).scroll(function() {
sectionHeight = $(self).height();
windowHeight = $(this).height();
currentScroll = $(this).scrollTop();
percentageScroll = 100 * currentScroll / (sectionHeight - windowHeight);
index = Math.round(percentageScroll / 100 * options.count);
if(index < options.count) {
$("img.sequencer").attr("src", paths[index]);
}
});
return this;
};
}(jQuery));
So I already changed the line 37 from
$("<img>").attr("src", this).load(function() {
to
$("<img>").attr("src", this).on("load", function() {
With this change all my images are loaded but I still get the error message: Uncaught TypeError: cb is not a function
What do I have to change as well, so the script is working again?
Thanks for any tip.
cb() is a Callback function will be called once the preloader is done fetching images.
From the example you have linked to, the callback is:
function() {
$("div#preload").hide();
}
which quite simply hides the preloader message.
In context, the plugin is initialised as:
$("div#images").sequencer({
count: 128,
path: "./images",
ext: "jpg"
}, function() {
$("div#preload").hide();
});
As you have not supplied how you are calling this function, I suspect you are missing this function callback.
This is plugin's jquery code.in this code one image move in one scroll but my problem is i have to move 4 image one by one in one scroll in this sequencer.
and add specific time interval when one image move to another image please help me out of this problem.
Plugin Demo:https://www.jqueryscript.net/animation/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer.html
(function($) {
$.fn.sequencer = function(options, cb) {
var self = this,
paths = [],
load = 0,
sectionHeight,
windowHeight,
currentScroll,
percentageScroll,
index;
if(options.path.substr(-1) === "/") {
options.path = options.path.substr(0, options.path.length - 1)
}
for (var i = 0; i <= options.count; i++) {
paths.push(options.path + "/" + i + "." + options.ext);
}
$("<div class='jquery-sequencer-preload'></div>").appendTo("body").css("display", "none");
$(paths).each(function() {
$("<img>").attr("src", this).load(function() {
$(this).appendTo("div.jquery-sequencer-preload");
load++;
if (load === paths.length) {
cb();
}
});
});
$(window).scroll(function() {
sectionHeight = $(self).height();
windowHeight = $(this).height();
currentScroll = $(this).scrollTop();
percentageScroll = 100 * currentScroll / (sectionHeight - windowHeight);
index = Math.round(percentageScroll / 100 * options.count);
if(index < options.count) {
$("img.sequencer").attr("src", paths[index]);
}
});
return this;
};
}(jQuery));
I think what you want here is setInterval().
You can write a function to change the image which should be pretty simple, and call that function as a parameter in setInterval().
So something along the lines of this at the end of your code:
setInterval(changeImage, 60000);
//executes the changeImage() function every 60 seconds
You can read more about setInterval() here.
I hope that helps!
So I've been working on a slider and I don't really know how to make it repeat itself. So far I've only listed 10 slides but in the end I'll have around 20.
Here's a link to a JS fiddle so you can see what I've got so far:
https://jsfiddle.net/sth23e2w/
$(document).ready(function() {
//settings for slider
var width = 360;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $(".characters");
var $slideContainer = $(".slide-characters", $slider);
var $slides = $(".char-avatar", $slider);
$(".right-slide").click(function() {
$slideContainer.animate(
{ "margin-left": "+=" + width },
animationSpeed,
function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css("margin-left", 0);
}
}
);
});
$(".left-slide").click(function() {
$slideContainer.animate(
{ "margin-left": "-=" + width },
animationSpeed,
function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css("margin-left", 0);
}
}
);
});
});
Or if you really want you could check out the live version I've got over at Codepen: https://codepen.io/Crownedpride/project/editor/ZmbqRv/
If you want to know what it's going to be used for:
I'm currently writing a fantasy novel which I've got an artist drawing characters for. I want to display those characters on my own website via that setup I've made. There's roughly going to be 20 different characters that he'going to draw for me, although later there might be more depending if there'll be a Volume 2.
I'm looking forward to your replies.
ps: I'm really new to Jquery/js so please go easy on me >_<
I am trying to dynamically change the order of <tr> I am wanting to do it via translateY in the css but tables do not seem to support this css.
Is there a way I can rearrage the tr order using CSS, I know there is a javascript plugin called datatables but I do not want to implement that in this project, sure it is possible to change the visible order of <tr> only with CSS or javascript? but not plugin?
my current attempt is looking like this:
arrangeAll: function () {
var visible = [];
var invisible = [];
this.collection.each(function (project) {
if (project.get('visible'))
visible.push(project);
else
invisible.push(project);
}, this);
var barheight = $('tbody tr').height();
var totalHeight = visible.length * barheight;
$(visible).each(function (i, elt) {
// find the matching project line
var Ypos = i * barheight;
var $bar = $('tr[data-id="' + elt.id + '"]');
$bar.css({
'top': Ypos + 'px',
'opaticy': 1,
'display': 'block',
'position': 'absolute'
});
});
$(invisible).each(function (i, elt) {
// find the matching project line
var $bar = $('.li-project-ontimeline[data-id="' + elt.id + '"]');
$bar.css({
'opaticy': 0
});
});
},
I'm writing a rather complex AJAX driven menu with multiple levels that animate around allowing a user to navigate a complicated tree structure at some point I had to add a function that auto centers (vert and horz) the images associated with each item on the menu tree. In order to measure the images and position them accordingly I must first write them to a hidden div ("#tempHolder") once they .load() I can then get their dimensions, calculate my offsets and then write the images to the DOM in the appropriate place.
This all works A Okay in the standards compliant browsers but IE7-8 seem to only process the .load() command when they feel like it. (homepage the menu loads okay, first visit to a sub-page breaks the menu, refreshing said page fixes it again...etc.). I restructured my function to make the .load() declaration early because of the advice I read here (http://blog.stchur.com/2008/02/26/ie-quirk-with-onload-event-for-img-elements/) but that doesn't seem to have worked. I also added e.preventDefault because of a stackOverflow thread that said this might prevent IE from caching my load statements.
Here is the function causing the issues:
if (this.imagePath != "") {
runImage = function (imagePath, $itemEle) {
var $itemEleA = $itemEle.find('a');
var image = new Image();
//$thisImage = $(image);
$(image).load(function (e) {
//alert('image loaded')
$(image).evenIfHidden(function (element) {
//alert('even if hidden');
////////////console.log($thisImage);
var elementWidth = element.width();
var elementHeight = element.height();
this.imageHeight = elementHeight;
this.imageWidth = elementWidth;
//alert('widthoffset = ' + widthOffset + 'imagewidth = ' + imageWidth + 'this.imageWidth = ' + this.imageWidth + 'elementWidth = ' + elementWidth);
var imagePaddingWidth = 230 - imageWidth;
var widthOffset = imagePaddingWidth / 2;
widthOffset = widthOffset + "px";
element.css("left", widthOffset);
var imagePaddingHeight = 112 - imageHeight;
if (imagePaddingHeight < 0) {
var heightOffset = imagePaddingHeight;
heightOffset = heightOffset + "px";
element.css("top", heightOffset);
}
if (imagePaddingHeight > 0) {
var heightOffset = imagePaddingHeight - 18;
heightOffset = heightOffset + "px";
element.css("top", heightOffset);
}
});
$(this).appendTo($itemEleA);
e.preventDefault();
return image;
});
image.src = imagePath;
//var tempvar = $itemEle.find('a');
$(image).appendTo("#tempHolder");
}
this.image = runImage(this.imagePath, $itemEle);
}
Since this is for a big client and the site is not yet live I can't show the site but I'll try to throw up some screen shots later.
Any help is greatly appreciated.
It is quite a common problem, and if the images are already in the cache some browsers (shall I say directly - IE?) fails to trigger load events on them. Hence there is a technique for a workaround.
// After this line of your code
image.src = imagePath;
// put this
if (image.complete || image.naturalWidth > 0) { // if image already loaded
$(image).load(); // trigger event manually
}