Advanced Search

Results 1 to 3 of 3

Thread: Can scripts Tab Content & CSS Image Enlarger be combined?

  1. #1
    Join Date
    Jan 2013
    Location
    California
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Can scripts Tab Content & CSS Image Enlarger be combined?

    1) Script Title: Tab Content, CSS Image Enlarger

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm,
    http://www.dynamicdrive.com/style/cs...mage_enlarger/

    3) Describe problem: I have a projects page one which I would like to tab between project types (commercial, residential, etc.) I have that part working ok (except for the look of the tabs, but I am not worrying about that now). However, on the individual tabs, I would like the project photos, some of which are quite large, to be thumbs that will enlarge upon mouseover. That way I can get all the thumbs (up to 12 thumbs) on the screen without having to scroll down. I combined the two codes above, and it sort of works, but funny things happen (with only two thumbs on each tab) - photos on one tab show up on others. The enlarging seems to work though.

    [I put this question up on 2/7, but got no replies, so being a newbie, I thought I should indicate in the posting title the scripts (like others do) I was working with.]

    If this combo cannot be made to work, perhaps there are other codes that would work? Here is my test file containing the code copied from the script & CSS above:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>


    <style type="text/css">

    /* smart image enlarger starts here */
    /* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

    .ienlarger {
    float: left;
    clear: none; /* set to left or right if needed */
    padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
    padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
    }

    .ienlarger a {
    display:block;
    text-decoration: none;
    /* add cursor:default; to this rule to disable the hand cursor */
    }

    .ienlarger a:hover{ /* don't move this positioning to normal state */
    position:relative;
    }

    .ienlarger span img {
    border: 1px solid #FFFFFF; /* adds a border around the image */
    margin-bottom: 8px; /* pushes the text down from the image */
    }

    .ienlarger a span { /* this is for the large image and the caption */
    position: absolute;
    display:none;
    color: #FFCC00; /* caption text colour */
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px; /* caption text size */
    background-color: #000000;
    font-weight: bold;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 13px;
    padding-left: 10px;
    }

    .ienlarger img { /* leave or IE puts a border around links */
    border-width: 0;
    }

    .ienlarger a:hover span {
    display:block;
    top: 50px; /* means the pop-up's top is 50px away from thumb's top */
    left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
    z-index: 100;

    /* If you want the pop-up open to the left of thumb, remove the left: 90px; and add
    right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */

    /* If you want the pop-up open above the thumb, remove the top: 50px; and add
    bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */

    /* add cursor:default; to this rule to disable the hand cursor only for the large image */
    }

    .resize_thumb {
    width: 150px; /* enter desired thumb width here */
    height : auto;
    }

    /* smart image enlarger ends here */

    </style>
    <link rel="stylesheet" type="text/css" href="styles/tabcontent.css" />

    <script type="text/javascript" src="javascript_files/tabcontent.js">

    /***********************************************
    * Tab Content script v2.2- Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    </script>


    </head>

    <body>



    <h3>Demo #1- Basic implementation</h3>

    <ul id="countrytabs" class="shadetabs">
    <li><a href="#" rel="country1" class="selected">Tab 1</a></li>
    <li><a href="#" rel="country2">Tab 2</a></li>
    <li><a href="#" rel="country3">Tab 3</a></li>
    <li><a href="#" rel="country4">Tab 4</a></li>
    </ul>

    <div style="border:1px solid gray; width:750px; margin-bottom: 1em; padding: 10px">



    <div id="country1" class="tabcontent">
    <div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>
    <div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>
    </div>



    <div id="country2" class="tabcontent">
    <div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>
    <div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>
    </div>



    <div id="country3" class="tabcontent">
    <div class="ienlarger"><a href="http://www.facebook.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>
    <div class="ienlarger"><a href="http://www.facebook.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>
    </div>



    <div id="country4" class="tabcontent">
    <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>
    </div>
    <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

    </div>

    <script type="text/javascript">

    var countries=new ddtabcontent("countrytabs")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()

    </script>


    </body>
    </html>

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    586
    Thanks
    41
    Thanked 27 Times in 27 Posts

    Default

    I made this using the demo that was on the tabs script page on the bottom.

    http://www.web-user.info/test/thumbs/bigtest2.html

    I used the same image on each tab but added an extra break at the top to each set of images.

    So you can just change the images and/or adjust the css thumbnail size to work with your needs
    Thanks,

    Bud

  3. #3
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    Question duplicated here, so closing thread.
    DD Admin

Similar Threads

  1. Can js scripts be combined?
    By kuau in forum JavaScript
    Replies: 3
    Last Post: 08-12-2009, 09:08 AM
  2. Need help with modifying combined scripts
    By dragonjo8 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-02-2009, 06:49 AM
  3. Help with image CSS popup enlarger
    By AshleyUNOB in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-20-2008, 06:18 PM
  4. Can these two scripts be combined?
    By moodyone00 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-16-2008, 09:04 AM
  5. Image enlarger script?
    By pookibr in forum Looking for such a script or service
    Replies: 2
    Last Post: 05-16-2008, 09:58 AM

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
  •