Detect swipe left and swipe right

[jamminjames]

What's the best way to detect a swipe left or a swipe right in your code? I'm trying to ad an admob event that happens after a few swipes, but can't figure out how to detect it, as 'swipeleft' and 'swiperight' aren't working.

For example, this line doesn't seem to be detecting it (the image slides are inside the 'gallery' div): $("#gallery").on("swipeleft",function(event) {

[vvvmax]

hi. on item change is working. it's the same. Please see the docu about on item change event.

On Wed, Jul 15, 2015 at 11:50 PM, jamminjames notifications@github.com wrote:

What's the best way to detect a swipe left or a swipe right in your code? I'm trying to ad an admob event that happens after a few swipes, but can't figure out how to detect it, as 'swipeleft' and 'swiperight' aren't working.

For example, this line doesn't seem to be detecting it (the image slides are inside the 'gallery' div): $("#gallery").on("swipeleft",function(event) {

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14.

[jamminjames]

I tried all kinds of variations on what the documentation seems to be saying, but can't get it to work. Can you give me a more detailed example of how you think I could detect a swipe?

Also, I'm curious, since 'swipeleft' is standard in jquery, why doesn't my example above work? Seems like it should, regardless of what unitegallery is doing.

[vvvmax]

Because I use custom functions and not jquery mobile functions. I even don't load jquery mobile. Wrote all swipe functions by myself. Please read this section: http://unitegallery.net/index.php?page=examples-api

I think you need this function:

api.on("item_change",function(num, data){ //on item change, get item number and item data //do something });

after a few item changes you can show you ads.

btw, on what platform you make the mobile application? Phone Gap? Does the gallery works there?

On Thu, Jul 16, 2015 at 1:57 AM, jamminjames notifications@github.com wrote:

I tried all kinds of variations on what the documentation seems to be saying, but can't get it to work. Can you give me a more detailed example of how you think I could detect a swipe?

Also, I'm curious, since 'swipeleft' is standard in jquery, why doesn't my example above work? Seems like it should, regardless of what unitegallery is doing.

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-121771745.

[jamminjames]

Sorry for the time lag... yes, I'm using Phone Gap Build, and the gallery is working.

I'm trying what you suggested above. However, reading at the link you gave, it says: Using the API call from the button: <input type="button" value="Next Item" onclick="api.nextItem()" >

But the gallery doesn't use input type="button" anywhere, so I don't understand where that line would go in the html. Can it be put in the div, like: <div id="gallery" value="Next Item" onclick="api.nextItem()" class="swipeimage" style="display:none;">

... I tried that, but it's not working.

I'm using admob, as I said, to display ads. In the script for that, I've included: // show ad on 3rd swipe api.on("item_change",function(num, data){ if (num = 3) { AdMob.showInterstitial(); alert("3rd swipe!"); }; });

But it's not triggering anything, not even the alert.

I declared the api variable in the unitegallery-options.js file (which is loaded with the gallery), outside the function, so it's global. I also replaced the first line of that file with api = jQuery("#gallery").unitegallery({ ... is that right?

[vvvmax]

Hi. The button has to be your button. api = ... - yes you right, but the api variable has to be visible globally, it can't be declared inside the document.ready() function.

Please show me the link where you put the code, I'll look.

On Sun, Aug 2, 2015 at 3:08 AM, jamminjames notifications@github.com wrote:

Sorry for the time lag... yes, I'm using Phone Gap Build, and the gallery is working.

I'm trying what you suggested above. However, reading at the link you gave, it says: Using the API call from the button:

But the gallery doesn't use input type="button" anywhere, so I don't understand where that line would go in the html. Can it be put in the div, like: <div id="gallery" value="Next Item" onclick="api.nextItem()" class="swipeimage" style="display:none;">

... I tried that, but it's not working.

I'm using admob, as I said, to display ads. In the script for that, I've included: // show ad on 3rd swipe api.on("item_change",function(num, data){ if (num = 3) { AdMob.showInterstitial(); alert("3rd swipe!"); }; });

But it's not triggering anything, not even the alert.

I declared the api variable in the unitegallery-options.js file (which is loaded with the gallery), outside the function, so it's global. I also replaced the first line of that file with api = jQuery("#gallery").unitegallery({ ... is that right?

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-126965589.

[jamminjames]

What if you have no button? I'll put it up somewhere soon for you to have a look at. Right now, it's just part of the app.

[vvvmax]

if you don't have a button you can trigger it from where you want. from a link or from window press, or from the timer :) The gallery has a function, you can call it whenever you want.

On Sun, Aug 2, 2015 at 12:35 PM, jamminjames notifications@github.com wrote:

What if you have no button? I'll put it up somewhere soon for you to have a look at. Right now, it's just part of the app.

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-127006351.

[jamminjames]

The api variable is declared outside the function, as you say. I'm trying a new tack, using the data-custom field. For one image, I have:

<img alt="caption here" data-custom="slide3" data-image="http://www.site.org/folder/image.jpg" />

Then, in the script, I have:

api.on("item_change",function(num, data){ if (data.custom = "slide3") { alert("3rd swipe!"); }; });

... with the alert set up just until I can get this working, to test. However, still nothing when I go thru the gallery. Shouldn't the alert be triggered when I get to the slide with the data.custom field? What am I doing wrong?

[vvvmax]

Hi. First please do alert outside the if, check if works. Then do console.log and check ehat inside the data var. then if you see your custom variable check the if but before add another = like ==

On Sunday, August 2, 2015, jamminjames notifications@github.com wrote:

The api variable is declared outside the function, as you say. I'm trying a new tack, using the data-custom field. For one image, I have:

Then, in the script, I have:

api.on("item_change",function(num, data){ if (data.custom = "slide3") { alert("3rd swipe!"); }; });

... with the alert set up just until I can get this working, to test. However, still nothing when I go thru the gallery. Shouldn't the alert be triggered when I get to the slide with the data.custom field? What am I doing wrong?

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-127061942.

[jamminjames]

Not sure what you're saying with the ehat, etc. Please check out the app, now at: http://www.humortimes.com/wp-content/mu-plugins/humortimes/cartoons.html

It's bringing up the alert as soon as it loads, but it should be only when it gets to the slide with the correct data.custom field. Script now looks like:

<script> `var api;

$(document).on("pagecreate", function() { api = jQuery("#gallery").unitegallery();

// show alert on 3rd swipe api.on("item_change",function(num, data){ if (data.custom = "slide3") { alert("3rd swipe!"); }; }); });`

</script>

[vvvmax]

Ill look at it tomorrow. Ehat is what :) typo. On Monday, August 3, 2015, jamminjames notifications@github.com wrote:

Not sure what you're saying with the ehat, etc. Please check out the app, now at: http://www.humortimes.com/wp-content/mu-plugins/humortimes/cartoons.html

It's bringing up the alert as soon as it loads, but it should be only when it gets to the slide with the correct data.custom field. Script now looks like:

``

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-127072850.

[jamminjames]

Okay, thanks. Don't know how to set up the console.log.

[jamminjames]

Not sure if I'm doing this right, but I replaced the alert with the console.log line (see below) in the if statement. Using Firefox's Inspect Element, it does seem to be returning "slide3" in the console. However, it seems to be looping, instead of waiting for me to swipe thru the gallery.

`var api;

$(document).on("pagecreate", function() { api = jQuery("#gallery").unitegallery();

// show alert on 3rd swipe api.on("item_change",function(num, data){ if (data.custom = "slide3") { console.log(data.custom); }; }); });`

[jamminjames]

Also, getting a "TypeError: objItem is undefined" error on every slide, referring to unitegallery.js:5162:6.

[vvvmax]

Hi. please delete the last item (the video), and try this code: api.on("item_change",function(num, data){ if (num == 2) { alert("third slide"); }; });

also, I can't teach you js coding. I suggest you to find some guy that will help you to build this page. The gallery is working fine, you just making a lot of syntax, attention and code mistakes.

On Mon, Aug 3, 2015 at 1:10 AM, jamminjames notifications@github.com wrote:

Also, getting a "TypeError: objItem is undefined" error on every slide, referring to unitegallery.js:5162:6.

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-127076544.

[jamminjames]

I replaced the code with yours, but it still seems to be just looping thru on it's own, the alert comes up after a few seconds on its own, without me paging through the gallery: http://www.humortimes.com/wp-content/mu-plugins/humortimes/Z_cartoons-test-data-custom.html

Yes, I am a bit of a newbie, but other than this bit of code, everything in the plugin seems to be working fine. Just can't figure out a way to trigger an event depending on which slide I'm on.

[vvvmax]

HI. first, please make the gallery work, then do the experements with the API. when the gallery not working many weird things may happend. the gallery not working on pagecreate event, it's working on document.ready event like in demos.

after the gallery will work, the api will work too.

On Mon, Aug 3, 2015 at 4:01 AM, jamminjames notifications@github.com wrote:

I replaced the code with yours, but it still seems to be just looping thru on it's own, the alert comes up after a few seconds on its own, without me paging through the gallery:

http://www.humortimes.com/wp-content/mu-plugins/humortimes/Z_cartoons-test-data-custom.html

Yes, I am a bit of a newbie, but other than this bit of code, everything in the plugin seems to be working fine. Just can't figure out a way to trigger an event depending on which slide I'm on.

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-127093043.

[jamminjames]

I really appreciate your patience and help with this, I'm sure the answer is close, but I still don't have it. By the way, I have to use pagecreate in the app, because that's how jquery.mobile does it. Other scripts work fine with it.

The gallery also has always worked fine without the api script, as you can see at http://www.humortimes.com/wp-content/mu-plugins/humortimes/cartoons-no-api.html. As soon as I put the script in, as you can see at http://www.humortimes.com/wp-content/mu-plugins/humortimes/cartoons.html, it seems to want to loop, and the alerts come up on their own without swiping, continually. Notice, if you hit the Ok button on the alert, it'll come up again on it's own in a short time. So, obviously, I'm doing something wrong, but I'm trying to follow your documentation.

The problem, I think, is sensing the swipe with your api. I can do it with jquery swipe, and it works on a desktop, but doesn't work in the app, I assume because the unitegallery js prevents that. Your suggestion of using the api.on("item_change",function(num, data){ function doesn't seem to be working by itself, because it loops without some way to sense each swipe, or slide change. Do you have anything in your api for that? Or can it be added?

Thanks again for your help. Once this is solved, I think your plugin will be awesome for mobile apps. If I can't figure it out, I'm going to have to find another image slider, but I really want to use yours because it allows for pinch zooming on the images.

[vvvmax]

Ill look closely at the evening and give you answer. If the gallery working the api has to work too

On Monday, August 3, 2015, jamminjames notifications@github.com wrote:

I really appreciate your patience and help with this, I'm sure the answer is close, but I still don't have it. By the way, I have to use pagecreate in the app, because that's how jquery.mobile does it. Other scripts work fine with it.

The gallery also has always worked fine without the api script, as you can see at http://www.humortimes.com/wp-content/mu-plugins/humortimes/cartoons-no-api.html. As soon as I put the script in, as you can see at http://www.humortimes.com/wp-content/mu-plugins/humortimes/cartoons.html, it seems to want to loop, and the alerts come up on their own without swiping, continually. And of course, the gallery isn't working with the script also. So, obviously, I'm doing something wrong, but I'm trying to follow your documentation.

The problem is sensing the swipe with your api. I can do it with jquery swipe, and it works on a desktop, but doesn't work in the app, I assume because the unitegallery js prevents that. Your suggestion of using the api.on("item_change",function(num, data){ function doesn't seem to be working by itself, as it loops, we need some way to sense each swipe. Do you have anything in your api for that? Or can it be added?

Thanks again for your help. Once this is solved, I think your plugin will be awesome for mobile apps. If I can't figure it out, I'm going to have to find another image slider, but I really want to use yours because it allows for pinch zooming on the images.

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-127166879.

[vvvmax]

Hi. Please take working example. I don't know what you did, and I don't want to compare, but my example is working.

On Mon, Aug 3, 2015 at 12:01 PM, maxim vendrov vvvmax@gmail.com wrote:

Ill look closely at the evening and give you answer. If the gallery working the api has to work too

On Monday, August 3, 2015, jamminjames notifications@github.com wrote:

I really appreciate your patience and help with this, I'm sure the answer is close, but I still don't have it. By the way, I have to use pagecreate in the app, because that's how jquery.mobile does it. Other scripts work fine with it.

The gallery also has always worked fine without the api script, as you can see at http://www.humortimes.com/wp-content/mu-plugins/humortimes/cartoons-no-api.html. As soon as I put the script in, as you can see at http://www.humortimes.com/wp-content/mu-plugins/humortimes/cartoons.html, it seems to want to loop, and the alerts come up on their own without swiping, continually. And of course, the gallery isn't working with the script also. So, obviously, I'm doing something wrong, but I'm trying to follow your documentation.

The problem is sensing the swipe with your api. I can do it with jquery swipe, and it works on a desktop, but doesn't work in the app, I assume because the unitegallery js prevents that. Your suggestion of using the api.on("item_change",function(num, data){ function doesn't seem to be working by itself, as it loops, we need some way to sense each swipe. Do you have anything in your api for that? Or can it be added?

Thanks again for your help. Once this is solved, I think your plugin will be awesome for mobile apps. If I can't figure it out, I'm going to have to find another image slider, but I really want to use yours because it allows for pinch zooming on the images.

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-127166879 .

[jamminjames]

An example that uses the api.on("item_change",function(num, data){ function (or some other method) to track the change of slides? Where is it?

[vvvmax]

I sent you file with this function in it. Did you see it?

On Tuesday, August 4, 2015, jamminjames notifications@github.com wrote:

An example that uses the api.on("item_change",function(num, data){ function (or some other method) to track the change of slides? Where is it?

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-127722813.

[jamminjames]

No, haven't received any emails from you.

[vvvmax]

Please check this emails chain. 2 emails before i sent you test.zip file. I see it un sent items. It mean that you got it :)

On Wednesday, August 5, 2015, jamminjames notifications@github.com wrote:

No, haven't received any emails from you.

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-127906514.

[vvvmax]

Oh. We are comunicating via github. It dont recoeve attachments :) please send me regular email vvvmax@gmail.com and ill send you the file

On Wednesday, August 5, 2015, maxim vendrov vvvmax@gmail.com wrote:

Please check this emails chain. 2 emails before i sent you test.zip file. I see it un sent items. It mean that you got it :)

On Wednesday, August 5, 2015, jamminjames <notifications@github.com javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

No, haven't received any emails from you.

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/14#issuecomment-127906514 .