I have used masonry in my website but it is initialized by HTML. No JS is used. The code:
<div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item" }'>
I have images in masonry blocks. That is why grid does not set itself as required. Any method to call imagesLoaded function in HTML not in JS? I don't know the simplest way I can explain that to you guys. No example provided in Desandro's website.
Related
Creating a slideshow using Galleria.io APIs.
Galleria's DIV tag in my HTML page looks like :
<div class="content">
<div id="galleria">
<!-- I have used Javascript to input values in this DIV tag -->
</div>
<div id="full" style="float: right">
<!-- DIV tag for fullscreen and auto slideshow play-->
<button>full screen</button>
<button>play slideshow</button>
</div>
</div>
I have used the classic theme provided in the downloads of Galleria.io, and which has below script to call the contents in the DIV tag ("id = galleria").
<script>
$(function () {
Galleria.run('#galleria');
});
</script>
I have referrer the official documentation of Galleria for enabling fullscreen and auto slideshow.
But these documents only provide the method names, and not the example of implementing those methods. Can someone please guide how to implement these methods in script tag ?
Also, I have gone through the discussion about auto-resize in galleria
and tried to implement but having issues.
So I found the answers, and posting it as a reference in Galleria.io customization.
Everything will be the same, Galleria has parameters for different functionalities, that we have to call. For the functionality of auto slideshow, i edited the same script in the question this way.
<script>
$(function () {
Galleria.run('#galleria', {
autoplay: 3000,
transition: 'flash',
transitionSpeed: 600,
});
});
</script>
I have a template popup being loaded in via a controller function. Is there a way I can fade in the template. I have tried adding a separate class, hooking it to the ng-show class.
HTML:
<div class="contact-form">
<div ng-include="contactTemplate" class="fade"></div>
</div>
JS:
$scope.contactForm = function() {
$scope.contactTemplate = 'sections/popups/contact.html';
};
You could use ngAnimate and add simple css animations (there are a lot of good tutorials out there).
The available animations can be found in the ngInclude docs at "Animations".
PS: To nicely format code blocks insert a linebreak and indent code by four spaces
The scenario
The site is built with Bootstrap, and has several div's (or columns) with a variation in height.
My HTML basically looks like this:
<div class="container">
<div id="masonry-container" class="row">
<div class="item col-lg-3 col-md-4 col-sm-3 col-xs-12">
<!-- Text and so on -->
</div>
</div>
</div>
The problem
The problem is that Bootstrap does not work very well with columns when they have different heights. This is a common problem, please see example below, or visit my page.
What I am working on
I am trying to include Masonry with Bootstrap so that the columns are correctly aligned when the heights are different. The columns from the example above would then look like this:
However, I can't get it to work correctly. I am not sure if I am doing something wrong, or if I have missed something.
I am using the Masonry min (here)
I have tried loading it with functions.php by the following:
//Isotope and masonry
function add_isotope() {
wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'), true );
wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'), true );
wp_enqueue_script( 'masonry_js', 'http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js', array('jquery'), true );
wp_enqueue_script('isotope-init');
}
add_action( 'wp_enqueue_scripts', 'add_isotope' );
I have also tried to include it the regular way in header.php:
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/masonry.pkgd.min.js"></script>
However, nothing seems to work.
Could you please provide a working solution?
The page can be found here.
I don't think you're calling $.masonry(). I looked up the source code, nothing seemed to bind #masonry-container. So, add this snippet to your pages' footer.
$('#masonry-container').masonry({
itemSelector: '.item' // div.item
});
And because you're working with a responsive layout here, you should use reload method like below
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true // the animated makes the process smooth
});
$(window).resize(function() {
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true
}, 'reload');
});
I am currently using the below code to load the jQuery masonry after all the images have loaded. It works great and as it should. However, if I am loading a large number of images it takes some time to show the masonry. I have tried multiple method to display a sort of loading image to show that the page is actually loading and is not just stagnant with no success. If anyone could please point me in the proper direction as to how to maybe use an if statement to check if the images are loaded. While they are not I would like to display the loading gif. Once they do load I would like to have the masonry appear.
var $container = $('#freewall').imagesLoaded( function() {
$container.isotope({
});
});
Sorry to over complicate a simple issue. But I greatly appreciate any help that I can get!
I would recommend to show each image individually as soon as it loads, instead of waiting for the complete set of images
in other words, your HTML would be something like this:
<div class="grid">
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
</div>
then with CSS hide your images, with something like this:
.item img {
display: none;
}
next initialize the grid with isotope:
$('.grid').isotope({
itemSelector: '.item',
percentPosition: true,
});
and finally show the images that are getting loaded individually with the help of imagesLoaded, like this:
$('.grid').imagesLoadedMB().progress( function(instance, imageObj) {
$(imageObj.img).fadeIn(300);
$('.grid').isotope('layout');
});
I personally I would prefer to use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 which already deals with all of this for me
bootstrap popover currrently expects this:
hover for popover
$("#example").popover({placement:'bottom'});
..expects you to define data-content in template or dynamically pass it in jquery.
Is there anyway it can support format like below:
..the point being able to define content/title in blocks
<div id="example">
<div class="original-title">
Twitter Bootstrap Popover
</div>
<div class="data-content">
It's so simple to create a tooltop for my website!
</div>
<a>hover for popover</a>
<div>
$("#example").popover({placement:'bottom'})
Currently, no, since the popover script is basically extending the functionally of the tooltip script, but nothing is impossible. You can modify the script and add custom data-attributes to support your markup yourself, but then when updates come around you will have to do it again if you want to support your edits, or not update at all.
I think that can be possible using a javascript code to give the content of this divs to the elements but is not recommended.
$("a").attr("data-title",$(".data-title").html()).attr(".data-content",$(".data-content").html());
$('a').popover({placement:'bottom'})