We Keep Coding

Preload images with Justified Gallery

I am using Justified-Gallery
to layout my gallery thumbnails. I want to implement a preloader so the images only show once they have been formatted by Justified-Gallery.
I saw this option in the plugin but I couldn't get it to work, waitThumbnailsLoad.
Currently I am hiding the div containing the thumbnails, and then showing it once the plugin has completed. Is this the best way or is there a better way to do this?
HTML
<div id="justify-gallery" class="hidden">
// thumbnails go here
</div>
JS
// Justify Gallery
$("#justify-gallery").justifiedGallery({
rowHeight: 100,
fixedHeight: true,
captions: false,
margins: 3,
lastRow: 'nojustify'
});
$('#justify-gallery').justifiedGallery().on('jg.complete', function (e) {
$(this).fadeIn();
});

Yes you're in the right track, if your current code sort of works, then you can add a parent container to the hidden class, and add a loading animation to it, then use css to position absolute the images or hide the loader, up to you.
<div class="parent-with-loading-animation">
<div class="loading-animation"></div>
<div id="justify-gallery" class="hidden">
// thumbnails go here
</div>
</div>
Just give the parent div a min-height of whatever you reckon would be the average height of images and a width 100% depending on your layout of course.
$('#justify-gallery').justifiedGallery().on('jg.complete', function (e) {
$('.loading-animation').fadeOut();
$(this).fadeIn();
});

Oh boy, on a second visit to the site I found an article on performance; where it states if you add a class of .justified-gallery it will only show the thumbnails once loaded. In all fairness this vital info should have been put in a more prominent spot.
http://miromannino.github.io/Justified-Gallery/performance-tips/

Image crop and rotate for multiple images using dark room js

i used darkroom.js for cropping and rotating images in client side. Its working fine for single image but i want it for multiple images. Can anybody help on this issue or any other reference js for this purpose.
var dkrm = new Darkroom('#target', {
// Size options
minWidth: 100,
minHeight: 100,
maxWidth: 600,
maxHeight: 500,
ratio: 4/3,
backgroundColor: '#000',
// Plugins options
plugins: {
//save: false,
crop: {
quickCropKey: 67, //key "c"
//minHeight: 50,
//minWidth: 50,
//ratio: 4/3
}
},
// Post initialize script
initialize: function() {
var cropPlugin = this.plugins['crop'];
// cropPlugin.selectZone(170, 25, 300, 300);
cropPlugin.requireFocus();
}
});
Here is the html
<div class="figure-wrapper">
<figure class="image-container target">
<img src="./images/domokun-big.jpg" alt="DomoKun" class="edit-img" id="target">
</figure>
</div>
<div class="figure-wrapper">
<figure class="image-container target">
<img src="./images/domokun-big.jpg" alt="DomoKun" class="edit-img" id="target">
</figure>
</div>
I also changed the id="target" to class="target" but its not working for multiple
Extensions url

This is not actually the answer for your question, but some kind of result of my little research on the theme.
First of all, I could not make Darkroom work with class attribute of images. There was js-mistake - it seems that Darkroom makes http-request with given selector (id in examples) to get the dom-element. If you give to him the current element from class from Jquery selection, it would not work.
I've made a little hack to deal with this situation. You can see it in this repo (made from standard Darkroom demo): https://github.com/renta/darkroomtest
As you can see, there are some troubles with this decision. It looks like a dirty hack and user changed his mind about the image editing - he could close Darkroom panel after clicking on its saving button.
Also I got a second way for solving this task. If anyone interested in it, I could put the code in public repo.
The keynote there:
you have a gallery with several images;
after click on current image there is an opening modal window with this image or its original (if image is the preview). For modal window I use this library https://github.com/samdark/the-modal (not the advertisement :) ). It has ability to make custom function on opening the modal window, where I can place the image and initiate the Darkroom lib on it.
you save the image with Darkroom and close the modal window. After that you can easily update the image in the gallery, so user could see the result after closing the modal.
This variant is workable and has no problems of mass-editing approach.
Hope, that this answer will help someone.

Masonry & LazyLoad doesn't want to work together

I am setting up a site for a photographer. It should be built using the Bootstrap 3 framework, and he wants to have a masonry with over 400 images on one page. For this to work LazyLoad is a must. I have now spent several days trying to get LazyLoad to work with Desandros Masonry but with no success..
I've tried all of the examples that one finds googling, but most posts/sites/forums just redirects you, or have copied this stackoverflow answer:
Combining LazyLoad and Jquery Masonry
I've tried both methods but unfortunately I get nothing but grey hair..... :(
Here is a simplified live version of the page im working on:
http://nr.x10.mx
In this example I have added a fade-in on page-load, but left the LazyLoad out since I can get it to work.
And here you have a FIDDLE of the following
var container = document.querySelector('#ms-container');
imagesLoaded( container, function()
{
var msnry = new Masonry(container,
{ itemSelector: '.ms-item',
columnWidth: '.ms-item',});
});
You can also download the whole pack here, including the jquery.lazyload.js HERE
Any help would be highly appreciated
UPDATE
Here you can have 4 different examples of the different problems that occur.
I also found to my joy that the Bootstrap .img-responsive class is interfering with LazyLoad.
1 - Masonry without LazyLoad
2 - Masonry and Lazyload - Masonry breaks down and LazyLoad has no effect
3 - LazyLoad without Masonry - LazyLoad has no effect
4 - LazyLoad without Masonry and Bootsrap "img-responsive" removed
5 - Masonry & LazyLoad using first method of SO answer mentioned above
6 - Masonry & LazyLoad using second method of SO answer mentioned above Both of the last ones gives the following error: [Error] TypeError: 'undefined' is not a function (evaluating '$container.imagesLoaded')
global code (5.html, line 110)
Updated zip HERE
Again, any asisstance would be highly appreciated, thank you

I made your 5.html work by using the javascript files of the fiddle present on the SO link you posted, answered by Nathan Do. So you probably just had bad versions of the scripts.
The scripts linked on that page are: http://cdn.jsdelivr.net/masonry/2.1.08/jquery.masonry.min.js and http://cdn.jsdelivr.net/jquery.lazyload/1.8.4/jquery.lazyload.js
Here's your original fiddle updated with that page's method: http://jsfiddle.net/L9RLe/

In your case, though you are creating masonry and adding lazyload effect, the images get overlapped.
You need to follow steps as :
Create Dynamic HTML structure for images along with their respective aspect ratio height and width. Note: images should have the required attributes for applying lazy load effect i.e. class="lazy" data-original="actual image url" and src="dummy imageurl".
Apply lazy load effect.
Then create Masonry.
Lets have an example :
Suppose I am having a javascript array with some image related data as,
var gallery_itemList= [
{url: "images/example1.jpg", width:"1170", height:"460"},
{url: "images/example2.jpg", width:"800", height:"320"},
{url: "images/example3.jpg", width:"1200", height:"870"}];
And below prototype for creating dynamic html, applying lazyload effect and creating Masonry effect as :
var masonryGallery = {
gallery :'', // gallery to create
genarateGallery : function() {
// generate each item html
var inHTML="", i;
for(i=0;i<gallery_itemList.length;i++){
var iWidth, iHeight, fHeight=0;
iWidth=parseInt(gallery_itemList[i].width);
iHeight=parseInt(gallery_itemList[i].height);
fHeight = Math.round((iHeight*300)/iWidth);
inHTML+='<div class="item" style="height:'+fHeight+'px">';
inHTML+='<img class="lazy" src="images/loading.gif" data-original="'+gallery_itemList[i].url+'"/>';
inHTML+='</div>';
}
//add generated html to gallery
$(masonryGallery.gallery).append(inHTML);
},
applyLazyload : function(){
$("img.lazy").lazyload();
},
createMasonry : function(){
// create Masonry
$(masonryGallery.gallery).masonry({
columnWidth: 350,
itemSelector: '.item',
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
}).imagesLoaded(function() {
$(this).masonry('reload');
});
},
init : function(givenGallery) {
masonryGallery.gallery = givenGallery; // set gallery
masonryGallery.genarateGallery(); // generate gallery html
masonryGallery.applyLazyload(); // apply lazyload effect
masonryGallery.createMasonry(); // apply masonry effect
}
};
/* Gallery Intialisation */
(function(){masonryGallery.init('div#content');})();

If you have the problem images get overlapped, I found the solution at the site below, although it is in Japanese.
http://www.webdesignleaves.com/wp/jquery/1340/
The point is use following;
$('img.lazy').load(function(){ ... })
HTML
<div id="works_list">
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt="">
<p>title 1</p>
</div><!-- end of .work_item-->
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt="">
<p>title 2</p>
</div><!-- end of .work_item-->
....
</div><!-- end of #works_list -->
jQuery
$("img.lazy").lazyload({
effect: 'fadeIn',
effectspeed: 1000,
threshold: 200
});
$('img.lazy').load(function() {
masonry_update();
});
function masonry_update() {
var $works_list = $('#works_list');
$works_list.imagesLoaded(function(){
$works_list.masonry({
itemSelector: '.work_item',　
isFitWidth: true,　
columnWidth: 160
});
});
}

Just want to contribute my solution to this thorny problem.
Basically you need to call masonry's layout() function every time an image is lazyloaded, because that's when you know what it's dimensions are going to be. So you setup lazyload's load() function to call masonry.layout(). This can cause a new problem, because on your initial page load, all of your images will have a zero or near-zero height (depending on your css), and thus stack up in the top of the viewport. When you initialize lazyload, it will see all these images in the viewport, and try to load them all at once. This causes you to download tons of images, and even worse, calls masonry dozens or hundreds of times. Not very speedy.
My solution is to force a minimum height on unloaded images until they are lazyloaded. This restricts the number of images that will be found in the viewport initially, limiting the number of lazyload and masonry calls to a reasonable amount.
Once an image is loaded, you remove the .unloaded class in order to deconstrict the height and allow it to conform to the height of the image.
HTML
<div id="masonry-container">
<div class="masonry-item unloaded"><img class="lazy" data-original="image.jpg"></div>
<!-- Repeat as needed -->
</div>
CSS
.masonry-item {
width: 33.3%; // I'm doing a 3-column masonry layout
}
.unloaded {
min-height: 200px;
// set a minimum default height for image containers
// this prevents too many images from appearing in the viewport
// thus causing lazy load to load too many images at once
// we will use the lazyload .load() callback to remove this fixed
}
JS
$( document ).ready(function() {
// Initialize Masonry
var container = document.querySelector('#masonry-container');
var msnry = new Masonry( container, { transitionDuration: 0 } );
msnry.layout(); // run masonry for first time
function doMasonry() { msnry.layout(); } // gives us a function handler to call later with window.setTimeout()
// Initialize lazyload
$("img.lazy").lazyload({
effect : "fadeIn", // optional
load : function() {
$(this).parent().removeClass("unloaded"); // select the div containing the image and remove the "unloaded" class, thus deconstricting the min-height
window.setTimeout(doMasonry,100); // trigger masonry again with a 100 ms delay, if we do it too soon, the image may not have loaded, and masonry will layout with the wrong image dimensions (this might be a bit of a hacky way to do it)
}
});
});

Wrong position imgAreaSelect plugin in bootstrap modal window

I have a problem with imgAreaSelect plugin in Bootstrap.
I set parent in initializing imgAreaSelect to prevent scroll moving area :
thumb.imgAreaSelect({
handles: true,
aspectRatio: '1:1',
fadeSpeed: 300,
parent: "#thumbBox"
})
and this is my html :
<div class="modal-body">
<div class="row">
<div class="col-xs-12" style="font-weight:bold;">
Upload your picture and crop it.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="thumbBox">
<img id="thumb" class="img-responsive" />
</div>
</div>
</div>
whene I trying to select an area,ImgAreaSelect selects an area outside the picture but points ( I mean x1,x2 etc) are exactly that I want(the functionality works correct but in interface there is problem).
In smaller devices's,ImgAreaSelect interface is nit but in some situation it mess up !
I used to search a lot but i didn't find anything useful.
How can i fix this problem ?
UPDATE :
I solved this My self...
Refer to this link :
github
We must remove these lines from code :
/* Also check if any of the ancestor elements has fixed position */
if ($p.css('position') == 'fixed')
position = 'fixed';
And we must position relative the parent box that we initialized ourselves( parent: "#thumbBox").

Had same problem.
solution was:
parent:$('.modal-content')
you need to set modal content as parent not image container.

I mean the parent div of Image that you want to use image area select on it , must be position relative .
<div id="thumbBox" style="position:relative;">
<img id="thumb" class="img-responsive" />
</div>
And We must remove these lines from jquery.imageareaselect.js :
/* Also check if any of the ancestor elements has fixed position */
if ($p.css('position') == 'fixed')
position = 'fixed';

There are several scenarios that bootstrap.css can affect your imgareaselect. For me setting box-sizing:content-box on the image fixed my problem.
<img id="cartPhoto" class="cartImageThumb" style="box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;">
I prefer to overwrite the css inline vs modifying the bootstrap.css file because those chan it can affect the whole system.
If you run into issues with bootstrap.css affecting your code, comment out sections of bootstrap.css until you find which style is affecting you.

HTML:
<div><img id="cropimage" /></div>
JQUERY:
$(function () {
$('#cropimage').imgAreaSelect({ handles: true, parent: "cropimage", maxWidth: 200, maxHeight: 200, aspectRatio: '4:3' });
});
SOLUTION:
Use "parent" option to fix the imgAreaSelect to a parent div/window.

People who are having trouble with this in combination with Bootstrap 2
Go to bootstrap.css and comment out the following line
img {
width: auto\9;
height: auto;
/* max-width: 100%; DISABLE FOR IMGAREASELECT */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

I had the same issue. I was looked for a solution on this thread, trying all options.
But, when I read the documentation I found this 2 properties:
http://odyniec.net/projects/imgareaselect/usage.html
imageHeight - True height of the image (if scaled with the CSS width and height properties)
imageWidth - True width of the image (if scaled with the CSS width and height properties)
So, there is no need to change any code of js or css.
The only thing to do is set these 2 properties with the real size of the image.
Something like this:
var image = $("#image");
image.imgAreaSelect({
imageHeight: image[0].naturalHeight,
imageWidth: image[0].naturalWidth
});

Set slideshow width according to the screen

My slideshow's working correctly in every aspect except the fact that it's a total failure when it comes to adjusting to different screen sizes.
It works like it should on my big screen, but on my other one it doesn't adapt and adds a horizontal scroller.
I added width 100% to it but as I've found out the right way to do this is by a javascript code that adjusts everything dynamically. The problem is, I've never had any prior experience doing this and don't know where to begin. My page has jQuery loaded by the way.
This is the sample structure of slideshow:
<div class="featured-image">
<div style="overflow: hidden;height: 450px;"><img width="1950px" height="" alt="4" src="image.jpg"></div>
<!-- end .featured-price -->
</div>
I suppose a jQuery script to target '.featured-image img' dynamically and add the width and height to it would be the way to do this. Is there any way better than that or a simpler script? Any help is appreciated.

var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
If you need it to adjust dynamically then you'll need to capture the resize event:
$(window).resize(function() {
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
});