How do these elements fade out on this site? - javascript

How do these sites implement fading effect?
Notice this site carefully:
http://blog.insicdesigns.com/2010/06/best-html5-media-player-implementations/
As you scroll down, you see a little fade effect for images/videos etc. It only happens once. Can anybody let me know how is this done?
Thanks.

Looks like this is done with jQuery and the lazyload jQuery plugin. The plugin is available here: http://www.appelsiini.net/projects/lazyload
It's very simple to use, you tag all the images you'd like to load with a class, like .lazy. Then you use this to "select" for those tagged images and the plugin does the heavy lifting. You have to include the jQuery library file and the plugin file with <script> tags, and then a simple script kicks it off:
jQuery(".lazy").lazyload({
placeholder : "http://mysite.com/placeholder.gif",
effect : "fadeIn"
});
This puts the placeholder image in until you scroll into view, and uses the fadeIn effect to display the image.

Looks like they are using jQuery LazyLoad plugin for this effect.

Related

WordPress Lazyloading images breaking Fancybox

I am using WordPress. Fancy box and a lazy loader plugin. However, since adding the lazy load plugin the fancy box has stopped working.
When you initiate the fancybox plugin, you do so with some javascript like so:
var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');
select.attr('rel', 'fancybox');
select.fancybox();
This fires with the rest of the javascript when the document has loaded.
However, now I am getting this error:
select.fancybox is not a function
I am assuming that the lazy loading plugin is taking the images out of the equation so this function isnt able to do anything.
I have tried attaching it again afterwards but I feel like I am going in the wrong direction:
$('html').on('mousemove', 'a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]', function(){
$(this).attr('rel', 'fancybox');
$(this).fancybox();
});
Any ideas?
WordPress now includes browser-level lazy-loading attribute for all images, using the 'loading' image attribute (loading="lazy"). Perhaps you no longer need the lazy loading plugin?
See here:
https://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/

Delaying the css animations with a preloader?

I currently have a website which uses Animate.css on the frontpage (https://daneden.github.io/animate.css/). How it currently works is that the animation kicks in as soon as the user opens the website, but this causes the animation to "lag". What I would like is to let it wait until the full page loads in before the css animations start to do their thing, thus making the experience much more fluid.
I've looked into several js based preloaders, tried some but it doesn't delay the css animations. As soon as the page is finished loading, the css animations have already been completed. Am I doing something wrong, or are JS preloaders not the right approach?
You would have to use javascript and/or jquery to dynamically add the css class that has the animation to the desired element after the page has been loaded. We can do this with the $document.ready event in jquery.
$(document).ready(function(){
$('css selector').addClass('class-that-has-animation-binding').
});
That is how he is doing it on the main site if you view is source code.
The above approach didn't work for me.
Since a good preloader will wait until ALL page elements, including images, have been displayed, I would wait until then....
$(window).load(function() {
$('css selector').addClass('class-that-has-animation-binding').
});

LazyLoading Images with Dynamic Tabs?

I'm trying to lazy load images with dynamic tabs. My code is basically this with images in the tab-content: w3school
And I'm using the lazyload library (I've tried others as well with no luck).
Anyways with that lazyload plugin, it will still load all the images (not lazy loading) in all the tab-panes but I only want the active tab-pane class to load when viewed and the none active tab-panes to not load until active in view.
$("img.lazy").lazyload({
skip_invisible : true
});
And it works, but only when a 1px+ scroll is triggered. Any ideas or workarounds? I'm trying a workaround to embed a listener for onclick of the nav-tabs, but it's not working because I think the tab-content hasn't updated before the scroll trigger is called. Or is there a better alternative than this for dynamic tabs?
Use lazysizes. This lazyloader automatically detects visibility changes to current and future img elements.
Simply include the script, add the class lazyload and use data-src instead of src.
I wouldn't use the lazysizes plugin, because it has hundreds lines of code only for image lazy loading. I think in your case you can use a micro plugin like justlazy. It is without jQuery, very lightweight and efficient.
First, you have to define you image placeholders (in this code example for tab number 1):
<span data-src="path/to/image1" data-alt="alt" data-title="title"
class="image-placeholder-tab-1">
</span>
<span data-src="path/to/image2" data-alt="alt2" data-title="title2"
class="image-placeholder-tab-1">
</span>
It's also possible to use an img-tag to be more SEO friendly. Then you have to set a low quality version of the image as value of the src-attribute. Another option is to use the srcset-attribute for responsive images (see demo).
The second step is to load the images when the the specific tab is opened. Therefore the library has a flexible way to load images via custom events.
To make it easy, just add the following code to your tab buttons:
// e.g. for tab 1
Justlazy.lazyLoad("image-placeholder-tab-1");

How to build People photo gallery with messy style / disorder style thumnail

I want to create a photo gallery like http://mormon.org/people/find/ . I want the messy style. could someone give me some idea any framework and plugin can do the job?
From that page source, it looks like the plugin they are using is Jquery GalleryView, Found here http://plugins.jquery.com/project/galleryview
http://mormon.org/bc/assets/scripts/galleryview/jquery.galleryview.js
I wouldn't normally link to their source, but the site linked to at Jquery seems to bee down form the moment

Call Image to Load Using Galleria Script

I'm using a jQuery gallery script called Galleria, in conjunction with a wordpress theme I'm working on. The problem (as you can see) is that no image loads right off the bat, as it should. Is there any sort of workaround you can think of, to force the image to be loaded into that ? Thanks!
Maybe you could trigger a "click" event on one of the thumbnail images that the plugin wraps itself around.
In the unordered list of the images you want to show, add the following to the opening li-tag of the image you want to load by default:
class="active"
Now that image will load off the bat.
Grtz,
Denios

Categories