Log in

View Full Version : request for code help to modify a dynamic drive script


davedev
11-19-2011, 06:16 PM
Hi
I included the following script on one of my websites and it works well

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

but the client wants the first image in the thumbnail gallery to display it's large image when the page first loads and when the cursor is not over a thumbnail, so that the area for the large image is never completely blank.
Does anyone have any code modifications which would accomplish this. Need this pretty quickly so am willing to make reasonable compensation if any professionals have solutions

thankyou
traq
11-19-2011, 11:54 PM
DD Paid Help (http://www.dynamicdrive.com/forums/forumdisplay.php?f=29)
b3nny
11-20-2011, 11:50 AM
Funny, I need exactly the same help for modification, as I posted in the "Paid Help" section:


Hello,

I made a Web-gallery according to this CSS script:

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

The gallery looks like this at the moment:
http://b3njamin.cwsurf.de/F1/

If the mouse is not hovered over a thumbnail, there should be a "wildcard"-pic, a grey place holder pic, saying something like "Please move your mouse over the thumbnails"

I will create the pic myself of course, but how can I insert the code for it?
I guess it is no big deal for somebody who knows what he is doing =)

Best Regards,
Benjamin
jscheuer1
11-20-2011, 02:37 PM
In the css, addition highlighted:


.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
background: url(../media/235.jpg) 417px 47px no-repeat;
}

In the case of davedev, the image (red) should be the path to the first larger image. In the case of b3nny, it should be to this wildcard image.

Paths in css files are relative to the css file. If the css is on the page, then they are relative to the page.

The left and top coordinates (green) should be the the left and top coordinates of the:


.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 40px;
left: 410px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

selector rule + (in the case of b3nny) 7 or whatever it takes to get it where you want it. Probably the same for davedev.

For both of you - The image used should be small enough so that once positioned as desired, it will be covered by any of the other larger images.

This could be a deal breaker for davedev - if his first larger image is larger than any of his other larger images, there will be bleed through, but padding and background could probably be added to those. If not they could be matted in an image editing program with a solid color matte matching the background color of the page.

In the case of b3nny, there will be greater uniformity across browsers if you use a standards invoking DOCTYPE. But when you do, you will have to specify px for the units for all non 0 values of position or dimension in the css like the added red in the above .thumbnail:hover span selector.

To make your document standards compliant, put this:


<!DOCTYPE html>

as the very first thing in the source code of your page.

Payment may be made to:

http://home.comcast.net/~jscheuer1/side/donate.htm

$25 seems fair.

Note: If you want more control over things, you will probably have to use javascript. This script:

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

would be a good one in that case. It can easily be made to show an image until the first thumbnail is hovered, and has the added benefit of not having to revert onmouseout.
b3nny
11-20-2011, 05:31 PM
Many thanks again :) I will try it when I am at home.

When you suggest I have to start my code with:
<!DOCTYPE html>

You don't mean in the css file but the actual html file?

So far my html begins with
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>...

Si I guess it should be like

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>...


?
traq
11-20-2011, 06:17 PM
Si I guess it should be like

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>...
?

realistically, it could be
<!DOCTYPE html>
<html>
<!--OR: <html lang=en>
- or whatever language your page is in
- that's actually useful in some cases -->
<head>...browsers don't read the namespace declaration anyway, unless you page is being served as xml (I can almost guarantee that it's not). IE<9 doesn't even know how to read xhtml.
jscheuer1
11-20-2011, 06:22 PM
Si I guess it should be like

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>...
?

Sure, but traq's suggestion is good:


<!DOCTYPE html>
<html lang="en">
<head>...