Forums

Give help. Get help.

  • # February 1, 2013 at 8:33 am

    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;}

    # February 2, 2013 at 10:56 am

    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

    # February 5, 2013 at 1:28 pm

    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?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag