CMotion Image Gallery - script mechanics doesn't move pictures

Printable View

03-05-2011, 03:10 PM
Anton_PL

CMotion Image Gallery - script mechanics doesn't move pictures

1) Script Title: CMotion Image Gallery

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

3) Describe problem: Hi, this script is sth I was looking for, to use it on the website I'm working on. But after copying scripts and saving them on the server, it, literally, doesn't move.. It's probably some stupid mistake I should find myself and correct, but after many tries - cannot.

This is what I've pasted in the <head> of index.html and pro.html files:

Code:

<link rel="stylesheet" type="text/css" href="gallerystyle.css" />    <script type="text/javascript" src="motiongallery.js"> /*********************************************** * CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use * Modified by Jscheuer1 for autowidth and optional starting positions ***********************************************/ </script>

This is what I've pasted where the gallery should appear:

Code:

<div id="motioncontainer" style="position:relative;overflow:hidden;"> <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;"> <nobr id="trueContainer"> <a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a></nobr> </div> </div>

And that's the page: http://pracownia.fabianczyk.com.pl. Maybe the problem is that I used a DIV based web, where all pages
appear inside an index-build-div, with using so called "jah - just asynchronous html".
Please help me find out what's the problem... :)

Regards, Anton

Well... It started to work.. I was checking if there are any answers in this thread and I saw a slash "/" after a <LINK REL...> line of code:

HTML Code:

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

So i deleted it - it did nothing. So i retyped it back on its place, and... after refreshing page - the gallery was working perfectly!

Have no idea what's just happend. If you have any clues...

Regards, Anton

...and again, it got disabled. But - as I've mentiond before, when I delete - upload and retype - upload slash after that LINK REL line, the gallery works. Why?

Regards, Anton
03-10-2011, 08:55 PM
Anton_PL

up.. no one can answer that? :(
03-28-2011, 01:38 AM
asinan007

hi, i am new here, and i am also using the CMotion Image Gallery, I don't see anything wrong with your code. the only explanation that i can come to is that your js file might not be accessible or it is in a different folder.
03-28-2011, 03:00 PM
jscheuer1

At this typing, the actual index.html page, if you look at the live source code view, doesn't have that code from your post on it.
03-29-2011, 03:14 PM
Anton_PL

Yeah you're right.

I changed it, because I didn't know how to fix it. The code was copy-pasted. The only answer that comes to my mind is that using mentioned "jah" to open html files in DIV located in index file makes the script doesn't work. When I open it in a separate window, it works.

I'm really looking forward to see solution. Now it's just scrolling area - doesn't look bad, but...

Is anyone here who would at least look at it? I can upload an example that'll show the problem.

Regards, Anton
03-29-2011, 04:23 PM
jscheuer1

Yes, upload an example that shows the problem.

However, if this is caused by the "jah", we can only tell you what's wrong/missing. You may have to figure out how to fix it visa vis the "jah" you're using.

That sounds like AJAX though. If so we could possibly find a way to initialize the gallery after it's imported. I'm thinking a slightly different script (an OO version of cmotion) or even a differnt script (text and image crawler) and a call to init after the imported content arrives. We would want something that doesn't depend upon the onload event, as that is presumably already past once something gets imported asynchronously.

But put up your demo and we shall see what we can see from it.
03-29-2011, 06:08 PM
Anton_PL

Ok, so basically that's it. The page with the problem is here:http://antonczyk.pl/anton/example/
It contains with 7 files:
- index.html
- file1.html
- style.css
- thumb.jpg
- jah.js (for loading file1.html in the DIV called "internal")
And those from the DDscript:
- gallerystyle.css
- motiongallery.js

After applying the "almost-solution" (deleting the slash in LINK REL line, mentioned in my first post) nothing happens. So that was rather a lucky reaction.

What is unusual, when using "jah" (yeah, that's AJAX as I can tell), and opening a random *.html file in a DIV, it doesn't matter what lines of code you have in the HEAD section of that random *.html file - my webbrowser (Safari 5, as well as: Chrome, and Firefox 3.6) read it from index.html (the html file, where I recall *.html file into DIV using "jah"). Nevertheless I still keep all needed <HEAD> lines both in index.html and file1.html.

Hope you could solve it :)
Best regards,
Anton
03-30-2011, 02:12 PM
jscheuer1

1 Attachment(s)

Use this modified version of the cmotion script:

Attachment 3834

And this mod of your jah script:

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; fillup(); } else { document.getElementById(target).innerHTML="jah error:\n" + req.statusText; } } }
03-30-2011, 04:42 PM
Anton_PL

Ha! That really works! Amazing :) - I'm neighter familiar nor truly confident with scripts, so thats really amazing! Thank you John very much!

Regards,
Anton

EDIT:
Yeah.. After implementing that on my "example" page, it worked, then I put it on my web - it worked. But when I try to make two sepparate CMotion Galleries, the second one isn't working. You can see how it looks like on the example page: http://antonczyk.pl/anton/example

Hoping for solution,
Anton
03-30-2011, 09:39 PM
jscheuer1

That script never did that, even without AJAX. There's Text and Image Crawler:

http://www.dynamicdrive.com/dynamici...wler/index.htm

that can do a similar thing, it duplicates the image train though, so there's no 'end of gallery'. It could be adapted fairly easily to your AJAX setup.

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 just had a thought, perhaps it could grab the images for the array(s) from the markup via a front end function. I'll have a look at that possibility when I get a little more time.
03-31-2011, 03:34 PM
Anton_PL

Quote:

Originally Posted by jscheuer1

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?

Quote:

Originally Posted by jscheuer1

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
04-01-2011, 12:56 AM
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.
04-01-2011, 05:00 PM
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
04-02-2011, 06:04 PM
jscheuer1

1 Attachment(s)

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:

Code:

///////////////////////////////////////////////////////////////////////////////////////// /* 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:

Code:

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

or:

Code:

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:

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.
04-03-2011, 11:52 AM
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
04-03-2011, 03:17 PM
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:

Code:

<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.
04-04-2011, 08:51 PM
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
04-04-2011, 11:39 PM
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):

Code:

.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.
04-05-2011, 09:37 AM
Anton_PL

yes it does, but still not close to the mouse cursor, but in the half of CMotion Gallery's width:
http://antonczyk.pl/anton/example/aaa.jpg

Regards, Anton
04-05-2011, 06:18 PM
jscheuer1

1 Attachment(s)

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:

Code:

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:

Code:

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:

Code:

<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:

Code:

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

In the jah code, do it like so:

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; cmotiongallery.myinit(); } else { document.getElementById(target).innerHTML="jah error:\n" + req.statusText; } } }