Develop Reference

jQuery select an image and then crop it

How do I crop my selected picture?
I've written web page that gives the user a choice to replace their current picture with a picture inside a carousel.
<div class="rcrop-wrapper">
<img id="ZoomAvatarPicture" src="Pictures/PhotoAlbum/203.jpg" height="200" />
</div>
<div class="owl-carousel-v4 margin-bottom-40">
<div class="owl-slider-v4">
<div class="item">
<img src="Pictures/PhotoAlbum/90.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/90.jpg"/>
</div>
<div class="item">
<img src="Pictures/PhotoAlbum/22.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/22.jpg"/>
</div>
<div class="item">
<img src="Pictures/PhotoAlbum/21.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/21.jpg"/>
</div>
</div>
When I click on the images in the carousel the ZoomAvatarPicture is replaced, as I expect it. I want to crop the newly selected ZoomAvatarPicture image. I've tried 3rd party cropping software (e.g. jQuery rcrop and imgAreaSelect) but their cropped images are of the original image, 203.jpg)
This is the code I added for rcrop:
jQuery(document).ready(function () {
$('#ZoomAvatarPicture').rcrop({
full: true,
preserveAspectRatio: true,
minSize: [50, 50],
inputsPrefix: '',
grid: false,
});
$('#ZoomAvatarPicture').on('rcrop-changed', function e() {
var srcResized = $(this).rcrop('getDataURL', 50, 50);
$('#cropped-resized').append('<img src="' + srcResized + '">');
})
});
And then I had a div to hold the cropped image
<div id="cropped-resized">
<h3>Images resized (50x50)</h3>
</div>
Since I got the same results for rcrop and imageSelect it leads me to believe that the problem isn't in the software but in my understanding of what can be done in jQuery.
Also, the demo page for rcrop is here: http://www.jqueryscript.net/demo/Responsive-Mobile-friendly-Image-Cropper-With-jQuery-rcrop/
I've added this code
function rcrop_Avatar()
{
var srcResized = $('#ZoomAvatarPicture').rcrop('getDataURL', 50, 50);
$('#cropped-resized').append('<img src="' + srcResized + '">');
alert('src = ' + $('#ZoomAvatarPicture').attr('src') );
}
function resetListener()
{
$('#ZoomAvatarPicture').off(onclick, 'rcrop-changed', rcrop_Avatar);
$('#ZoomAvatarPicture').rcrop({
preserveAspectRatio: true,
minSize: [100, 100],
inputs: true,
inputsPrefix: '',
preview: {
display: true,
size: [200, 200],
wrapper: '#custom-preview-wrapper'
}
});
rcrop_Avatar();
}
jQuery(document).ready(function () {
App.init();
App.initScrollBar();
Datepicker.initDatepicker();
OwlCarousel.initOwlCarousel();
CirclesMaster.initCirclesMaster1();
StyleSwitcher.initStyleSwitcher();
$('#ZoomAvatarPicture').rcrop({
preserveAspectRatio: true,
minSize: [100, 100],
inputs: true,
inputsPrefix: '',
preview: {
display: true,
size: [200, 200],
wrapper: '#custom-preview-wrapper'
}
});
$('#ZoomAvatarPicture').on('rcrop-changed', rcrop_Avatar);
});
and modified the HTML to this:
<div class="item">
<img src="Pictures/PhotoAlbum/Work/90.jpg" onclick="$('#CurrentAvatarPicture').attr('src','Pictures/PhotoAlbum/Work/90.jpg');resetListener();"/>
</div>
I'm still getting the same results. (i.e. the cropped image is the original image, not the newly selected one).
The entire process is in a bootstrap modal. I'm starting to think I should forgo this route and put everything into a tabbed series of iframes.

Apparently, rcrop doesn't like to change properties or subject on the fly, and the destroy method is pretty messy, as it sometimes deletes the original object or leaves the preview display behind.
So, to avoid that, I changed a bit the behaviour to delete the remains and then recreate the image and attach it to the rcrop again.
Due to the size limit of the answers and not being able to upload the js and css of rcrop, i made this Codepen: http://codepen.io/LordNeo/pen/XpxVVv
Here is the relevant parts so you can check for modifications, for working example see the above CodePen.
$(document).ready(function () {
$('#ZoomAvatarPicture').rcrop({
full: true,
minSize : [50,50],
preserveAspectRatio : true,
inputsPrefix: '',
grid: false,
preview : {
display: true,
size : [100,100],
}
});
});
function changeImage(imgsrc) {
$('#ZoomAvatarPicture').rcrop("destroy");
$('#ZoomAvatarPicture').remove();
$('.rcrop-preview-wrapper').remove();
$('.rcrop-wrapper').prepend('<img id="ZoomAvatarPicture" src="'+imgsrc+'" height="200" />');
$('#ZoomAvatarPicture').rcrop({
full: true,
minSize : [50,50],
preserveAspectRatio : true,
inputsPrefix: '',
grid: false,
preview : {
display: true,
size : [100,100],
}
});
}
<div class="rcrop-wrapper">
<img id="ZoomAvatarPicture" src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG1" height="200" />
</div>
<div class="owl-carousel-v4 margin-bottom-40">
<div class="owl-slider-v4">
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG2" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG2')"/>
</div>
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG3" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG3')"/>
</div>
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG4" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG4')"/>
</div>
</div>

Nivo-Slider plugin not working

The plugin doesnt seem to be working for me on this project im working on, whenever i load the page to view the slider the transitions aren't working, i've looked at the file paths for the references to the javascript files and css files and they are correct.
I'll post the code below if anyone could help that'd be great!
Jquery:
$(window).load(function () {
$('#slider').nivoSlider({
effect: 'boxRain', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: false, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function () { }, // Triggers before a slide transition
afterChange: function () { }, // Triggers after a slide transition
slideshowEnd: function () { }, // Triggers after all slides have been shown
lastSlide: function () { }, // Triggers when last slide is shown
afterLoad: function () { } // Triggers when slider has loaded
});
});
File Refs:
<script src="assets/Nivo-Slider-master/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script src="assets/Nivo-Slider-master/nivoslider.jquery.json"></script>
<link rel="stylesheet" href="/assets/Nivo-Slider-master/nivo-slider.css" type="text/css" media="screen" />
Example Slider code of mine:
<div id="slider" class="nivoSlider" >
<uc1:ImageCarouselll runat="server" ID="ctrl_Images" />
</div>
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" style="display: none;">
<div class="slides" style="width: 138240px;"></div>
<h3 class="title">Image from Unsplash</h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</asp:Content>
The control code is as follows:
<asp:Repeater ID="rptPhotos" runat="server">
<ItemTemplate>
<a href="/images/<%# Eval("ImageURL").ToString() %>" data-gallery="">
<img class="TheImage" src="/images/<%# Eval("ImageURL").ToString() %>" alt="test" /></a>
</ItemTemplate>
<AlternatingItemTemplate>
<a href="/images/<%# Eval("ImageURL").ToString() %>" data-gallery="">
<img class="TheImage" src="/images/<%# Eval("ImageURL").ToString() %>" alt="test" /></a>
</AlternatingItemTemplate>
</asp:Repeater>
Any help is greatly appreciated! Thanks!

slickGoTo wont work during animation

I am building a slider with slick than is 10 sliders. Each one is a slice of a horizontal slide of an image.
If one of them is clicked then they should all slide to the same random index with slickGoTo. However if a slide is currently being animated that one slider finishes it's animation instead of going to the proper slide.
I tried to stop the animation with $('.slick-track').stop(true, true); but that doesn't work.
Any ideas on how I can get slickGoTo to go to the right slide or stop the animation and then call slickGoTo?
HTML
<div class="your-class">
<img src="images/aaron_09.jpg" />
<img src="images/ferrier_09.jpg" />
<img src="images/hassan_09.jpg" />
<img src="images/heimz_09.jpg" />
<img src="images/joe_09.jpg" />
<img src="images/paul_09.jpg" />
<img src="images/savitha_09.jpg" />
<img src="images/vaughn_09.jpg" />
</div>
<div class="your-class">
<img src="images/aaron_10.jpg" />
<img src="images/ferrier_10.jpg" />
<img src="images/hassan_10.jpg" />
<img src="images/heimz_10.jpg" />
<img src="images/joe_10.jpg" />
<img src="images/paul_10.jpg" />
<img src="images/savitha_10.jpg" />
<img src="images/vaughn_10.jpg" />
</div>
JS
$(document).ready(function(){
var slick_settings = {
slidesToShow: 1,
adaptiveHeight: true,
dots: false,
arrows: false,
infinite: true,
speed: 1000
};
var slider_collection = $('.your-class');
var slick_collection = slider_collection.slick(slick_settings);
var slick_collection_length = slick_collection.length -1;// -1 since it is used for indexes
// slide a random slider left or right
function slide() {
var slider_key = Math.floor(Math.random() * slick_collection_length);
var slider = slider_collection[ slider_key ];
// pause on hover
if(slider_collection.filter(function() { return $(this).is(":hover"); }).length){
return;
}
// left or right
if(Math.random() >= 0.5){
$(slider).slick('slickNext');
}
$(slider).slick('slickPrev');
}
setInterval(slide, 2000);
// build a image
$(slider_collection).click(function(e){
var slider_key = Math.floor(Math.random() * slick_collection_length);
$('.slick-track').stop(true, true); // doesnt stop the animation
$(slider_collection).each(function(){
$(this).slick('slickGoTo', slider_key);
});
});
});

I needed to set waitForAnimate: false This option was in the git repos readme and not on the website.

For example:
$('.class').slick('slickGoTo', 2, true);
will not animate
and
$('.class').slick('slickGoTo', 2, false);
will animate
The docs say:
slickGoTo
Arguments : int : slide number, boolean: dont animate
Navigates to a slide by index

Jquery image gallery next/prev image buttons

<div class="slider">
<ul id="slider1">
<li>
<img src="images/contimg.jpg" width="500" height="400" border="0">
</li>
<li>
<img src="images/contimgtwo.jpg" width="500" height="334" border="0">
</li>
</ul>
</div>
<div id="buttons">
<button>click</button>
</div>
Javascript
$(document).ready(function () {
$('#slider1').cycle({
fx: 'fade',
speed: 'slow',
timeout: 5000
});
});
$(function () {
$("button").click(function () {
$("#slider1").length + 1;
});
});
I'm using a cycle plugin to make the images from the fade every 5 secs. I wanted to add next/prev image buttons. The first piece of js is the plugin which automates the 'slideshow' and the second bit is the js for the buttons to change images next/prev.

may this help you
<script type="text/javascript">
$(document).ready(function () {
$('#slider1').cycle({
fx: 'fade',
speed: 'slow',
timeout: 5000
prev: '#prev',
next: '#next',
pager: '#nav',
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(idx, slide) {
var s = idx > 2 ? ' style="display:none"' : '';
return '<li'+s+'>'+(idx+1)+'</li>';
};
});
</script>
just add html to your page
<span id="prev">Prev</span>
<span id="next">Next</span>
<div id='nav'></div>

// doc ready
$(function() {
$('#slider').cycle({
fx: 'fade',
speed: 'slow',
timeout: '5000',
next: '#next-arrow', // id name next
prev: '#prev-arrow' // id name prev
});
$(window).load(function(
// your div next name
$('#next-arrow').append('<img src="http://iconify.it/wp-content/icons-large-alt/arrow-right.png" style="width:25px;"/>')
// your div prev name
$('#prev-arrow').append('<img src="http://iconify.it/wp-content/icons-large-alt/arrow-right.png" style="width:25px; -webkit-transform:rotate(180deg);"/>')
});
});
Hope is help you guy.

JS script only applied after window resized

I am using an external library - SwipeJS - for a touch picture slide, and it is only working when I resize my browser window.
I have my images in the Swipe Container like this inside the body:
<div id='mySwipe' style='max-width: 500px; margin: 0 auto' class='swipe'>
<div class='swipe-wrap'>
<div>
<img src="css/images/image4.jpg" width="100%" />
</div>
<div>
<img src="css/images/image2.jpg" width="100%" />
</div>
<div>
<img src="css/images/image3.jpg" width="100%" />
</div>
</div>
</div>
And, I am loading the swipe script right at the end of the body to make sure the document is ready - as the library author suggested. The library is loaded inside the <head> container.
<script>
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide : 1,
auto : 3000,
continuous : true
});
</script>
I have tried to check if the document is ready with $(document).ready(function() { } but that solution did not work either.

Have you tried using the widgets default example with just your minor tweaks specifically?
<script>
var slider = Swipe( document.getElementById('mySwipe'), {
startSlide: 1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
} );
</script>