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/dynamici...iongallery.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):

Code:

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

Code:

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

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

Code:

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

Thread: CMotion Image Gallery help

Thread Tools

Search Thread

CMotion Image Gallery help

Bookmarks

Bookmarks

Posting Permissions