Results 1 to 7 of 7

Thread: request for code help to modify a dynamic drive script

  1. #1
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default request for code help to modify a dynamic drive script

    Hi
    I included the following script on one of my websites and it works well

    http://www.dynamicdrive.com/style/cs...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

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

  3. #3
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    In the css, addition highlighted:

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

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

    Code:
    <!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/dynamici...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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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


    ?

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by b3nny View Post
    Si I guess it should be like
    HTML Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>...
    ?
    realistically, it could be
    HTML Code:
    <!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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by b3nny View Post
    Si I guess it should be like
    HTML Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>...
    ?
    Sure, but traq's suggestion is good:

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>...
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •