Create grid of image - javascript

Here I have to implement a webpage
which has a grid that display images. It will be easy if all the images have the ideal width and height, so I can arrange these images to fit the grid. However, with images of various sizes, I hasn't found solution yet. So, anyone has any idea or know some library/tool that can
flexibly create the image grid like that ?
Thankyou !

I reckon this is what you are looking for: http://masonry.desandro.com/ . JS library that allows to do exactly what you want.

If you're using jQuery I would recommend using Masonry, it's also built into core wordpress if you're using that too.
Here's an example of using it.
function masonry_shiz(){
$('#gal1').masonry({
singleMode: true,
"gutter": 0,
isFitWidth: true,
isAnimated: true
}).imagesLoaded(function() {
$('#gal1').masonry('reloadItems');
});
$(window).load(function() {
$(".masonry-brick").each(function(i) {
$(this).delay((i + 1) * 50).fadeIn();
});
});
}masonry_shiz
Here's a link to the plugin

Try using jQuery plugin called Freewall. It is available at http://vnjs.net/www/project/freewall/
Check this demo for the same plugin (same as your requirement):
http://vnjs.net/www/project/freewall/example/image-layout.html

check out these links:
stackoverflow-question
jquery-plugin
another-alternative
and this article here.Hope it helps

If your design is not supposed to change, you can use a CSS framework to build such a page.
A famous one is Bootstrap, which allows you to order <div> tags in a grid, using rows and columns. This is responsive as well, meaning the result is auto-adapted to large screens as well as phones and tablets.
You can use other frameworks such as elasticss, Knacss, Blueprint.

Related

With Fullpage.js, can y-position inside sections be reported during scrollOverflow scrolling? (using iscroll-probe)

I'm using the latest version of fullpage.js with the scrollOverflow option set to true. Like this example...
http://alvarotrigo.com/fullPage/examples/scrolling.html
Fullpage.js uses iscroll.js for this option, and I have included the "probe" version of iscroll. Like this example...
http://lab.cubiq.org/iscroll5/demos/probe/
Can iscroll-probe report the y position of whichever fullpage "section" is currently being scrolled?
It is indeed possible. Although the iScroll library has some bugs that were solved for its use in fullpage.js with the scrolloverflow.js fork. I would suggest you to do those changes yourself in the iScroll Probe.
Regarding how to get the scrolling possition, just take a look at the source example you provided to know which iscroll events to use.
Then, just take the iscroll instance of the section that can be extracted with:
$('.fp-section.active').find('.fp-scrollable').data('iscrollInstance');
Or from the active slide:
$('.fp-section.active').find('.fp-slide.active').find('.fp-scrollable').data('iscrollInstance');
And use the iScroll option probeType:3 as detailed in their docs. To do so extend the default scrolloverflow options with the scrollOverflowOptions param.
And mixing all together...
Reproduction online
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
scrollOverflow:true,
scrollOverflowOptions: {
probeType: 3
},
afterLoad: function(anchorLink, index){
var iscroll = $('.fp-section.active').find('.fp-scrollable').data('iscrollInstance');
if(iscroll && typeof iscroll !== undefined){
iscroll.on('scroll', getScroll);
}
}
});
function getScroll(){
console.log(this.y);
$('#position').text(this.y);
}
I believe it is impossible, because both plugins will try to work with the same 'element', at the same time, and in ways different. So, it'll conflict each others, of course. I'm sorry, but try another way. :/

Angular.js data-bind background images using media queries

I have an Angular.js application with dynamically background images (should have data-binding for their URL). I also want to use css media queries in order to detect orientation/pixel density etc.
The only solution I found is using javascript to add URL to the background image, something like this:
myDiv.css({'background' : 'url('+ scope.objectData.poster +') no-repeat', 'background-size':'auto 100%'});
This way I have to pass all media queries logic to javascript, something like this. (My intention is to be able to serve different background image for each screen resolution / pixel density / orientation)
I am looking for a cleaner solution to use css media queries and still be able to data-bind my image sources.
tnx!
Yaniv
This is just a starting point solving your problem.
You may use matchMedia: https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
if (window.matchMedia("(min-width: 400px)").matches) {
$scope.poster = 'small.png';
} else {
$scope.poster = 'big.png';
}
now you can use it in the html file:
<div class="moments-preview-image"
ng-style="{'background-image': 'url('+poster+ ')'}"> ... </div>
If your browser doesn't support this new API you may have a look on some interesting workarounds:
http://wicky.nillia.ms/enquire.js/
http://davidwalsh.name/device-state-detection-css-media-queries-javascript

Moving content blocks using javascript for responsive design

I'm working on a highly responsive website at the moment and I hit 2 areas where certain blocks of content need to move to others areas of the site. It would not be possible to do so purely with CSS. I suppose I could relatively reposition the blocks but as the dimensions change this isn;t really possible.
The option I am thinking of is, when a media query gets triggered, to then pull a block out of the page and append it in elsewhere where I need it.
I realise this is not ideal bit what I am wanting to ask is if this is a reasonable thing to so.
I know some of you may say reorder some of the markup but that is not possible. As stated above, I know falling back to javascript is not ideal but it would suit this and I don't particularly wish to duplicate content just so I can avoid the use of javascript.
Flexbox would be perfect but support is not where I want it to be currently for me to use that.
What do people here think? Any other solutions?
The right way is to listen to media queries using MediaQueryList:
var mql = window.matchMedia("(max-width: 320px)");
mql.addListener(function(event) {
if(event.matches) {
// Window width is less than or equal to 320, do something cool.
} else {
// Window width is more than 320, do something else.
}
});
The events will trigger when the query is either met or 'unmet'.
Alternatively, you can listen to a resize event, but note your function will get triggered for every new dimension. (Assuming jQuery in the code below.)
$(window).resize(function() {
if($(window).width() <= 320) {
// Window width is less than or equal to 320, do something cool.
} else {
// Window width is more than 320, do something else.
}
});
Like you said yourself though, using JS to make your layout responsive is generally NOT advisable. You can never assume all your users have JS enabled and all goes well.
I would rather see you solve this by restructuring your HTML and CSS. If the content layout has to change a lot, try outputting a block of content in two different places in your HTML and toggling visibility with CSS media queries (setting one to display:none; and the other to display:block;). You should be able to solve most responsive layout issues by rethinking your website structure.
Others looking for a solution may be interested in the Bootstrap Toolkit JS library available here: https://github.com/maciej-gurban/responsive-bootstrap-toolkit
Responsive Bootstrap Toolkit provides an easy way of breakpoint
detection in JavaScript, detecting changes in currently active
breakpoint, as well as executing any breakpoint-specific JavaScript
code.
The SASS module enables quick and simple styling for elements needing
different property values for each screen resolution.
Then you can do things like:
(function($, document, window, viewport){
// Listen to resize event
$(window).bind('resize', function() {
// Default 300ms poll delay
viewport.changed(function() {
// Debug
console.log( 'Current breakpoint: '+ viewport.current() );
// Trigger custom event
$('body').trigger('viewportChanged', [viewport.current()]);
}, 300)
});
// Register event listener
$(document).on('viewportChanged', 'body', function(event, current) {
console.log('Current breakpoint: '+ current);
}
})(jQuery, document, window, ResponsiveBootstrapToolkit);
You could check out some of the already available responsive design HTML boilerplates like Twitter Bootstrap or Zurb Foundation. Maybe their existing configurations satisfy your need.
I have a similar problem on two websites and i do:
JavaScript/jQuery with the window re size event and have breakpoints in JavaScript to. I then remove the item and append/prepend it where i want it to be.
On my other website i use Twitter Bootstrap which is very responsive and looks nice.
I would personally go with Twitter Bootstrap as its a nice grid system. If your site is very complex and cant be done using Twitter Bootstrap them capturing the window re size event is the best way.
$(window).resize(function() {
//Use $(window).width() and maybe some ifs/a switch to handle break points
if($(window).width()<700){
//Move it here
}
});
With CSS and JS it can be done :) You can clone the content to another section with jquery (append), then using media queries you can control what shows.
Here is what I do:
I do the appendTo:
$( $('.goto').html() ).appendTo('.mobile')
Here's an example I did:
http://jsfiddle.net/Riskbreaker/vkfWd/
This might not be what you are looking for (since its really not moving it but cloning the content )but this is the way I do it.

CSS3 Animation in IE8/9

I understand that CSS3 animations do not work in IE. I was just wondering if there is a JavaScript workaround for this problem.
Here's a link to what I want to recreate in IE: http://animation.kashoo.co.uk/
Any advice would be great.
After a quick Google search I found a jQuery plugin that changes jQuery's standard $.animate() function so that it will use CSS3 transitions whenever possible:
$.animate-enhanced
edit:
After trying the above plugin on a site of mine, the site broke. I'm not sure if you will have the same problem or not, but here is my workaround:
You will need Modernizr.js
Basically, you check (with Modernizr) whether the browser supports a given feature, and then decide whether to animate with CSS3 or Javascript.
For example:
(Let's say you are animation an object to move to the right by 200px)
if(Modernizr.csstransitions) {
// use your appropriate browser prefixes
yourDomObject.style.transition = 'left 2s';
yourDomObject.style.left = parseInt(yourDomObject.style.left) + 200 + 'px'
} else {
var left = parseInt($(yourDomObject).css('left')) + 200 + 'px';
$(yourDomObject).animate({
'left' : left
},2000,'easeOutExpo');
}
Check out jQuery's animate functions:
http://api.jquery.com/animate/
There are many JQuery plugins that provide animations. Here's one that has a flip effect similar to the one you are looking for. http://lab.smashup.it/flip/

jQuery cycle plugin paging + CSS3PIE

I am using the jQuery cycle plugin for a slideshow of images. With rounded bullets as pagers (because it's all the rage now so it seems). This worked perfectly in the 'modern' browsers except for IE. It is messing up the activePagerClass on the pagers.
Because IE can't do border-radius, I use the CSS3PIE behavior.
Changing
$.fn.cycle.updateActivePagerLink = function(pager,currSlide,clsName){
$(pager).each(function(){
$(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);
});
);
in the jQuery source code to
$.fn.cycle.updateActivePagerLink = function(pager,currSlide,clsName){
$(pager).each(function(){
$('a',this).removeClass(clsName).eq(currSlide).addClass(clsName);
});
);
fixed it.
So it seems there is an issue with the children() function and the use of CSS3PIE. I'm not a fan of the behavior property and I would rather not use it, but the client wants rounded bullets in IE...
So I hope it helps somebody.

Categories