append overlay over div container populated by images

[user2015864]

i want to restrict the overlay within the height and width of #gallerycontent. my [jsfiddle](http://jsfiddle.net/fTMUF/4/ “fiddle”)

html

x

texxt.

x

texxt

javascript

$(‘.inner’).wrap(‘

‘);
$(‘.reference a’).click(function(){
//get ID of clicked button and appends -box to it so it matches the box id
var boxId= $(this).attr(‘ID’)+”-box”;
//get ID of clicked button and appends -overlay to it so it matches the overlay id
var overlayId= $(this).attr(‘ID’)+”-overlay”;

//animates all items with box class to -600px and fades out all items with overlay class
$(‘.box’).animate({‘bottom’:’-600px’},function(){
//closes all items with overlay class
$(‘.overlay’).fadeOut(‘fast’); });

//tells the current overlay to fade in
$(‘#’+overlayId).fadeIn(‘fast’,function(){
//animates current box bottom position to 0
$(‘#’+boxId).animate({‘bottom’:’0px’});
});

});

CSS

#gallerycontent{
width: 800px;
height:800px;
border:solid #FF0000 3px;
}
.image_gallery li {
display: inline;
list-style: none;
width: 200px;
height: 200px;
float: left;
margin: 4px 4px 4px 4px;
border:solid #FF0000 3px;}

.box{
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40);
color:#fff;
left: 0;
margin-left: 0;
min-width: 400px;
min-height: 50px;
position:fixed;
bottom:-600px;
width: 100%;
z-index: 101;
}

a.activator {
cursor: pointer;
}

a:hover{color:#3cc;}

a.boxclose {
border: 0 solid #FFFFFF;
cursor: pointer;
float: right;
height: 36px;
margin-right: 0;
margin-top: 0;
width: 36px;
}

.slidewrap{padding:20px;}

[user2015864]

Your example looks great atelier bram!!
but my problem is i want to ad lots of text, images en links to the overlays.

i understand javascript and css a bit better now. but not enough to come up with a alternative solution to using “alt” for the content input.

don’t want to be a douche or a code vampire.

but i’m stil baffled. how would you put in a button, instead making the whole overlay clickable, to close

[user2015864]

Atelierbram,

wow. that’s alot of javascriptcode .
i jumped in at the deep end of the pool.
this is my first project so thanks for helping me out.

can i use this?

[Author]

Posts