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.
Related
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/
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 use elevatezoom plugin in my app. What I want to do is just change zoomwindow height according to image hovering over. I could find a way but it does not work efficiently. It does not work when the page is first loaded. If I go to another page and see another product then elevatezoom is working as i want.
Here is my code with laravel url assignments:
<div class="product-main-image">
<img src="{{URL::to($product->image)}}" alt="{{$product->title($product->id)}}" class="zoomInner img-responsive" data-zoom-image="{{URL::to($product->image)}}">
</div>
<div class="product-other-images" id="gallery_01">
<a data-update="" data-image="{{URL::to($product->image)}}" data-zoom-image="{{URL::to($product->image)}}">
<img alt="{{$product->title($product->id)}}" src="{{URL::to($product->image)}}"></a>
#if(isset($images) && $images)
#foreach($images as $image)
<a data-update="" data-image="{{URL::to($image->image)}}" data-zoom-image="{{URL::to($image->image)}}">
<img alt="{{$product->title($product->id)}}" src="{{URL::to($image->image)}}"></a>
#endforeach
#endif
</div>
And here is thejavascript which initiates zoom and changes zoomwindow height:
(function() {
$(".product-main-image img").on("load",function() {
var mainImgHeight=$(this).height();
/*var src=$(this).attr("src");
alert(src);*/
$('.zoomInner').elevateZoom({
gallery:'gallery_01',
zoomType: "window",
cursor: "crosshair",
zoomWindowWidth:"400",
zoomWindowHeight:mainImgHeight,
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
$(".product-main-image img").data("zoom-image","false").elevateZoom();
});
})();
If I remove last row code snippet, zoom is working on first load However data-zoom-image does not change when product other images are clicked. How can I handle the problem. I think when i assign a global value ot "mainImgHeight" in load() function problem might be solved. But i could not get it work after one day hassle. Maybe someone has a clue.
The problem is solved. It is simple solution. you can see the code and the descriptions below.
var firstImgHeight = $(".product-main-image img").height();
$(".zoomWindow").css({"height":firstImgHeight});//assign height of first image to the zoomWindow height
$('.zoomInner').elevateZoom({ //initiate zoom
gallery:'gallery_01',
zoomType: "window",
cursor: "crosshair",
zoomWindowWidth:"400",
zoomWindowHeight:firstImgHeight,
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
$(".product-main-image img").on("load",function() { //change zoomWindow height when each image is loaded (these images are big sizes of small thumnail images)
var mainImgHeight=$(this).height(); // they are loaded by elevatezoom plugin
$(".zoomWindow").css({"height":mainImgHeight});
var zoomWH = $(".zoomWindow").height();
});
that solution works fine for me.
I'm having trouble to integrate the Galleria image gallery plugin onto one of my Jquerytools tabs. When navigating directly to the page with Galleria (example: www.domain.com/index.php#tabnameofgalleriapane), there's no problem.
Whenever the pane with galleria is not loaded immediately (default pane is another pane), Gallery throws an error: Fatal error: Could not extract a stage height from the CSS. Traced height: 0px., which is logical, because when the Galleria pane is not active, it's css is probably display:none;...
Defining the height & width literally does not seem to work. This was the previous setup:
jQuery("#jp_nav").tabs(".jp_pane", { history: true } );
jQuery('#gallery').galleria({
imageCrop: false,
transition: 'slide',
autoplay: 7000,
width: 960,
height: 640
});
So I was thinking to bind the load of the Galleria plugin onload of the pane that contains the Galleria plugin, because in that moment, the Galleria pane does have a height... I've found something to help me on my way, but now I'm getting other JavaScript conflict errors (see below for explanation).
jQuery("#jp_nav").tabs(".jp_pane", {
initialIndex: 0,
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
var src = this.getTabs().eq(i).attr("href");
pane.load(src, "#jp_images", function(){
jQuery('#gallery').galleria({
imageCrop: false,
transition: 'slide',
autoplay: 7000,
width: 960,
height: 640
});
});
},
history: true
});
For reasons beyond my control, the website I'm writing this for uses both jQuery and Prototype/Scriptaculous. So please take into account that the script has to be written in noConflict mode. (Which I'm doing in my setup $.noConflict();)
Can someone please tell me if the script below puts me on the right track?
Can someone help me modify the script to work when the #jp_images tab is loaded?
Right now, the above script gives me conflict errors with Prototype.
Anxiously awaiting your expert views!
Regards,
Maarten
I've managed to find a quick and dirty solution (thanks to vfxdude)
Anytime the tab with the Galleria is clicked, I force a page reload, like so:
tabName = 'jp_images';
jQuery('#jp_nav a[href="#'+tabName+'"]').click(function() { if (location.hash == '') location.replace(location.href+'/#'+tabName); });
After this, I can just use the regular old Galleria plugin initialisation.
Granted, it is a little dirty, but it's an easy and quick fix for when on a deadline.
I hope that's the correct description of this problem. If not, please forgive me, I'm new here and new to JavaScript..
I am creating a turntable animation of a chair using a jQuery plugin called Spritespin. I have it setup so it loads a long strip of sprites of the chair rotating around its axis.
The Spritespin website shows what parameters of an object notation I can change to get the thing to work. This is what it looks like:
// initialize the spritespin
$(".spritespin").spritespin({
width : 640,
height : 640,
frames : 24,
resolutionX : 15360,
resolutionY : 640,
image : "turntable/images/LC-01_strip_black.jpg",
(some more code..)
});
As you can see, all I have to do is create a strip of (in my case) 24 images of 640 x 640 and link to it.
The problem is that I would like to add some functionality. I'd like to have a set of colour swatches to the side of the rotating chair that alow the user to pick a different colour.
My idea is to put all 7 sprite strips into one huge image (15360 x 4480) and shift its y position based on which swatch is clicked. But I have no idea how to write that code or if it's even the smartest way to go about it.
This is how my swatches are setup right now:
<div id="colourSwatches">
<div id="swatchBlack"></div>
<div id="swatchBlue"></div>
<div id="swatchBrown"></div>
<div id="swatchPink"></div>
<div id="swatchRed"></div>
<div id="swatchTurquoise"></div>
<div id="swatchYellow"></div>
</div>
I hope that wasn't too convoluted and that someone can help me.
I looked over the spritespin.js file and didn't see any function to change either offsetX/Y or the image it was using. However it seems you can call the spritespin function on the div again with changes eg:
$('a').click(function() {
var swatch = $(this).attr('id');
if(swatch == "black") {
$(".spritespin").spritespin({
width : 640,
height : 640,
frames : 24,
resolutionX : 15360,
resolutionY : 640,
image : "turntable/images/LC-01_strip_black.jpg",
(some more code..)
});
}
});
There are obviously different ways you can proceed to change the image : option like setting it to a variable which goes through the if statements (cutting down on the size of the file), using the variable in something like
image : "turntable/images/LC-01_strip_" + swatch + ".jpg"
or reading the filenames using AJAX or JSON. I unfortunately do not know how this affects the DOM or if clicking the link 1 million times will break the browser.