CMotion Image Gallery works with mouse, not with touchscreen

1) Script Title: CMotion Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iongallery.htm

3) Describe problem: Title pretty much says it all. Using a mouse and a traditional computer monitor, this script performs exactly as intended: hover over the strip, and images slowly (or quickly, depending on where you hold the mouse) scroll in the proper direction. Use your finger on a touchscreen (Samsung CY-TM55LCC - 55” Touch Overlay on a Samsung 55" monitor) in the same fashion, and nothing happens. The more traditional scrollbars respond to the touch as expected on this touchscreen, but aren't a desirable option for what I'm trying to do. Any suggestions would be greatly appreciated!

Cheers,

Alan

To make this script mobile friendly, the easiest way is probably just to add some basic swipe functionality to it. I'll try to get to that in the next few days...

I've added swipe capability to the carousel- all of the files have been changed- .js, .css, and the markup: http://www.dynamicdrive.com/dynamici...iongallery.htm

Cool, can't wait to try it out (won't have access to the touchscreen for a couple of days)!

Thanks! Alan

Quote:

---

Originally Posted by aharvey

Cool, can't wait to try it out (won't have access to the touchscreen for a couple of days)!

Thanks! Alan

---

Hmm, realized that I could try it out on my iPad in the meantime. So my original page combined the CMotion Image Gallery with the Facebox script. Both features worked great together on my Mac; on the touchscreen and iPad (just confirmed) the CMIG did not work, but the Facebox part did. I replaced all the CMIG files and markup as instructed, with each image line as follows:

<li><a href="#lbeati" rel="facebox"><img src="images/beati_th.jpg" border=1></a></li>

meaning I removed the OnClick bit. This still works fine on the Mac, and the CMIG part works great on my iPad, but now the Facebox part is not working. That is, tapping on each image no longer brings up the Facebox. In comparing the two js files, I don't see any duplicate variable names, and am not sure why Facebox no longer works on the tablet. Any suggestions would be most appreciated!

By the way, the enlargeimage option in the new CMIG is probaby not a good option for our new touchscreen setup, because I'm trying to avoid opening new browser windows if at all possible.

Thanks!

Alan

Ah ok I can confirm onClick events no longer fire in touch devices inside the carousel with the latest update. I haven't found a quick fix for the problem yet; I'll see what I can come up with before the end of the week.

Excellent, thanks very much!

Uh oh, I'm starting to worry that it's not an easy task to incorporate both click and swipe in the same javascript! So far I haven't found any other examples of both being used at the same time.

Quote:

---

Originally Posted by aharvey

Uh oh, I'm starting to worry that it's not an easy task to incorporate both click and swipe in the same javascript! So far I haven't found any other examples of both being used at the same time.

---

Did anyone solve the problem or find another solution?

Ok, try the below modified motiongallery.js file. It takes a very different approach to scolling in touch devices, by simply enabling overflowing in those devices. The result is smoother scrolling, less code, and links that work. Let me know if there are any issues.

Hello:

I have found this old post and I have found it very interesting because I'm using Cmotion for years. Now I'm trying to make responsive a web site to touchscreen. Concretely, in this site:
http://www.pintorcastanyer.com/

I use Cmotion here:

http://www.pintorcastanyer.com/Circul.htm

The motiongallery.js version used is that of the last post above. There are slightly modifications, for example, Cmotion starts moving left when page is loaded (I think this is useful and sefl-explanatory for the Cmotion functionality). It works fine when mouse is used (in PCs) and also for touchscreens (in mobiles) but in this case the Cmotion needs to be at rest at startup (it is necessary to remove the moveleft() function the end of fillup() function.

My question is how to stop Cmotion moving to the left in a touchscreen and how to return to the starting point at the original right-most position. It seems the container is resized the the current position and not to the right-most position.

Any ideas would be welcome.

Thanks in advance.

Hi again:

I think I have resolved at least partially. Now Cmotion moves to the left at start up and I've made that it returns to the right after 6 seconds. In this way the scrolling functionality a Cmotion is shown to the site visitor.

There is still a little problem because the message "End of gallery" is not shown when a touchscreen is used. I think this is a problem in the original "ddadmin" code I took from this threat.

I will see if I'm capable to resolve it.

Thanks again.