I'm trying to build an image gallery with description when moving over the image.
The code looks good but nothing happens when you move the mouse cursor over the image.
My problem is when I running the code the "<div class='description_content'>" does not appear.
Thx for any help.
HTML CODE:
<html>
<head>
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" language = "Javascript">
<!-- Hide from older browsers;
window.onload = function(){
$('#scroll_me').click(function() {
var item_width = $('#portfolio-tiles li').outerWidth() + 2.5;
var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width;
$('#portfolio-tiles').animate({
'left': left_indent
}, 500, function() {
$('#portfolio-tiles li:last').after($('#portfolio-tiles li:first'));
$('#portfolio-tiles').css({
'left': '-302'+'px'
});});
});
//********************************************** div.description
//for each description div...
$('div.description').each(function(){
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'block');
});
$('#portfolio-tiles li').hover(function(){
//when mouse hover over the wrapper div
//get it's children elements with class description
//and show it using fadeTo
$(this).children('.description').stop().fadeTo(500, 0.4);
},function(){
//when mouse out of the wrapper div
//use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});
};<!-- End onload;
// end hide -->t = setInterval( function(){ $('#next').trigger('click'), 2000 } );
//$('#stop').click( function(){
//clearInterval(t);
</script>
</head>
<body>
<div id="container">
<div id='carousel_inner'>
<ul id="portfolio-tiles">
<li>
<a id="example2" href="p1.png">
<img alt="item1" src="p1.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p2.png">
<img alt="item1" src="p2.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p3.png">
<img alt="item1" src="p3.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p5.png">
<img alt="item1" src="p5.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
</ul>
</div>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div><h2>Click here</h2><img id="scroll_me" alt="item1" src="p4.png"></div>
</body>
</html>
CSS CODE:
#carousel_inner{
background-color: #60F0F0;
background-position: left top;
position:relative;
list-style-type: none;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 220px;
width: 652px;
overflow: hidden;
border:1px;
border-style:solid;
border-color:yellow;
}
#portfolio-tiles li img {
cursor:pointer;
cursor: hand;
border:1px;
border-style:solid;
border-color:red;
}
#portfolio-tiles li {
position:relative;
display: block;
float: left;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 2.5px 0px 2.5px;
width: 309px;
border:1px;
border-style:solid;
border-color:green;
}
#portfolio-tiles {
position:relative;
left:-302px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 15px 15px 15px 15px;
width:9999px; /* important */
}
img {
width: 277px;
}
#scroll_me{
float: left;
display: block;
margin: 0px;
}
h2 {
float: left;
position: relative;
top: 20px;
left: 0;
width: 100%;
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
display:none; /* hide it */
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
}
div.description_content{
padding:10px;
}
You can use $('li').hover() and $(this).find('.description') to achieve this.
Replace this piece of code...
$('#portfolio-tiles li').hover(function(){
$(this).children('.description').stop().fadeTo(500, 0.4);
},function(){
$(this).children('.description').stop().fadeTo(500, 0);
});
with this...
$('li').hover(function(){
$(this).find('.description').stop().fadeTo(500, 0.4);
},function(){
$(this).find('.description').stop().fadeTo(500, 0);
});