PDA

View Full Version : CMotion gallery loop?



metblack85
02-26-2009, 04:35 PM
1) Script Title: Cmotion gallery

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

3) Describe problem: I was wondering if anyone knew how to make the last picture loop to the first picture in the gallery. I know someone posted a while ago how to do it with the FrogJS, but my company is interested in using the Cmotion JS.
thanks

metblack85
02-26-2009, 07:43 PM
bump?

jscheuer1
02-27-2009, 05:29 AM
I had that worked out for the previous version of Cmotion:

http://home.comcast.net/~jscheuer1/side/cmotion_continuous.htm

Perhaps it will be sufficient for your purposes. Use your browser's 'view source' to get the code.

metblack85
02-27-2009, 02:17 PM
thank you so much

pencil-of-death
03-03-2009, 12:22 AM
First I'd like to thank you, jscheuer1, for your ambition. Especially for me you're a reliable guide for the very hard first steps through the jungle of scripting.
Please excuse my written english, it's a bit out of use but I'll try hard to communicate the core of my problem :)

Relying on the OO_CMotion Image Gallery (http://www.dynamicdrive.com/forums/showpost.php?p=169194&postcount=5) which made it finally possible to implement two functioning galleries in an effective way, I'd like to know which code I have to add to use this script architecture with a loop, as mentioned above.

to put it in a nutshell: is there any possibility to combine the multiple gallery function of OO_CMotion Image Gallery and the carousel function of the CMotion Continuous Gallery?

jscheuer1
03-03-2009, 01:19 AM
I've a new project that should fit the bill:

http://home.comcast.net/~jscheuer1/side/thecrawl/

I'm still fine tuning it (just some minor issues with IE 8 and some legacy browsers). Let me know if you have any questions.

pencil-of-death
03-03-2009, 02:41 AM
Well, this masterpiece really works fine (besides some minor details I'll describe in the following).
Your new project gained a huge piece of usability due to the fact that editing .js files isn't necessary any longer (well, if you want to use it as intended ;))
But now the problems: if I set moveatleast to 0, the motion stops when the moise pointer hits a space between two images.
Furthermore the original version of the cmotion gallery offered a inverted navigation which really simplified to "catch" a specific image.
In the thecrawl.js I searched for some values responsible for left and right, just to swap them, but couldn't find it so far.

jscheuer1
03-03-2009, 04:23 AM
I just updated the demo page and more importantly, the script. Only minor modifications, but they take care of the two problems I was having that I mentioned in my previous post and the left/right 'nav' bit you mention (which is a good idea, thanks), so you should clear your cache, go back to the demo page and download the script again.

You shouldn't set moveatleast to 0, that's the same as not specifying it, unless you happened to quote the value, in which case all sorts of odd things might happen. I did have some problems earlier with the marquee stopping when the mouse moved over a space, but had fixed them. However, if you want moveatleast 0, just don't specify it. If you still have the problem of the marquee stopping on spaces between images, let me know which browser and give me a link to a demo of the problem.

pencil-of-death
03-03-2009, 10:51 AM
As far as I can rate it, this update has really increased the usability of the gallery. Anything to oblige if I'm able to make a suggestion.

I've uploaded a demo (http://pascalpagel.de/bjoern/gallery_test/carousel_gallery_test.html) containing two crawlers : the first one with a configuration as intended and the other underneath as I'd like to use (static and just moving when the user operates).
Two stumbling blocks: the modifie one starts with an initial speed equal to the value of inc, furthermore the marquee stops between spaces as mentioned. I primarily use Firefox 3.0.6. I already detected that the IE7 doesn't show the second problem.

Edit: I've found an additional issue: rollover or swapImage actions reffering to gallery images aren't functioning at the moment. Is this intended or even possible to patch?

jscheuer1
03-03-2009, 11:52 AM
Ah, I see the trouble. By the time I got around to testing for that problem, I somehow had left out marquees that didn't continue to move onmouseout. Anyways, all fixed. Clear your cache again and download the script again.

BTW, if the marquee is stopping on mouse out, both moveatleast and savedirection are meaningless. Also, if there is no background color, just skip it:


<script type="text/javascript">
marqueeInit({
uniqueid: 'art2',
direction: 'right',
style: { //style object for this marquee container (use quotes on both sides of the : as shown)
'width': '60%',
'height': '140px',
'border': '0px solid #111',
'margin': '0 auto'},
inc: 10, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven' //mouseover behavior ('pause' 'cursor driven' or false)
});
</script>

pencil-of-death
03-03-2009, 03:30 PM
A big thank so far! One issue solved.
But please allow me one question of a private nature: how do you find time to earn money while performing so much assistance in this forum? I guess I should consider a certain donation ;)

at long last: what about the possibility to avoid the gallery from rotating by itself when the page is loaded?
And why does the gallery ignore swapImage or rollover image effects?
I used both options in this demo (http://pascalpagel.de/bjoern/gallery_test/carousel_gallery_test.html#). When the mouse hovers over a blurred image, it should turn into a sharpened.
Many thanks in advance!

jscheuer1
03-03-2009, 04:32 PM
The MM_swapImage you have is an outdated image swapping script. It breaks down here at least because the The Crawl must duplicate the contents of the marquee in order for it to scroll continuously. As a result, when it looks for the images by name as specified, it finds two and doesn't know which to change. If you do like so:


<div class="marquee" id="art1">
<img src="portfolio_sea_01_thumb_blur.jpg" alt="" onmouseover="this.src='portfolio_sea_01_thumb.jpg';" onmouseout="this.src='portfolio_sea_01_thumb_blur.jpg';"> <img src="portfolio_sea_02_thumb_blur.jpg" alt="" border="0" onmouseover="this.src='portfolio_sea_02_thumb.jpg';" onmouseout="this.src='portfolio_sea_02_thumb_blur.jpg';"> <a href="#"><img src="portfolio_sea_10_thumb_blur.jpg" onmouseout="this.src='portfolio_sea_10_thumb_blur.jpg';" onmouseover="this.src='portfolio_sea_10_thumb.jpg';" width="150" height="101" border="0" /></a></div>

It will work. You should keep MM_preloadImages or use another image preloading function to preload your rollovers. Also, I notice that you have a trailing comma here (red):


marqueeInit({
uniqueid: 'art1',
direction: 'right',
style: { //style object for this marquee container (use quotes on both sides of the : as shown)
'width': '100%',
'height': '101px',
'background-color': '',
'border': '0px solid #111',
'margin': '0 auto'},
inc: 10, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
});

That will cause an error in IE, other browser may error correct for it, FF 3 is one that will.

To get the marquee to start stopped, add stopped to the init (I've replaced direction: 'right' with it here because if you start stopped, the initial direction property is meaningless):


marqueeInit({
uniqueid: 'art1',
stopped: true,
style: { //style object for this marquee container (use quotes on both sides of the : as shown)
'width': '100%',
'height': '101px',
'border': '0px solid #111',
'margin': '0 auto'},
inc: 10, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven' //mouseover behavior ('pause' 'cursor driven' or false)
});

I've updated the script again, you don't need it for this, but it loads up better when there is other content on the page, less jumpy.

I always accept donations, you may click on my PayPal link at the bottom of my post.

pencil-of-death
03-03-2009, 07:38 PM
Finally, concerning this thread, I have to thank you again. The script works as intended.
Wish you success for your following projects!

metblack85
03-06-2009, 04:15 PM
JScheuer,

Your code is awesome and has really helped, but I do have a minor question that you may or may not know the answer to:

On some PCs (not mine, but a few other people). When the page loads with the code for the gallery in it, the gallery is partially hidden (or right aligned?) for 1/2 a second, and then after mouse movement, it fixes itself.

http://cwby3.as3gs.servertrust.com/

If you have a second, and its not too much of a bother, could you let me know if you've ever heard of an issue like this before? Thanks.

--Metblack85

jscheuer1
03-06-2009, 04:56 PM
I've upgraded the script again. I was noticing that there was still more jumpiness while loading than I wanted. Try the newer version, see if that fixes it. The gallery will now remain completely invisible until properly positioned, and its vertical layout space should be established immediately. The combination of these two upgrades should eliminate what you are talking about.

pencil-of-death
03-10-2009, 09:23 PM
Hi John, it's me again with a little issue which refers to my previous posts.
You gave me the advice to use the event handler onmouseover="this.src='portfolio_sea_01_thumb.jpg'; for swapping images.

What, and this is the problem now, if I want to change several images with just one mouseover event handler?
In a function I tried to define a variable for every single image but, for example, onmouseover="image1.src='...' didn't work.

To explain my request: I simply want the whole galery appear sharpened when the mouse pointer hovers over it.

Here is the currentdemo (http://pascalpagel.de/bjoern/gallery_test/index).

jscheuer1
03-11-2009, 01:54 AM
That's a bit complicated. I've made up a demo:

http://home.comcast.net/~jscheuer1/side/swap_h.htm

Use the updated script (use your browser's 'view source' to get the code). You may make it external again if you like - probably a good idea as long as you don't make any mistakes in doing so. It will still work normally for other marquees without their swapimage property set to true.

Now, this depends upon your using the current naming convention you already are using for the images, where the sharp image is in the same location as the blurred image - the only difference being that the blurred image has _blur added to its filename.

Also, I've updated these sections:


<div class="marquee" id="portfolio1">
<a rel="lightbox" title="Test" href="portfolio/sea/portfolio_sea_01.jpg"><img src="portfolio/sea/portfolio_sea_01_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sea/portfolio_sea_02.jpg"><img src="portfolio/sea/portfolio_sea_02_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sea/portfolio_sea_03.jpg"><img src="portfolio/sea/portfolio_sea_03_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sea/portfolio_sea_04.jpg"><img src="portfolio/sea/portfolio_sea_04_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sea/portfolio_sea_05.jpg"><img src="portfolio/sea/portfolio_sea_05_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sea/portfolio_sea_06.jpg"><img src="portfolio/sea/portfolio_sea_06_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sea/portfolio_sea_07.jpg"><img src="portfolio/sea/portfolio_sea_07_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sea/portfolio_sea_08.jpg"><img src="portfolio/sea/portfolio_sea_08_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sea/portfolio_sea_09.jpg"><img src="portfolio/sea/portfolio_sea_09_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sea/portfolio_sea_10.jpg"><img src="portfolio/sea/portfolio_sea_10_thumb_blur.jpg" alt="" border="0"/></a></div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'portfolio1',
stopped: true,
swapimages: true,
style: { //style object for this marquee container (use quotes on both sides of the : as shown)
'width': '700px',
'height': '101px',
'margin': '0 auto'},
inc: 15, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven' //mouseover behavior ('pause' 'cursor driven' or false)
});
</script>

and:


<div class="marquee" id="portfolio2">
<a rel="lightbox" title="Test" href="portfolio/sirens/portfolio_sirens_01.jpg"><img src="portfolio/sirens/portfolio_sirens_01_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sirens/portfolio_sirens_02.jpg"><img src="portfolio/sirens/portfolio_sirens_02_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sirens/portfolio_sirens_03.jpg"><img src="portfolio/sirens/portfolio_sirens_03_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sirens/portfolio_sirens_01.jpg"><img src="portfolio/sirens/portfolio_sirens_01_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sirens/portfolio_sirens_02.jpg"><img src="portfolio/sirens/portfolio_sirens_02_thumb_blur.jpg" alt="" border="0"/></a>
<a rel="lightbox" title="Test" href="portfolio/sirens/portfolio_sirens_03.jpg"><img src="portfolio/sirens/portfolio_sirens_03_thumb_blur.jpg" alt="" border="0"/></a></div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'portfolio2',
stopped: true,
swapimages: true,
style: { //style object for this marquee container (use quotes on both sides of the : as shown)
'width': '700px',
'height': '101px',
'margin': '0 auto'},
inc: 15, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven' //mouseover behavior ('pause' 'cursor driven' or false)
});
</script>

You must also update those. Or just copy the page's source code. You can get rid of this:


<base href="http://pascalpagel.de/bjoern/gallery_test/" />

from near the top of the page, it is only required so that I may easily use your other resource files for my demo without either copying them or linking directly to them. And, as I say, you may make my script external again.

pencil-of-death
03-11-2009, 08:45 PM
Great, it works fine and I also made the script function external.
Maybe it was the last question of this kind, but never say never ;)

Niturc
01-21-2011, 07:53 PM
Great script, but this is driving me crazy... I got it to work on my test site both on and offline. Then I changed the folder where the images were located or did something else I'm not aware of to mess it up and now it refuses to display whether I'm just testing it on my desktop or online on any browser... The images display fine when I type their location into the url, but the scrolling gallery refuses to display any images no matter how I try to link them. What's going on here? Link to test site here: http://tinyurl.com/4aonngc

azoomer
01-21-2011, 08:18 PM
If you fix the paths to the images I think it will work.
Image 009.jpg is not found and the paths with 3 periods in the beginning do not work
Try something like this:


<img src="../rotating/001.jpg" width="135" height="110" />
<img src="../lightboxv5/rotating/002.jpg" width="135" height="110" />
<img src="../rotating/003.jpg" width="135" height="110" />
<img src="../lightboxv5/rotating/004.jpg" width="135" height="110" />
<img src="http://nitruc.com/lightboxv5/rotating/005.jpg" width="135" height="110" />
<img src="http://nitruc.com/lightboxv5/rotating/006.jpg" width="135" height="110" />
<img src="http://nitruc.com/lightboxv5/rotating/007.jpg" width="135" height="110" />
<img src="http://nitruc.com/lightboxv5/rotating/008.jpg" width="135" height="110" />

Niturc
01-21-2011, 09:06 PM
ahh thank's azoomer, was late last night and I didn't even realize that I had an extra image that didn't exist. Turns out that extra 009 image that wasn't on the server was causing the whole script to not function... strange, but removing that fixed the problem. :)

GCP
02-26-2011, 07:54 AM
jscheuer1,

I love your cmotion loop! It is what I was looking for. Thank you so much for the code and your generosity for allowing people to use your code.

The one problem I have is the location of the cmotion loop. It seem the cmotion slideshow stays in one position, as the browser screen changes in size (mostly width). Please go to my site: www.gregorychong.com/landscape.html (http://www.gregorychong.com/landscape.html), to see what I am talking (writing) about, and drag the browser window to be smaller and larger. See how if the browser window is almost at max width, my cmotion slideshow is the width of my webpage? But when the browser isn't at full width of the monitor screen, the cmotion slideshow seems to be aligned to the right. I'd love the cmotion slideshow to be the entire width of my webpage (~980 pixels) and locked to the "background." I would like to know what I need to change in my coding or in the cmotion.css or javascript file in order to lock it to one position regardless of the browser window size.

I am a beginner webdesigner and I'd love to learn, but I am stuck.

Thanks in advanced for any help you can provide. I really appreciate it very much.

Greg Chong

azoomer
02-26-2011, 06:29 PM
in the cmotion.css you now have this


#motioncontainer
{
vertical-align: middle;
horizontal-align: center;
left: 371px;
/*top: 315px;*/
}


try instead changing it to this


#motioncontainer {
left: 50%;
margin-left: -490px;
vertical-align: middle;
}

edit: wonderful images, by the way

GCP
02-26-2011, 08:11 PM
Thank you, Thank you, Thank you, Thank you, Thank you,!!!!

Thanks also for you kind comment on my pictures!

Greg Chong

mackin74
05-27-2011, 09:08 PM
I hate to revive an old thread, but I am looking for some help getting the script I am using to loop.

I'm aware of the feature on this page (http://home.comcast.net/~jscheuer1/side/cmotion_continuous.htm) but I can't simply copy from the source code of this page because the script I am using is the one that's modified to run vertically.

Here is what I am currently using:



/***********************************************
* CMotion Image Gallery II- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Modified by jscheuer1 for vertical orientation, at http://www.dynamicDrive.com/forums
***********************************************/

var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
var maxspeed=5 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var endofgallerymsg="" //3) message to show at end of gallery. Enter "" to disable message.

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "900px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var scrollspeed=0
var movestate=""

var actualheight=''
var cross_scroll
var loadedyes=0

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function creatediv(){
statusdiv=document.createElement("div")
statusdiv.setAttribute("id","statusdiv")
document.body.appendChild(statusdiv)
statusdiv=document.getElementById("statusdiv")
statusdiv.innerHTML=endofgallerymsg
}

function positiondiv(){
menuwidth=parseInt(crossmain.offsetWidth)
mainobjoffsetW=getposOffset(crossmain, "left")
statusdiv.style.left=mainobjoffsetW+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px"
statusdiv.style.top=menu_height+mainobjoffset+10+"px"
}

function showhidediv(what){
if (endofgallerymsg!="")
statusdiv.style.visibility=what
}

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function moveup(){
if (loadedyes){
movestate="up"
if (iedom&&parseInt(cross_scroll.style.top)>(menu_height-actualheight)){
cross_scroll.style.top=parseInt(cross_scroll.style.top)-scrollspeed+"px"
showhidediv("hidden")
}
else
showhidediv("visible")
}
uptime=setTimeout("moveup()",10)
}

function movedown(){
if (loadedyes){
movestate="down"
if (iedom&&parseInt(cross_scroll.style.top)<0){
cross_scroll.style.top=parseInt(cross_scroll.style.top)+scrollspeed+"px"
showhidediv("hidden")
}
else
showhidediv("visible")
}
downtime=setTimeout("movedown()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientY : e.clientY? e.clientY: ""
curposy-=mainobjoffset-dsocy
var leftbound=(menu_height-restarea)/2
var rightbound=(menu_height+restarea)/2
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menu_height-restarea)/2) * maxspeed
if (window.downtime) clearTimeout(downtime)
if (movestate!="up") moveup()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menu_height-restarea)/2) * maxspeed
if (window.uptime) clearTimeout(uptime)
if (movestate!="down") movedown()
}
else
scrollspeed=0
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
if (window.downtime) clearTimeout(downtime)
if (window.uptime) clearTimeout(uptime)
movestate=""
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_height=parseInt(crossmain.style.height)
mainobjoffset=getposOffset(crossmain, "top")
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
actualheight=cross_scroll.offsetHeight

crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
scrollspeed=1
showhidediv("hidden")
}
}
if (window.opera){
cross_scroll.style.top=menu_height-actualheight+'px'
setTimeout('cross_scroll.style.top=0', 10)
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv()
positiondiv()
}
scrollspeed=1
moveup()
}


Any help would be greatly appreciated!

mackin74
06-18-2011, 08:54 PM
Just wondering if anyone could give me hand regarding my above post...