Adding SWIPE functionality to a LIGHTBOX? - javascript

I'm sure that this is probably not to difficult to do, but I'm not very experienced with Javascript and could really use some pointers!
I have implemented NIVO LIGHTBOX http://dev7studios.com/plugins/nivo-lightbox/ (by the same makers of Nivo Slider) on my website and now want to enable touch / swipe gestures for this plugin so that someone can navigate if they visit my site on a ipad/iphone etc.
1) what touch library should I use? There seem to be a lot, and I'm not sure which one is best or easiest to use? I only want to have single finger, left and right swipe functionality for navigation. a minimum swipe (ie 50px) to active the navigation is probably a good idea as well.
2) What do I need to put in the header? (please help me out by providing some specific code if you can). I assume that I'll need:
- Link to plugin (I'm okay with how to do this)
- What code is required to fire off the touch gestures?
3) How do I link the DIV or IMG tag for the lightbox to the so that it works?
4) Ideally I'd also like to hide the navigation arrows if a touch device is detected?
My website is here: http://www.sandbox.imageworkshop.com/projects/william-angliss-institute/
Many thanks for your assitance.

This approach worked for me: http://www.janes.co.za/easy-ipad-gestures-in-your-website-with-jquery/
Below is the code I added to my Functions.php to add in the necessary javascript:
function child_theme_head_script() {
?>
<script src="<?php bloginfo('stylesheet_directory') ?>/js/jquery.touchwipe.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('body').touchwipe({
wipeLeft: function(){ jQuery(".nivo-lightbox-next").click(); },
wipeRight: function(){ jQuery(".nivo-lightbox-prev").click(); },
min_move_x: 20,
min_move_y: 20,
preventDefaultEvents: false
})
});
</script>
<?php
}
add_action( 'wp_head', 'child_theme_head_script' );

Related

Convert slider/carousel to pager while switching from Desktop to Mobile View

I have created a slider/carousel like the one below on left - Desktop view.
I would like it to be switching to Pager based slider on mobile screens - like the one on the right side.
I have used this script for desktop slider -
https://www.jqueryscript.net/rotator/Simplest-3D-Image-Carousel-Plugin-For-jQuery-Carousel-js.html
Any help will be great, Thanks!
You will have to use 2 plugins for this. As far as I can tell there is no "pager" option for the plugin you are using. And then, using JavaScript you should destroy current plugin and initialize new one. Which could also be a problem since I don't see any sort of destroy method for your plugin. So ok, it would look something like this.
function init3DSlider() {
$('.your-container').carousel({
your: 'options'
})
}
function initPagerSlider() {
$('.your-container').somePagerPlugin({
// ...your options
})
}
// Function for checking which slider should turn on.
function turnOnSliderDependingOnResolution () {
if(window.matchMedia('(min-width: 768px)').matches) {
init3DSlider()
// ...somehow destroy pager slider
} else {
initPagerSlider()
// ...somehow destroy 3d slider
}
}
// Run turnOnSliderDependingOnResolution function on window resize.
window.addEventListener('resize', turnOnSliderDependingOnResolution)
Since this 3d slider doesn't have destroy method, try using this: http://ub4.underblob.com/remove-jquery-plugin-instance/
Or you can use a more simple solution, and that is to duplicate your slider, initialize both sliders (3D and pager). And then using CSS media queries you would hide one or the other.
Not exactly optimal but it will work.

Why are touch event listeners seemingly preventing the selection of google translate languages on the iphone or ipad?

I've a problem with the google translate widget. When using the iphone or the ipad I can't select the language to translate to. I can click the first button, but then when the languages menu appears and I tap a language, the menu immediately disappears and the click registers on the element that was behind the menu. This problem only occurs under very specific situations which I will outline below.
The problem described below has been observed on an iphone4 ios5.0.1
and ipad2 ios 7.0.6.
The problem has NOT been observed on firefox 29.0.1, chrome
31.0.1650.63 m or internet explorer 11.
JSfiddle of the problem at http://jsfiddle.net/LfkLy/1/
Reveal.js is not needed to recreate this problem.
I first noticed the problem when I used the widget on a page with reveal.js After a lot of playing around, I found that if I set touch to false in the reveal.js config or commented out lines below, the widget worked as it should have.
dom.wrapper.addEventListener( 'touchstart', onTouchStart, false );
dom.wrapper.addEventListener( 'touchmove', onTouchMove, false );
dom.wrapper.addEventListener( 'touchend', onTouchEnd, false );
I decided to remove reveal.js touch events and implement my own using hammer.js and the hammer jquery plugin.
I used something like this
// hammer.js
$('.reveal').hammer().on("tap", function()
{
console.log("tapped with a hammer");
});
Once the above code was implemented, the problem occurred again. I modified the code and tried it with just hammer.js and got the same result. The problem occurred regardless of which part of the page I attached the touch listener to. For curiosity's sake I tried it with jquery and again got the same result.
//Test with jquery
$('.reveal').on("touchstart", function()
{
console.log("touched with jquery");
});
Interestingly enough, when I used the click function there was no problem with the widget.
$('.reveal').on('click',function()
{
console.log("jquery click worked");
});
Despite the obvious link between touch events and the problem, I haven't dismissed the possibility that this may somehow be related to CSS. UPDATE: In particular, I'm starting to suspect it might have something to do with :hover and the touch events.
QUESTIONS
Why is this happening?
How can I listen for touch events such as touchstart and still use the google translate
widget on the iphone/ipad?
MY GOOGLE TRANSLATE WIDGET CODE
<div class="custom-translate" id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false},'google_translate_element');
}
(function() {
var googleTranslateScript = document.createElement('script');
googleTranslateScript.type = 'text/javascript';
googleTranslateScript.async = true;
googleTranslateScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( googleTranslateScript );
})();
</script>
The problem is that for the layout you've selected, the Google Translate widget opens the language options "dropdown" in a new iframe, and (long story short) hammer.js doesn't play nicely with iframe content (presumably reveal.js has the same issue).
You could try some pretty complicated means of working around the issue involving dealing with the events and the iframe content, but a much simpler solution is to use another layout that doesn't use the iframe, e.g. replace SIMPLE with HORIZONTAL or VERTICAL
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
autoDisplay: false
},'google_translate_element');
}
I've updated your most recent fiddle here: http://jsfiddle.net/LfkLy/10/

jQuery Mobile; twentytwenty plugin will only show up when the browser window is resized

I'm not sure why this is happening, as I've followed the directions on Zurb's website. It doesn't matter what size the window is upon opening the page with TwentyTwenty, it will only show the slider once the page has been resized. The plugin works flawlessly aside from that. I have a feeling there's some way to adjust the following to make it load without resizing the window...
$(window).load(function() {
$(".twentytwenty-container").twentytwenty();
});
Maybe? Much appreciated.
It's a little bug, but fixed by add code.
Add this to jquery.twentytwenty.js file:
$(window).load(function() {
$(window).trigger("resize.twentytwenty");
});
$.fn.twentytwenty = function(options) {
var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
// >>>>> HERE ADD CODE <<<<<<
return this.each(function() {
//.......
source: https://github.com/zurb/twentytwenty/pull/69/commits/471a824bf5ab233797d0de689a5be105347c81e2
I've sat on this same issue for a long time. I was using the class to .twentytwenty-container in the code. When I switched it to an id (here, #container-id), the issue seemed to go away.
$(window).load(function(){
$("#container-id").twentytwenty({
default_offset_pct: 0.5, // How much of the before image is visible when the page loads
orientation: 'horizontal' // Orientation of the before and after images ('horizontal' or 'vertical')
});
});
Does this work for anyone else?

Topcoat Side Menu on swipe

So I'm working on a phonegap app using topcoat and implemented a fly out menu as seen here. I'm using this script to open/close the menu
$(function () {
var slideMenuButton = document.getElementById('slide-menu-button');
slideMenuButton.onclick = function (e) {
var cl = document.body.classList;
if (cl.contains('left-nav')) {
cl.remove('left-nav');
} else {
cl.add('left-nav');
}
};
});
Now everything is working fine but what I want to add on is the ability to swipe to close the panel and to open it as well. I've seen touch library for jquery that seem to offer a solution (such as TouchSwipe) but I want to try to get this as close as possible to a 1:1 touch movement interaction.
Anyone have an idea on what direction I should go in to get this going or have any ideas? Any help is appreciated.
Found this and with some renaming of classes, I got a touch slide out menu that works how I want. Its called Bamboo.js
Here's a demo of it

fraction slider not working

I've downloaded Fraction Slider from #jacksbox and have gone through the documentation countless times now and cannot figure out why my slider won't show the effects it's supposed to. This is the site I'm working on: http://pacificdesignacademy.com/NEW/2 and this is an example of what the slider is supposed to do: http://jacksbox.de/stuff/jquery-fractionslider/.
Here is the path to my js: ../NEW/2/fractionslider/jquery.fractionslider.js
And here is the path to my css ../NEW/2/fractionslider/fractionslider.css
All of the images are just stacking on top of one another regardless of me defining overflow:hidden on the containing element.
Not sure what else to do here, so any help is greatly appreciated. I'm supposed to launch this site September 1st... eep!
Thanks!
A simple check in the browser's console showed you have a syntax error on line 594 of your page. You have a closing parenthesis instead of an opening brace.
UPDATE After you fixed that, you're now getting the error :
Uncaught ReferenceError: jQuery is not defined
I suggest you move your code and place it after you've included both jQuery and the slider plugin, so your page should look like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="fractionslider/jquery.fractionslider.js"></script>
<script type="text/javascript">
jQuery(window).load(function(){
$('.slider').fractionSlider({
'fullWidth': true,
'controls': true,
'pager': true,
'responsive': true,
'dimensions': "1200,400",
'increase': false,
'pauseOnHover': true
});
});
</script>
You are missing an opening parenthesis when calling the plugin.
Change
$('.slider').fractionSlider()
To
$('.slider').fractionSlider({
On line 593
FractionSlider is garbish! Use LiquidSlider instead!
What one doesn't have but exist in the other:
well formated object oriented code,
automatic hardware acceleration with the new CSS3 transforms if the browser supports it (no js animation here!),
keyboard navigation,
hash linking where user can bookmark a specific slide or land to a page that opens slider to a specific slide,
many effects,
mobile 'swap' support
user extensible.
Of course it uses some other libraries and code snipets 'stolen' from here and there (https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/ but actually it's reduntant as the use of Moderniz library in responsive designs makes the detection as simple as a one-line command, http://easings.net/ for the easing equations, https://daneden.me/animate/ for the transformations etc.)
The idea behind FractionSlider is indeed unique but the implementation sucks!

Categories

Resources