CMotion Image Gallery - script mechanics doesn't move pictures

[Anton_PL]

That script never did that, even without AJAX.

So does it mean with CMotion Image Gallery script it is impossible to have more than one sepparate gallery?

There's also an OO version of cmotion that was introduced here:

http://www.dynamicdrive.com/forums/s...3998#post53998

But it requires that the images be defined in a javascript array, so might not be suitable for your purposes. It can run fairly easily under AJAX though, if you're willing to define your images in an array.

I'll try to implement this one to my page. Definning arraies.. well - at least it's sort of a sollution.

Regards, Anton

[jscheuer1]

I've been playing with an update to the OO CMotion Gallery script. It's looking good. It allows you to put the image train right on the page. Or in this case, import it from an external page. I'm taking a little more time with it, sort of tweaking/testing/tightening it up a bit.

[Anton_PL]

Ok, well.. The CMotion OO script works quite good. But when I'm trying to have it running in DIV - it isn't appearing. Here's example of working script: antoczyk.pl/anton/example/file1.html, and here's opened "normally": http://antonczyk.pl/anton/example.

So generally, the CMotion OO is enough I guess (or maybe there will be some significant differences between mentioned and the one you're working on? Apart from putting images in *.js file and *.html file), but again it needs something be changed to work from a DIV.. Unfortunately :/

Regards, Anton

[jscheuer1]

You're really probably talking about two different things, getting the script to work, and integrating it with an AJAX call. You also need to decide which CMotion script you're going to use and get rid of the others from your pages. So that makes three things.

First off, decide which Cmotion, let's go with the latest, it's now ready:

Attachment 3838

Demo:

http://home.comcast.net/~jscheuer1/s...tion_ps_oo.htm

Use your browser's 'view source' to see how it's used on a page.

Now you only need one division with a unique id and your image train in it for each gallery.

This part:

/////////////////////////////////////////////////////////////////////////////////////////
/*                              Property Definitions:
/////////////////////////////////////////////////////////////////////////////////////////
* id - required; id of the gallery's img train division ('string', ex: 'gallery2')
* maxwidth - required; maximum width of the gallery in pixels (integer) must be less than the width of the image train
* width - required; width of the gallery in pixels(integer) or percent ('string' with % sign, ex: '75%')
* height - required; height of the gallery in pixels (integer)
* rest - optional; size of the neutral area in the center of the gallery in pixels (integer, ex: 100, defaults to 6)
* maxspeed - optional; top speed of the gallery (integer, defaults to 7)
* startpos - optional; 1 for left start, 0 for right, 2 for center (integer, defaults to 0, right)
* center - optional; true or false (boolean unquoted, defaults to false) - if true, requires standards invoking DOCTYPE for IE
*****************************************************************************************/

Is just instructions/information.

The on page call is like:

new cmotiongallery({id: 'gallery', rest: 6, maxspeed: 7, maxwidth: 1000, startpos: 2, width: '50%', height: 225, center: true});

or:

new cmotiongallery({id: 'gallery2', maxwidth: 1000, startpos: 1, width: 500, height: 225});

You will see all of that in the source code view of the demo page.

The way to get it to work with the AJAX call is to put those, or your equivalents of them, here in the jah code:

var req = null;
function jah(url,target) {
    // native XMLHttpRequest object
    document.getElementById(target).innerHTML = 'sending...';
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = function() {jahDone(target);};
        req.open("GET", url, true);
        req.send(null);
    // IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = function() {jahDone(target);};
            req.open("GET", url, true);
            req.send();
        }
    }
}    

function jahDone(target) {
    // only if req is "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            results = req.responseText;
            document.getElementById(target).innerHTML = results;
            new cmotiongallery({id: 'gallery', rest: 6, maxspeed: 7, maxwidth: 1000, startpos: 2, width: '50%', height: 225, center: true});
            new cmotiongallery({id: 'gallery2', maxwidth: 1000, startpos: 1, width: 500, height: 225});
        } else {
            document.getElementById(target).innerHTML="jah error:\n" +
                req.statusText;
        }
    }
}

You can put the full script on the external page if you like (similar to my demo page, just with your images, and your calls). That will allow you to test that page by itself. But all you really need on the external page are the div's with the image trains in them. You do need the latest OO CMotion script and the gallerystyle_oo.css (unchanged from the previous OO version) on the 'top' page.

And, as I said before, get rid of the other versions if you haven't already.

[Anton_PL]

Thank you so much John! It is working right now perfectly I've followed your instructions and it seems to be working exactly as I imagined
You can see the results HERE. There is one more thing.. the "end of gallery" inscription doesn't show near the mouse cursor, but below the gallery or even in the corner of the page..

And I've got one other question: In the AJAX call, you've put these lines: "new cmotiongallery({ ..." - these are the exact same as I should put in my html file, right? So whenever I edit them, I have to change it also in the external AJAX file (my "jah.js" file). Is there any possibility to unify it or it would be to much work for prize?

Nevertheless thank you once again!

Best Regards,
Anton

[jscheuer1]

Unless you want the page propozycje.html to work by itself, you don't need any scripts or styles on it.

The reason why the end of gallery message doesn't appear or doesn't appear in the correct place is that although you have:

<link rel="stylesheet" type="text/css" href="gallerystyle_oo.css">

on your pages, the file itself is a 404 Not Found. You can download it here:

http://home.comcast.net/~jscheuer1/s...rystyle_oo.css

right click and 'save as'.

Once you have that, upload it to your server.

[Anton_PL]

Yeah, that was a mistake. Now I have this file on my server but even if earlier the "End of Gallery" inscryption shows in the top corner of the page, now it doesn't appear at all. If that's another stupid mistake I'm ashame of myslef.. but if it concerns scripting, could you tell me what's wrong?

Best regards, Anton

[jscheuer1]

In Firefox Developer Tools extension, if I give the statusdiv class a z-index of 1, it does show up (in gallerystyle_oo.css, addition highlighted):

.statusdiv {
background-color: lightyellow;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
z-index: 1;
}

This is required so that it can show up over the glowna division whose z-index is also 1. Default z-index is auto, which usually works out to be 0 and is for statusdiv the way it is at the moment. By making the status div z-index: 1 and equal to glowna, since statusdiv comes later in the DOM, it will now appear over glowna.

[Anton_PL]

yes it does, but still not close to the mouse cursor, but in the half of CMotion Gallery's width:


Regards, Anton

[jscheuer1]

That's where it's supposed to be, has always been in every official version of CMotion. We could move it to near the mouse by using this mod of the script:

Attachment 3845

Right click and 'save as'.

It would be a simple matter though to just move it up a little and/or to the left and/or right, that may be done with css style. Would that be acceptable? That could be done without this modified version.

Also, I have an idea for allowing you to edit in only one place these lines and still have both pages functioning:

    new cmotiongallery({id: 'portret', rest: 6, maxspeed: 7, maxwidth: 1000, startpos: 2, width: '100%', height: 75, center: true});
    new cmotiongallery({id: 'pejzaz', rest: 6, maxspeed: 7, maxwidth: 1000, startpos: 2, width: '100%', height: 75, center: true});

Make up a script - say cmo_init.js, and put these lines in it:

cmotiongallery.myinit = function(){
new cmotiongallery({id: 'portret', rest: 6, maxspeed: 7, maxwidth: 1000, startpos: 2, width: '100%', height: 75, center: true});
new cmotiongallery({id: 'pejzaz', rest: 6, maxspeed: 7, maxwidth: 1000, startpos: 2, width: '100%', height: 75, center: true});
};

Remove those calls from the page and from your jah code. On both pages put:

<script src="cmo_init.js" type="text/javascript"></script>

On both pages put it after the external tag for the motiongallery_ps_oo.js script. On the external page, put this just before the closing </body> tag:

<script type="text/javascript">
cmotiongallery.myinit();
</script>

In the jah code, do it like so:

var req = null;
function jah(url,target) {
    // native XMLHttpRequest object
    document.getElementById(target).innerHTML = 'sending...';
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = function() {jahDone(target);};
        req.open("GET", url, true);
        req.send(null);
    // IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = function() {jahDone(target);};
            req.open("GET", url, true);
            req.send();
        }
    }
}    

function jahDone(target) {
    // only if req is "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            results = req.responseText;
            document.getElementById(target).innerHTML = results;
            cmotiongallery.myinit();
        } else {
            document.getElementById(target).innerHTML="jah error:\n" +
                req.statusText;
        }
    }
}