Granny
02-07-2013, 08:48 PM
1) Script Title: Tab Content, CSS Image Enlarger
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm,
http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_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.
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) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm,
http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_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.
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>