PDA

View Full Version : Cmotion with Lighbox



Raymonet
06-03-2019, 09:47 PM
1) Script Title: CMotion Image Gallery

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex4/cmotiongallery.htm

3) Describe problem:

Hi:

I'm using a variation of CMotion Image Gallery in this site:

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

As you can see, it works properly.

Below in the same site, there is a table that uses Lightbox to display images.

My problem is that I want use the CMotion script in combination with Lightbox. I mean, when I click on an image of CMotion I would like it runs Lightbox intead of opening new windows.

As you can see, the code for the CMotion for the first image is:


<a href="#"><img src="mubag/1Autorretratob.jpg" border=1 onClick="MM_openBrWindow('mubag/cat1.htm','Cat1','scrollbars=yes,resizable=yes,width=wd,height=ht,left=0,top=0')" width="171" height="235" alt="Autorretrato"></a>


I have tried to implement this code for Lightbox substituing a href="#" for the image location:


<a href="mubag/1Autorretrato.jpg" rel="lightbox[mubag]"><img src="mubag/1Autorretratob.jpg" border=1 onClick="MM_openBrWindow('mubag/cat1.htm','Cat1','scrollbars=yes,resizable=yes,width=wd,height=ht,left=0,top=0')" width="171" height="235" alt="Autorretrato"></a>

It doesn't work because two equal images are loaded in the "rel" of the Lightbox.

Thanks for any ideas.

keyboard
06-27-2019, 05:47 AM
Good afternoon Raymonet.
I don't have experience using either CMotion or Lightbox but I can take a look. Unfortunately the link you provided isn't resolving for me (pintor(...).com).
Do you have another example page or something?

keyboard

Raymonet
07-18-2019, 03:08 PM
Good afternoon Raymonet.
I don't have experience using either CMotion or Lightbox but I can take a look. Unfortunately the link you provided isn't resolving for me (pintor(...).com).
Do you have another example page or something?

keyboard

Thanks Keyboard:

Do you mean that you can't see http://www.pintorcastanyer.com/MUBAG.htm ?

This link is fully operational. It is is a section called MUBAG (Alicante) in the left menu of:
http://www.pintorcastanyer.com/


Finally I have given up the use of lightbox with Cmotion. I use it in the normal way to open the images with onClick="MM_openBrWindow('.... as you can see in the code.


Now I'm interested in a more difficult task: At the end of this link:

http://www.dynamicdrive.com/forums/showthread.php?77039-CMotion-Image-Gallery-works-with-mouse-not-with-touchscreen

I have found a modified version of Cmotion that tries to be functional for touchscreens made by ddadmin in 09-02-2015, 08:29 PM.

You can find the current version of css and js that I'm using:

http://www.pintorcastanyer.com/mubag/gallerystyle.css
http://www.pintorcastanyer.com/mubag/motiongallery.js

It works fine for PC but for touchscreen I'm not capable to stop the carousel moving to left. This movig to left is interesting because I shows the carousel is able to move for someone that doesn't know about carousel function. I think the left movement is started by this part of the code:

scrollspeed=1
moveleft()
}

at the end of the function fillup()

But it doesn't work properly for mobile touchscreens. Thas't because the code crossmain.onmouseout=function(e){ doesn't work properly for touchscreens.

Perhaps it is necessary to find an equivalent of onmouseout for touchscreens.

Any ideas would be welcome,

Thanks

styxlawyer
07-18-2019, 10:59 PM
Although this page (https://www.html5rocks.com/en/mobile/touchandmouse/) is more than six years old, it has a really comprehensive explanation of the relationship between mouse events and touchscreen events.

Raymonet
07-19-2019, 11:41 PM
Although this page (https://www.html5rocks.com/en/mobile/touchandmouse/) is more than six years old, it has a really comprehensive explanation of the relationship between mouse events and touchscreen events.

Thanks a lot. The link seems very interesting but it is too complex for me. I'm not computer programmer and I don't know too much about HTML.

In the case of the CMotion version that I have found and Im using it in my web site, the problem is that I like the carousel stars moving to the left on page load. This movement is easily stopped with the mouse but, because the way this Cmotion version is programmed, it doesn't stop moving to the left when a touchscreen is used.

I have verified that when a touchscreen is used in Chrome browser in a PC (Windows), it appears a scrollbar under the carousel. Then it is easier to move the carousel in both sense but in android this scrollbar doesn't appear.

The problem would be solved if I don't use moveleft() function when onload page but, as I said before, this left movement is useful to see the Cmotion functionality as a first glance. Perhaps it would a good idea to move to the left but only for 10 seconds, for example, and then it would stop on its own.