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.
I am making a site with a resizable sidebar. When the user resizes this sidebar, I would like the icons and text in the sidebar to shrink with the sidebar. Currently I am using if statement to check if the sidebar's width is below a certain size, but when I look on my Mac's Activity Monitor it shows that there is a lot of strain going on in Chrome when I continually resize the sidebar. My solution works, but I was wondering if there was a more efficient way to go about this. This is what I'm working with:
HTML:
<div id = "home_left">
<img src="images/image1.jpg" id = "profile_picture"/>
<p id = "profile_username">username</p>
<div class = "icon_container">
<img src="images/image2.png" class = "profile_icons"/>
</div>
<div class = "icon_container">
<img src="images/image3.png" class = "profile_icons"/>
</div>
<div class = "icon_container">
<img src="images/image4.png" class = "profile_icons"/>
</div>
</div>
jQuery:
$(document).ready(function(){
// Setting the left sidebar as resizable
$("#home_left").resizable({
handles: "e",
maxWidth: $("#home_left").width(),
minWidth: 100,
resize: function() {
//Width of profile picture
$("#profile_picture").width($("#home_left").width() - 24);
//Appearance of username and icons
if($("#home_left").width() < 200) {
$("#profile_username").addClass("hidden");
$(".icon_container").width($("#home_left").width());
}
else {
$("#profile_username").removeClass("hidden");
}
}
});
});
Fiddle: https://jsfiddle.net/mpjb19m7/
It doesn't show as much CPU usage in the Fiddle because there are no images being resized, but you can still see that there is a great deal more strain on the browser than usual. Is this just how jQuery UI is or am I doing something inefficiently?
If you check the Resizable Widget API, you will notice that you can bind callbacks not only for the resize event (which I guess it's the source of the strain you notice, since that's gonna fire continuously) but also for start and stop events.
I guess listening for those events can solve your problem, if you need your sidebar UI to be responding only on the begin/end of a resize operation.
I'm currently using Galleria for multiple image galleries on a page. Each gallery is created like so:
<div class="gallery">
<img src="/path/to/thumb.jpg" data-big="/path/to/full.jpg">
<img src="/path/to/thumb.jpg" data-big="/path/to/full.jpg">
</div>
...and at the end I have some Javascript:
<script type="text/javascript">
Galleria.loadTheme('/galleria/themes/twelve/galleria.twelve.min.js');
Galleria.run('.gallery',{
responsive: true,
height: $(window).height() * 0.80,
imageCrop: false,
wait: true,
extend: function(options) {
Galleria.log(this) // the gallery instance
Galleria.log(options) // the gallery options
// listen to when an image is shown
this.bind('image', function(e) {
Galleria.log(e) // the event object may contain custom objects, in this case the main image
Galleria.log(e.imageTarget) // the current image
// lets make galleria open a lightbox when clicking the main image:
jQuery(e.imageTarget).click(this.proxy(function() {
this.openLightbox();
}));
});
}
});
So I've taken some code snippets that allow for clicking on the image to show the zoomed version, but the import part this question is about is the height. Notice I set the height to 80% of the current web browser viewport.
I've found other questions/tutorials that show something like this for resizing that viewport on browser resizes:
$(window).resize(function(){
Galleria.get(0).resize();
});
but I can't seem to get this (or variations of it) to work. One issue is that I have multiple galleries and they're specified by class. I feel like I'd need to iterate through each gallery (not just to a get(0)) and resize all of them. But I'm inspecting the Javascript objects and I'm not sure how to do that.
So basically, the gallery does size properly on page load; I'd just like to resize them on browser resize to match the browser viewport.
I am in the midst of making my portfolio template but I am completely not familiar with JS, jquery and CSS transitions. Got this ( http://pixellytrain.com/sortportfolio/index.html) up and running through different tutorials. I would like to make the .blue div slide/ease nicely to the new height of the .red div after the portfolio is sorted (e.g. from "all" to "cat a").
Something like how the footer of this portfolio: http://hogash-demo.com/kallyas_wp/features/portfolio/sortable-layout/ slide in nicely when the portfolio become shorter.
Due to the portfolio tutorial on Queness, I already have got jquery, mixitup.js and easing.js linked to the page.
I tried this randomly but it was doing nothing so I am not sure how to get going or whether I am even on the right track. Thank you to all you kind-hearted pros in advance!!
$('.filter').click(function () {
$('.red').slideToggle('8000', "easeOutBounce", function () {
});
});
http://jsfiddle.net/XY2Ju/
Here is a working implementation. Enjoy!
0) Create something that wraps everything inside .red.
<div class="red">
<div class="wrapper">
<all the stuff that makes your portfolio>
</div>
</div>
Notice that the wrapper needs overflow: hidden; in it's css.
1) When the filter is clicked, get .red's current height and set red's height to it, then it won't jump around.
$('.red').height($('.wrapper').height());
// The portfolio moves around
2) After the animation of the items is complete, set .red to animate() to the same height as the wrapper.
$('.red').animate({'height': $('.wrapper').height()}, 250);
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)
}
});
});