Looped Cmotion gallery

[2_k]

1) Script Title: Cmotion Gallery

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

3) Describe problem: Is there any way to make the gallery looped?

[jscheuer1]

See:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/jq_imagemotion.htm

The scroller(s) can be horizontal or vertical, mouse activated (like Cmotion) or regular scrolling marquees. They are continuous. The controls shown need not be used, or only some of them may be used. The controls used may be links or images instead of standard buttons, or a mixture of these, and be placed anywhere on the page you like. The tied in Lightbox is entirely optional.

If you are interested, download:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/jq_imagemotion.zip

Play around with it. If you have any questions, feel free to ask.

[2_k]

Looks like is that what i need, thank you. But, is there any way to adjust "slider.width" in percents(%)??! Cos it's one of the main reasons for me, to use cmotion, which allowed it.

[jscheuer1]

I had designed that adaptation (% widths) to Cmotion, which was originally coded by DD. However, it's not as great an idea as you might think (or as I thought at the time). With screens getting wider and wider, there is always a chance you may run out of images.

There is however (only for horizontal displays):

http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

It can do this percent thing, and if it runs out of images, it shrinks. Buttons can be made for it, but the process is a little more complex than with the other script.

[2_k]

Yeah, this one works allmost fine for me(for now), thx, exept one thing. I use this code for hover effect for every image in gallery:

onmouseover="document.getElementById('').style.display = 'block';"
onmouseout="document.getElementById('').style.display = 'none';"

When i load the page, it works fine, but when the loop starts , this code stop works.
Can i fixed it somehow?

[jscheuer1]

That code doesn't do anything at any time.

[2_k]

This code show the div when the mouse moveover the image in gallery. And its works before loop.
Here is a full example of code:


<div class="marquee" id="mycrawler2">

<a href="/img/" onmouseover="document.getElementById('details').style.display = 'block';" onmouseout="document.getElementById('details').style.display = 'none';" class="linm2" ><span class="des-menu" style=" margin-left: 0px; "><div id="details"/>texthere</span><img src="/img/1.jpg" alt="" /></a>
...

Maby any ideas, why it won't work when the gallery "scrolled over loop"?
Hope my explain understandble.

[jscheuer1]

It's invalid HTML for one, so no matter what we do it might not work. What happens (more or less) when crawler initializes is that it clones the 'train' (the stuff that loops) so that it can show part of one of these two trains, while the other one is exiting the viewing area and no longer occupies the entire viewing area.

When you clone something, if it's invalid, results may be unexpected. However, let's assume for the moment that isn't a problem. There's another probem. Now (because of the cloning, assuming the invalid div tag and other invalid code got cloned) you have two div elements with an id of "details". In javascript, when the browser looks for an element by its id, if it finds more than one, it either picks the first one on the page (most browsers), or gives up and throws an error (IE, perhaps some others).

Assuming everything survived the cloning and appears more or less as written/intended to the browser, one could do:


<a href="/img/" onmouseover="this.getElementsByTagName('div')[0].style.display = 'block';"
onmouseout="this.getElementsByTagName('div')[0].style.display = 'none';"
class="linm2"><span class="des-menu"
style=" margin-left: 0px;"><div id="details"/>texthere</span><img src="/img/1.jpg" alt="" /></a>

To make this all valid code, one could:


<a href="/img/" onmouseover="this.getElementsByTagName('span')[1].style.display = 'block';"
onmouseout="this.getElementsByTagName('span')[1].style.display = 'none';"
class="linm2"><span class="des-menu"
style="margin-left: 0px;"><span>texthere</span></span><img src="/img/1.jpg" alt=""></a>

But, in any case, clicking on the link might be an adventure.

[2_k]

Ok, thank you for reply and explain. So, want to ask one more quastion about this (code above). is this possible to make similar onmoseover effect on every image? So its work fine in that scroller with loops?
My target is: When hover over every image appears another little image with words on it(click for more details- for example).

Hope not bothered you much.=)

[jscheuer1]

No bother really. If it works for one, it will work for all. Experiment. If you want more help though for this particular issue, it would be easiest if you posted a link to the page:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[2_k]

Ok, here is the example: http://ll_k.my3space.ru/, its ugly but understandble. The problem is, like i said before - hover images(man in suit in example). Its not appear after loop starts.

[jscheuer1]

It's like I said, and in this case the invalid markup (now partially fixed in you live demo, the div tag is now properly closed, it's still a block level element within inline elements) doesn't seem to be a big issue as far as scripting this goes. So, this much:


<a href="/section/works/" onmouseover="this.getElementsByTagName('div')[0].style.display = 'block';"
onmouseout="this.getElementsByTagName('div')[0].style.display = 'none';" class="linm2" >
<span class="des-menu2" style=" margin-top: -150px; height:100%; " ><div id="details"></div>text1</span>
<img src="/img/b.jpg" alt="" /></a>


<a href="/section/works/" onmouseover="this.getElementsByTagName('div')[0].style.display = 'block';"
onmouseout="this.getElementsByTagName('div')[0].style.display = 'none';" class="linm2" >
<span class="des-menu2" style=" margin-top: -150px; height:100%; " ><div id="details2"></div>text2</span>
<img src="/img/b.jpg" alt="" /></a>

<a href="/section/works/" onmouseover="this.getElementsByTagName('div')[0].style.display = 'block';"
onmouseout="this.getElementsByTagName('div')[0].style.display = 'none';" class="linm2" >
<span class="des-menu2" style=" margin-top: -150px; height:100%; " ><div id="details3"></div>text3</span>

<img src="/img/b.jpg" alt="" /></a>

will get it working more or less.

[2_k]

Works fine for now, thx. Found one more detail in this scroller, when the mouse is in the left(or right) side of the screen and free positioned (don't move), but the scroller moves - the scroller not react at the mouse(links, hovers). It start react only when mouse is moving.
Can it be fixed somehow?

[jscheuer1]

I noticed that too, in IE and Chrome. Seems OK in Firefox. The entire layout inside the crawler is messed up in Opera. It (what you observed) may have to do with event bubbling, but since it also happens in Chrome (whose event model is more standard) I would tend to doubt that. So I would focus on the markup. There probably is no easy solution. The markup should be changed from XHTML, which introduces its own complications in some browsers, to HTML 4.01 strict, or transitional. Then it and the styles should be validated to that standard. Even so, a different way of imagining the markup and/or css used by it inside the crawler may be required. It's also possible that a way (via javascript) may need to be found to determine where the mouse is over the document and compare this to where your trigger links are in relation to that.

[2_k]

it's clear. I try to use another script which called fullajax with that scroller. Its can preloading some html content in div and using browser history. So,first i preload content up to scroller, then go back to page where the scroller is(using browser history or back button). And the scroller don't work. I contacted to the author of the fullajax, and he said that the problem in this scroller gallery. Precisely, when the gallery activated, element with id=mycrawler2 is disappears. Namely, when i go back to page where the scroller is, the script cant find id=mycrawler2, so the gallery wont work.
You can see the example http://ll_k.my3space.ru/ by click on PODGRUZKA link and than go back - the scroller will not move. Is there any way to fix that problem?


...
marqueeInit({
uniqueid: 'mycrawler2',
...


ps: sry for my bad english.

[jscheuer1]

I know the author of the other script probably thinks his script is perfect or very good, and it may well be, and that any problems are with other scripts. But that (the problem always being with other scripts) is almost never true. I'm not convinced that (what the other author stated) is the problem, though it could be. AJAX introduces many challenges for other scripts. Unlike many scripts that will be completely broken by AJAX, crawler will work when its content is imported via AJAX and then initialized. But if you are importing the content of crawler after it is initialized and then trying to initialize it again, no that won't work. Many scripts would have this problem, so it is a toss up as to whether it is the crawler script or the AJAX script. I'd characterize it more as the two scripts just don't work together, though some way might be able to be found. I'd have to see a live demo of the problem.

[2_k]

...I'd have to see a live demo of the problem. Here is the demo: http://ll_k.my3space.ru/ . Pity its can be not compatible.
Another quastion. When i used the cmotion gallery there was an opportunity to add arrows(images) to the left and right side of the gallery. Is that possible in crawler?

[jscheuer1]

It's not clear what's wrong. I don't understand Russian, so I'm not sure what it's supposed to do or how it's trying to do it. I will look into it further though.

To have a left and right arrow, let's start by adding this to your init (we can tweak things later if we want to):


marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '0px',
'width': '800px',
'height': '700px'
},
inc: 20,
mouse: 'cursor driven', //('pause' 'cursor driven' or false)
moveatleast: -0,
direction: 'right',
stopped: true,
addDelay: 0,
neutral: 250,
savedirection: true,
leftRight: function (dir){
this.inc = 6;
this.direction = dir;
return (this.stopped = false);
}

});

Now you can have arrows (this can also be tweaked later if we want to):


<a href="#" onclick="return marqueeInit.ar[0].leftRight('left');"><img src="leftarrow.gif" alt="left"></a>
<a href="#" onclick="return marqueeInit.ar[0].leftRight('right');"><img src="rightarrow.gif" alt="right"></a>

[jscheuer1]

There is another script that might work with fullajax:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/jq_imagemotion.htm

The element with the id remains. So that can't be a problem. However, if fullajax is reading the page as it is after the script runs, there could still be a problem, just as there would be with many scripts. The fullajax claims to run scripts on pages, and I'm sure it does some. But these galleries are very sophisticated scripts. Also, if you could have fullajax go back to the original page to fetch the content (rather than to some image of the DOM of the page), you might have better luck.

[2_k]

Now you can have arrows (this can also be tweaked later if we want to):


<a href="#" onclick="return marqueeInit.ar[0].leftRight('left');"><img src="leftarrow.gif" alt="left"></a>
<a href="#" onclick="return marqueeInit.ar[0].leftRight('right');"><img src="rightarrow.gif" alt="right"></a>

Is there way to place this arrows on top of the crawler, so the crawler is react throughout it on mouse? Basicly the arrows need just to show how the gallery works.

[jscheuer1]

You can put them anywhere you like. And, as I said, we can tweak both the markup and our function. This gives an interesting effect:


marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '0px',
'width': '800px',
'height': '700px'
},
inc: 20,
mouse: 'cursor driven', //('pause' 'cursor driven' or false)
moveatleast: -0,
direction: 'right',
stopped: true,
addDelay: 0,
neutral: 250,
savedirection: true,
leftRight: function (dir){
clearTimeout(this.setup.timer);
this.inc = 8;
this.direction = dir;
return (this.stopped = false);
}

});

And for arrows:


<img onmouseout="marqueeInit.ar[0].setup.slowdeath();" onmouseover="marqueeInit.ar[0].leftRight('left');" src="leftarrow.gif" alt="<<">
<img onmouseout="marqueeInit.ar[0].setup.slowdeath();" onmouseover="marqueeInit.ar[0].leftRight('right');" src="rightarrow.gif" alt=">>">

[2_k]

Strange thing, but i can't put them upper then gallery, I use transparent gif arrows which i wont to be on the top of the gallery, but the result - arrows restrict a gallery space.
any ideas?

[jscheuer1]

Try this out:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>Text and/or Image Crawler - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="http://home.comcast.net/~jscheuer1/side/thecrawl/">
<style type="text/css">
body {
color: #111;
background-color: #cdf;
}
h2 span {
font-size: smaller;
font-weight: normal;
}
.marquee0 img {
border: 1px solid #111;
}
#crawler1 {
position: relative;
max-width: 60%;
margin: 2em auto 0 auto;
}
.dir {
position: absolute;
top: 13px;
color: red;
background-color: transparent;
border: 1px dotted #000;
font: bold 110% sans-serif;
width: 2.5em;
height: 1.25em;
text-align: center;
cursor: default;
}
.left {
right: 8px;
}
.right {
left: 8px;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#crawler1 {
width: 60%;
}
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
.marquee0 {
text-align: center;
}
.marquee0 div {
text-align: left;
}
</style>
<![endif]-->
<script type="text/javascript" src="crawler.js">
/* Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
</script>

</head>
<body>
<h2>Text and/or Image Crawler - Demo Page <span>(a highly configurable multiuse marquee script)</span></h2>
<!--[if lt IE 6]>
<center>
<![endif]-->
<div id="crawler1">
<div class="marquee" id="art">
<img src="../files/photo1.jpg" alt=""> <img src="../files/photo2.jpg" alt=""> <img src="../files/photo3.jpg" alt=""> <img src="../files/photo4.jpg" alt=""> <img src="../files/photo5.jpg" alt=""> <img src="../files/photo6.jpg" alt=""> <img src="../files/photo7.jpg" alt=""> <img src="../files/photo8.jpg" alt=""> <img src="../files/photo9.jpg" alt="">
</div>
<div class="dir left" onmouseout="mymarquee.setup.slowdeath();" onmouseover="mymarquee.leftRight('left');">&lt;&lt;</div>
<div class="dir right" onmouseout="mymarquee.setup.slowdeath();" onmouseover="mymarquee.leftRight('right');">&gt;&gt;</div>
</div>
<!--[if lt IE 6]>
</center>
<![endif]-->
<script type="text/javascript">
var mymarquee = {
uniqueid: 'art',
style: { //style object for this marquee container (use quotes on both sides of the : as shown)
'width': '100%',
'height': '235px',
'background-color': '#ddd',
'border': '1px solid #111',
'margin': '0 auto'
},
inc: 8, //speed - pixel increment for each iteration of this marquee's movement
stopped: true,
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
leftRight: function (dir){
clearTimeout(this.setup.timer);
this.inc = this.setup.sinc;
this.direction = dir;
return (this.stopped = false);
}
};
marqueeInit(mymarquee);
</script>

</body>
</html>

[2_k]

HAPPY NEW YEAR!:)

There is another script that might work with fullajax...




var el = id('mycrawler2');
marqueeInit({
uniqueid: 'mycrawler2',
style: {

'padding': '0px',
'z-index': '0',

'width': '100%',
'height': '180px'
},
inc: 20, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: -0,
direction: 'right',
stopped: true,
addDelay: 0,
neutral: 250,
savedirection: true,
leftRight: function (dir){
clearTimeout(this.setup.timer);
this.inc = 21;
this.direction = dir;
return (this.stopped = false);
}


});
el.id = 'mycrawler2';


this two marked lines make to work crawler gallery with fullajax, but not exactly 100%. there still a problem with loop(it's not working when crawler moves to the left...) in some browsers, but the gallery starts works with fullajax. jscheuer1, can you explain what these two lines do, and why it's not works on 100%?

[jscheuer1]

I'm not sure. The syntax suggests that id is a function that returns an object. It's not a native javascript function and not a part of the crawler script.

Here's what I get on your page when I do javascript:alert(id):


function id(idElem){
return SRAX.get(idElem);
}

I believe that SRAX is part of fullajax. It probably saves the markup, script code, and/or elements in some way for future use by fullajax.

Perhaps that script's author can explain more fully what it does.