We Keep Coding

Add Zoom In/Out on Single Click Owl Carousel

Is there a way to add gallery like feature to owl. I mean I want to zoom in/out slide on click and also on zoom in grab/drag the zoomed area.
I tried it like:
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 10
});
$('.link').on('click', function(event){
var $this = $(this);
if($this.hasClass('clicked')){
$this.removeAttr('style').removeClass('clicked');
} else{
$this.css('background','#7fc242').addClass('clicked');
}
});
});
Slide zooms but on drag owl's main drag function runs and move to next slide. I want owl to work like PhotoSwipe does.
The only issue with PhotoSwipe is that it opens in fullscreen lightbox view. I also tried zoomooz on click but it don't support dragging.
Can anyone guide me how to add these functionalities?

How can I stop a CSS animation on scroll?

I want to show an animating arrow the first time a web page loads, and disable it when the user scrolls.
Normally I could do something like this:
jQuery(window).scroll(function() {
jQuery('.arrow').css("display", "none");
});
However my site has a few plugins to allow horizontal scrolling which I think is preventing this from working.
Is there a way to hide the animation that is not based on scrolling detection?
http://codepen.io/sol_b/pen/ORGKbP
Thanks.
EDIT: the plugins I'm using are jquery kinetic and jquery mousewheel.

You can do the following in your jquery.
jQuery(window).scroll(function() {
document.getElementById("animation").style.WebkitAnimationPlayState = "paused";
});
This will stop your animation while scrolling, but this will cause an issue that the animation won't be played when the scroll is stopped. Fot that you can use this function
$.fn.scrollStopped = function(callback) {
var that = this, $this = $(that);
$this.scroll(function(ev) {
clearTimeout($this.data('scrollTimeout'));
$this.data('scrollTimeout', setTimeout(callback.bind(that),250, ev));
});
};
And then on scroll stop you can start the animation again.
$(window).scrollStopped(function(ev){
document.getElementById("animation").style.WebkitAnimationPlayState = "running";
});

If the plugin, that allows horizontal scrolling, has an official documentation, you should look for a callback method. Like when the users is scrolling this called gets called. In the callback you could then hide the arrow (or .fadeOut() imo)...

I was able to fix this by replacing 'window' with my content wrapper. Like this:
jQuery('#wrapper').scroll(function() {
jQuery('.arrow').css("display", "none");
});

jQuery transition effect when hiding 3 columns and expanding one to be 100% of row

My page initially starts out with 4 wrapper divs that each have a class of 'col-md-3' but after an expand button is clicked 3 of the wrappers are hidden and the clicked one gets 'col-md-12':
// If wrapper is the current wrapper expand to col-md-12 otherwise hide
$(".wrapper").each(function (index) {
if ($(this).attr("id") === wrapper.attr("id")) {
$(this).removeClass("col-md-3").addClass("col-md-12");
} else {
$(this).hide();
}
});
Is there any fast/easy way to animate something like this? I prefer not adding jQuery UI library to my project. I prefer a slide left to right motion.
The only thing I could come up with so far is doing:
$(this).hide('1000');
However, I prefer doing the animation on the adding of class "col-md-12" not the hiding of the others.

I prefer a slide left to right motion.
In JQuery you can animate Elements with
$(this).stop().animate({
right: '-50%' //distance of moving
}, 400); //time of moving in ms

How do I get the TouchSwipe event target

I have a spiffy css toggle control which I am trying to add swipe support for and I am using the TouchSwipe plugin. The problem is that I don't know how to only affect the element that called it. I have a bunch of toggles on the page and right now they are all triggered instead of just the one I and swiping on. (touchswipe plugin: http://labs.rampinteractive.co.uk/touchSwipe/demos/)
For example, this code:
/* Toggle */
$('.toggle2').click(function() {
/* code which switches between toggled on and toggled off */
}).disableSelection().swipe({
_this: $(this),
swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData){
if ($('.toggle2').hasClass('on'))
$('.toggle2').trigger('click');
},
swipeRight: function(event, direction, distance, duration, fingerCount, fingerData){
if ($('.toggle2').hasClass('off')) alert('n');
$('.toggle2').trigger('click');
},
threshold: 0
});
works, but it triggers ALL of my toggles on the page. I tried changing $('.toggle2') to $(event.target) to no avail. What am I doing wrong?

Although you're not sharing much of that in your question, looks like all your other toggles have toggle2 as their class (<div class="toggle2"></div>). Add another one to the one you're trying to swipe (<div class="toggle2 toggle-swipe"></div>), and use that for your swipe script:
$('.toggle-swipe').click(function() {
/* code which switches between toggled on and toggled off */
}).disableSelection().swipe({
// ...
});

How to make a sliding thingamajig between photos?

See the effect in the photos in the article here:
http://www.popsci.com/science/article/2012-11/and-after-images-show-hurricane-sandys-devastation
Does anyone have any idea how that's done? I suppose I could make two frames with adjustable width within a fixed frame, but what about the handle? And the way the frame line and handle brighten and enlarge when you mouse over? Hover event, to be sure, but what kind of hover event?

It is very simple. You have 2 DIVs with the 2 different images (as background-image in css) overlapping eachother (In e.g absolute positioning.) (Perhaps the "Before" picture above)
Then you have a slider and when dragged it decreases the overlapping DIV's width, making the underlaying DIV show!
This functionallity can be found in a jQuery plugin called "Before/After"
Link: jQuery BEFORE / AFTER

You could of course just write your own that isn't dependant on jQuery UI.
;(function($){
$.fn.slidingThingamajig = function () {
return this.each(function(){
var $this = $(this);
$this.find('.handle')
.css({cursor:'ew-resize'}) // Here's your fancy cursor with directional arrows
.on('mousedown', function(e) {
$this.addClass('resizable');
$this.parents().on('mousemove', function (e) {
$('.resizable').css({width:e.pageX - $('.resizable').offset().left});
}).on('mouseup', function(e) {
$('.resizable').removeClass('resizable');
});
e.preventDefault();
});
});
}
})(jQuery);
You would probably need to tweak this a little, but it's mostly all there.