We Keep Coding

how to make slideshow smooth - jQuery GSP

I have created a image slider, using the plugin Extra slideshow, this plugin is using Greensock and jQuery, but the problem is the sliding of the image is not smooth, if you notice, image is jerking while sliding.
Whats the expert suggestion here? how to avoid this jerk and make the slider super smooth, slideshow is going to be in full height/width screen .
Here is the JSFiddle demo
$(document).ready(function () {
// simple
$(".extra-slider").extraSlider({
draggable : false,
keyboard : true,
auto: 7,
speed: 5,
pagination: $(".slider-wrapper .pagination")
});
});

Some lazy load background images (b-lazy) not showing in slick carousel

I've been banging my head all long trying to solve this issue.
Basically I'm using Slick Carousel and Blazy lazy load together to display some background images in a carousel.
Now before you answer, I'm well aware Slick comes with lazy loading, but I've run in to problem using it with background images so I'm running with Blazy instead.
The problem
I can get slick and blazy working together https://jsfiddle.net/a4emf9qu/ , no worries, but when you drag (or click on the dot controls) to the third image (or beyond) the background images don't load unless you scroll or resize the window and I just don't know why.
Through some digging on the blazy website I see that this could be a solution but I'm unsure on how to implement it -
Either call revalidate which validates the document again or trigger the newly added item(s) with the .load() method:
var bLazy = new Blazy();
bLazy.functionName(); //bLazy.revalidate(); or bLazy.load(element);
Can anyone out there help me out?
$(document).ready(function(){
$('.slider').slick({
dots: true,
arrows: true,
infinite: false
});
});
;(function() {
// Initialize
var bLazy = new Blazy();
bLazy.revalidate();
})();

Turn's out it was a pretty simple fix. Just had to listen to the afterChange event and then fire bLazy.revalidate(); again. Example here - https://jsfiddle.net/a4emf9qu/1/
$(".hero-slick").slick({
dots: true,
arrows: false,
lazyLoad: 'ondemand',
// autoplay: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
// Init BLazy for lazy loading
// Initialize
var bLazy = new Blazy({
container: '.hero-slick' // Default is window
});
$('.hero-slick').on('afterChange', function(event, slick, direction){
bLazy.revalidate();
// left
});

Just got stuck there and found a cool solution with selector.
HTML
<ul class="slider">
<li class="slide-item">
<img class="b-lazy" data-src="image/imag.jpg">
</li>
</ul>
for Slick slider
var slider = $(".slider");
slider.slick({
lazyLoad: 'ondemand',
});
var bLazy = new Blazy({
selector: '.b-lazy',
});
slider.on('afterChange', bLazy.revalidate);
for owl carousel
var owl = $('.slider');
owl.owlCarousel({
autoplay: false,
});
owl.on('changed.owl.carousel', bLazy.revalidate);
check out the owl live

Spaces in Isotope Layout

We can't figure our why there are large extra spaces in the Work section layout. Can anyone help?
http://new-had.herrmanneasyeditdemo.com/#work

To fix the loading issue with your div's showing before your images, you need to load your images using imagesLoaded. This prevents just the div's from showing before isotope is called. Since you are using isotope v1.56, not v2, it is included in that version of isotope. Change your custom.js (at line 107) isotope call to this:
var $container = $('#portfolio-container');
$container.imagesLoaded( function(){
$container.isotope({
resizable: false,
itemSelector : ".item",
masonry : {
columnWidth : 1,
gutterWidth: 1,
}
});
});
To fix your layout issue is more complicated since I'm not sure you can fit all your images in a seamless grid using isotope v1.56 and masonry ( most often you need to rearrange them for sizes to fit without white space). You would need to update to isotope v2 and load the packery layout option after isotope and then set your code up as so, for them to fit together.
var $container = $('#portfolio-container');
$container.imagesLoaded( function(){
$container.isotope({
layoutMode: 'packery',
itemSelector: '.item'
});
});
You will also have to change line 349:
$(window).resize(function(){
$('#portfolio-container').isotope('layout');
});

Tumblr Masonry with PXU Photoset Issue

I have this issue with PXU Photoset Extended not loading properly when I use Masonry for my Tumblr Theme. I know what causes it, I just sadly have no clue how to fix it.
The only thing I found that reduced flickering while Masonry loaded, was to hide the container with CSS (display:none) and then unhide it when loading the Masonry script.
It seems this had the odd side-effect of the PXU Photoset script not rendering images properly (they're mostly cut off and they jump into their real size when resizing the window).
So I use this code to call Masonry, ImagesLoaded and Infinite Scroll:
$(document).ready(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.show();
$container.masonry({
itemSelector: 'article',
gutter: 50,
isFitWidth: true,
});
});
$container.infinitescroll({
navSelector : '#pagination-infinite', // selector for the paged navigation
nextSelector : '#pagination-infinite a.next', // selector for the NEXT link (to page 2)
itemSelector : 'article', // selector for all items you'll retrieve
animate: true,
extraScrollPx: 310,
bufferPx: 40,
loading: {
msgText: '',
finishedMsg: '',
img: 'http://static.tumblr.com/amhdmud/iMBn235bd/1x1.png'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$container.masonry( 'appended', $newElems, true );
});
});
});
And then PXU Photoset Extended:
$(document).ready(function() {
$('.photo-slideshow').pxuPhotoset({
'rounded' : 'false', // corners, all or false
}, function() {
// Callback
});
});
The only thing that made the photosets display right involved removing the display: none; from the container, but then Masonry flickered out of the container on page load again, which I seem unable to fix any other way.
Any help is much appreciated,
Thank you.

The PXU Photoset plugin requires that photosets on the page be visible so that it can calculate the available area. Instead of using display: none; on the container try using visibility: hidden; and then change it to visibility: visible; after Masonry has finished.
Also, you'll want to make sure the Photoset plugin is running before Masonry makes its first pass over your theme.

Center/Crop Images - Responsive Slideshow using Cycle2 plugin

I'm working on a solution to crop and center images in a cycle2 slideshow.
I'm resizing and centering the image in the slideshow to the parent using this plugin.
Problem I'm having is that I'm centring the image after it transitions, but this causes each slide to 'jump' into place. I can't seem to find a way to center all images on slide init, and resize.
function cropSlideImage() {
$('.cycle-slideshow img').resizeToParent({parent: '.slide'});
}
$( document ).ready(function() {
cropSlideImage();
$( '.cycle-slideshow' ).on( 'cycle-update-view', function( event, optionHash, slideOptionsHash, currentSlideEl ) {
cropSlideImage();
});
});
http://jsfiddle.net/mwHk4/1/

The resizeToParent plugin will not work if the image parents are set to display:none. Because the resizeToParent plugin waits for images to be cached it will not run until after most of the slides are already set to display:none.
Initiate the slideshow programmatically using $('.slideshow').cycle() after running resizeToParent and everything seems to work as desired.
function cropSlideImage() {
$('.slideshow img').resizeToParent();
}
$(document).ready(function() {
cropSlideImage();
$('.slideshow').cycle();
});
Fiddle!