Center/Crop Images - Responsive Slideshow using Cycle2 plugin - javascript

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!

Related

BxSlider disable autoplay on certain width

Not sure if I'm blind or there isnt one. I want to stop bxSlider autoplay on certain width? Simple as that
Normally, you initiate bxSlider like so...
$(document).ready(function(){
$('.bxslider').bxSlider();
});
Before initiation, you could check the width first using window.innerWidth, e.g.
$(document).ready(function(){
if (window.innerWidth >320) {
$('.bxslider').bxSlider();
}
});
If you need to do this as well after initial loading of the page (i.e. rotating device) then you can destroy the slider like so:
slider = $('.bxslider').bxSlider();
slider.destroySlider();
If you need to do this after initial load, you'll need some way of detecting when to destroy the slider. jQuery has a method to check for this (orientationchange) which you can read here: https://api.jquerymobile.com/orientationchange/

Using Owl Carousel and Wow.js

Owl Carousel: http://www.owlcarousel.owlgraphic.com/
Wow.js: http://mynameismatthieu.com/WOW/
I am using Owl Carousel and Wow.js
I am trying to create a slideshow where the contents of each slide animates when the slide is active. Currently, the animations for all content occurs even if the slide it is contained within is offscreen. Wow.js only seems to be able to recognize is the slideshow itself is visible and actives all animations
Is there a way I can change it so the animation occurs on the content only when its containing slide is visible on the screen?
mwdigian is right
I have same problem
I did next:
<script>
var $owl = $('.test-carousel');
$owl.owlCarousel();
//here we need hide because method show() doesn't work with css visible
$( ".active .item h2" ).hide();
//all other is the same
$owl.on('translated.owl.carousel',
function( event ) {
$( ".active .item h2" ).addClass( "animated bounceInDown" );
$(".active .item h2").show(); });
</script>

Why doesn't Lazyload show pictures?

I tried all the solution given on stackoverflow.
Jquery LazyLoad.js Issue with Loading after Window Resize
Lazy Load won't load visible images
jQuery LazyLoad do not load images until scroll
LazyLoad images not appearing until after a scroll
Add a width height in css
Add a width height in HTML
$(window).resize();
.trigger("lazyload");
skip_invisible:true
failure_limit : 1000
I also tried an alternative http://luis-almeida.github.io/unveil/
But the problem still the same. Unless I resize the window, (or $(window).resize(); in the console) picture don't show.
However, if I put a threshold of 300, the pictures in the 300 first pixels will appear, not the others...
The most strange is that the problem is the same for the 2 plugins.
Any suggestion?
This is an issue because your content, which contains the images, is loaded after the lazyload
Try calling lazyload in setInterval function or at the end of window.load.
var interval = setInterval(function(){
$("img.lazy").lazyload();
clearInterval(interval);
},1000);

Implementing Jquery Isotope on images added dynamically

I am trying to write a module for Drupal which would have the functionality to handle images using isotope. What I am trying to do is taking an input link from user, then loading that image in #content-images div. I am facing problems in implementing isotope plugin on those images.
Here is the jsfiddle: http://jsfiddle.net/xu4k7/1/ for my code.
When I change the above code to the following code, images do not show up.
(function ($) {
$(document).ready(function () {
$("#input-box-to-obtain-image-links").change(function() {
var value = $(this).val();
$('#content-images').append('<div class="image"><img class="isotope-images" src="'+value+'"></div>');
});
$('#content-images').isotope({
itemSelector: '.image'
});
});
})(jQuery);
I just want to know how can I implement isotope on those images so that when I resize my browser, images align themselves.
Thanks
Your isotope wrapper has a 0px height, that's why images are not visible. Maybe isotope init is done too early, so it can't compute its wrapper height ? See
Isotope jquery plugin doesn't show properly on chrome
or
Isotope intermittently returns 0px height on div
(first link really seems to be your solution : put isotope init in a callback fired after the actual DOM update)

Delay jQuery animation until the background image is displayed by Supersized plugin

People asked similar questions before, but mine is with a twist:
I'm using Supersized jQuery plugin to load a single full-screen background image. The code loading the image is this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$.supersized({
//Background image
slides : [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]
});
$('#content').delay(3500).fadeIn(600);
});
</script>
As you can see in the code, I chained the fadeIn effect after the "supersized" function. I want to fade in the #content div after the background image (bg.jpg) not just finished loading but also finished fading in. I used the solution I don't particularly like: setting a long delay before my fadeIn effect.
What would be the best way to fade in the content div after Supersized image finihsed fading in?
Would be grateful for your help!
If anyone is still looking for a solution, here's what I did:
Supersized.3.2.7.js
Right after the img.load function, within the base._start function, I added the following:
img.fadeOut();
img.bind("load", function () { $(this).fadeIn(750); });
Found my own answer:
the solution is to edit the supersized core js file. In the file, after this bit of code:
$('#supersized-loader').hide(); //Hide loading animation
element.fadeIn('fast'); //Fade in background
resizenow();
I added my own line:
$('#content').delay('fast').fadeIn('fast');
Worked like magic!
Have you tried using the jQuery .ready() function?
jQuery(document).ready(function($) {
$.supersized({
//Background image
slides : [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]
});
$.supersized.ready( function() {
$('#content').fadeIn(600);
});
});

Categories