PDA

View Full Version : CMotion Image Gallery help



DaveX
02-25-2007, 08:12 PM
1) Script Title: CMotion Image Gallery

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

3) Describe problem: I'm very green with scripts. I'd like to use this one but I have questions. for instance, I see references to the images in the code but I'm wondering where the images should be stored or do I have to put paths? Also, do I just use the normal size images and they are automatically thumbnailed or do I need separate thumbs?

jscheuer1
02-25-2007, 08:24 PM
If the images are in the same folder as the page, no problem. If they are elsewhere, you need the path. Those image tags (from the demo page, example image tags red):


. . . cript: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="dynamicbo . . .

are just normal HTML image tags. They will work just like any other image tag. You could scale your larger images down by giving them width and height attributes but, using thumbnails is a much better idea due to the amount of load time required for larger images slowing the page down a lot.

DaveX
02-26-2007, 12:12 AM
So, if I'm doing a site that has, say, 5 different galleries of pictures, maybe I would want to have a separate folder for each one and include everything inside each folder (pictures, .js files, css files, etc)?

jscheuer1
02-26-2007, 04:21 AM
You can organize things like that any way that you like, yes. Just make sure that the paths to the various files are valid on each page. To be on the safe side, you can always use the absolute path. Also, it will save on bandwidth and load time if you can reuse as many files as possible - say link all pages to common .js and .css files where applicable.

DaveX
02-28-2007, 03:48 AM
Well I got this to show up on a page which is a lot for me! It shows up at top left. I'd like it to show up in the center toward the bottom. I'm not sure if this is done by editing the HTML or the CSS. In the CSS there is this line:

#motioncontainer {
/*margin:0 auto; Uncomment this line if you wish to center the gallery on page */
width: 50%; /* Set to gallery width, in px or percentage */
height: 130px; /* Set to gallery height */
}


Is this what I'm looking for? If it is, how do I uncomment the line? I believe I just remove the /*'s but I'm not sure exactly which ones...


Also, in the HTML, I'm not sure how to enable the thumbs to bring up a large version of the picture. Can someone show me an example? When I click on a thumb in the example it just brings me to another page...

jscheuer1
02-28-2007, 05:11 AM
The key to where the gallery shows up is (from the demo page):


Step 2: Add the below HTML code to the <BODY> section of your page. It contains the actual HTML for all your images in the gallery:

That means that you put the code from Step 2 in the body section at the spot where you want it to show up. On most pages (using conventional layout techniques), if you want it at the bottom then, it should be the last thing before the </body> tag.

To center it yes, move the opening comment delimiter (red) so that it looks like so:


#motioncontainer {
margin:0 auto; /* Uncomment this line if you wish to center the gallery on page */
width: 50&#37;; /* Set to gallery width, in px or percentage */
height: 130px; /* Set to gallery height */
}

On to your last question, here is the template for that (taken from the demo code):


<a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a>

It is a little confusing because to save on images for the demo, the same image was used for both the thumb and enlarged versions.

Also, on the demo page, only the first two leftmost images are setup to show 'enlarged' images. The first with no pop up dimensions set (the one I featured above) and the second with dimensions (dimensions in red in the below excerpt from the demo):


<a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a>

DaveX
03-01-2007, 03:11 AM
Excellent! I got it all working so far. Next question is can it be made to open the enlarged image on the same page rather than as a popup?

jscheuer1
03-01-2007, 05:18 AM
Sure. That can be done one of two main ways with many variations to each. The two main ways are:

1 ) Directly modifying the enlargeimage() function to perform as desired.

2 ) Skipping the enlargeimage() function and (since the code where the images are entered is just ordinary HTML) using another script there.

DaveX
03-02-2007, 07:23 PM
Which of these two options would be the easiest or most efficient?

jscheuer1
03-02-2007, 08:50 PM
They both vary in that depending upon the final result that you are going for and the code used to get there. That's why I only outlined the two major steps. I was hoping you would read my mind (not too realistic on my part) and get more specific about just what you wanted to have happen. Why not have a look at some of the scripts for that:

http://www.dynamicdrive.com/dynamicindex4/indexb.html

The four that are described as 'viewer' on that index would probably be the most appropriate but, feel free to look at any that interest you.

DaveX
03-03-2007, 12:27 AM
What I'm thinking of is having the thumbs across the bottom of the page and if you click on one, the picture opens above it to fill the center of the page with a title and similar info displayed. Would a frame be easier? I did like "Image Thumbnail Viewer II" though... maybe I could use that.

jscheuer1
03-03-2007, 02:39 PM
Looks to me as though you should be able to just install that script with Cmotion after following Step 1 for Thumb II on a page with Cmotion already on it, just use the syntax for Thumb II in Cmotion's links, ex:


<nobr id="trueContainer"><a href="large_image.gif'" rel="enlargeimage::click" rev="loadarea" title="Whatever this image is"><img src="dynamicbook1.gif" border=1></a> <a href="large_image.gif'" rel="enlargeimage::click" rev="loadarea" title="Info on this image"><img src="dynamicbook1.gif" border=1></a> . . .

Then you just need to layout your page as desired with the loadarea centered above the Cmotion gallery.

DaveX
03-06-2007, 02:41 AM
Can this be modified to display vertically?

jscheuer1
03-06-2007, 05:24 AM
Display what vertically? If you mean Cmotion, yes it could but, unless I have a mod like that laying around somewhere, I'll have to get back to you on that. Oh, right - I did and it is a DD script even:

http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm

If you mean the layout of the page, that is just a matter of arranging things in the HTML. You would probably be best off asking about it in the HTML forum but, it would help if you got the script parts working first and could provide a link to your demo.

DaveX
03-17-2007, 02:58 PM
A couple of post above you give directions on how to have the picture open on the same page using a different script along C Motion. Would it be the same if I'm using a table or would the code have to be modified more?
Thanks for all of your help!

jscheuer1
03-17-2007, 03:43 PM
The layout of a page and the script(s) used on it are generally two different things.

The exception is when a particular bit of HTML code is required by the script. Cmotion is such a script but, as long as that code is used, it can be contained in a table or any other element with no problem as long as the container is large enough and/or can expand or overflow enough to contain it and doesn't adversely affect the layout of the required HTML.

Avoid <center> align="center" and text-align:center; for the container and make sure it is large enough and there shouldn't be any problem with Cmotion. The add on script for displaying the images is even less sensitive to page layout.

However, that said, it is always possible to screw up a script with incompatible mark up. If you have problems, provide a link to your problem page.

DaveX
03-18-2007, 05:41 PM
So, when using the scripts like that, if I click a thumbnail to change the picture, is it reloading the whole page or just the picture?

jscheuer1
03-18-2007, 05:57 PM
So, when using the scripts like that, if I click a thumbnail to change the picture, is it reloading the whole page or just the picture?

I can tell by this question that you probably haven't tried this out yet, or you have but it does reload the page or loads just the image. In any case though, the page shouldn't need to reload or switch to the image, if it does, there is something wrong and most likely that can be easily fixed.

If you haven't tried it out, it is time to stop thinking about it and to just give it your best shot. We are here to help you fix your code if you have problems but, it is much easier to fix actual code than to fix 'what if' code.

If you need more help, please supply a link to your problem page.