Grow your CSS skills. Land your dream job.

append overlay over div container populated by images

  • # 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 1, 2013 at 3:19 pm

    When you would do:

    .gallerycontent { position: relative; }
    .box { position:absolute; }

    That would probably do the trick. Chris Coyier did [quit a few posts about positioning](http://www.google.nl/search?q=css-tricks+positioning), and [how they differ](http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/).

    [Made a Codepen](http://codepen.io/atelierbram/pen/wqAxu) from a [forked js fiddle that you referred to earlier](http://jsfiddle.net/tovic/26kWr/) of a text-overlay on an image gallery: this one uses position absolute inside position relative, but here with the text being the alt-text from the images, which is interesting to me.

    # 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 4, 2013 at 2:21 pm

    [So I made this new Codepen](http://codepen.io/atelierbram/pen/urtdz). What I did here is basically tweaking a “lightbox-modal-dialog-overlay”-jQuery-plugin. (Note that I use the same image and code here all the time, but this is just out of laziness, and wanting to keep the demo lightweight. )
    [There are more of them](http://www.1stwebdesigner.com/freebies/ajax-lightbox-modal-dialog-solutions/), but I chose this [swip DOMWindow thing](http://swip.codylindley.com/DOMWindowDemo.html)

    So when you follow the link above and go all the way down to “Example 9″, you find the following description that matches most closely what we want to do here:

    > Open a DOM window using inline content embedded in the page. The window is anchored to a specified element and the anchored window is reused `(positionType:’anchoredSingleWindow’) ` when the overlay is not used.

    The tweaking in the code of [the original .js](http://swip.codylindley.com/jquery.DOMWindow.js) had to do with fitting the overlay more easily inside the gallery-container-section, with `position absolute`.

    There will be different and also more elegant ways to do this kind of thing, but this gives you an example of how this could be done, just by customising some code.

    # 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?

    # February 5, 2013 at 6:25 pm

    @user2015864 : It’s all open source I guess, so you’re welcome (, maybe with an attribution to the javascript developer)? (http://codepen.io/atelierbram/pen/puwLy) this time with even more javascript, but that’s because I wanted to try ‘pagination’ ( prev – next ) within the overlay. It was too difficult for me to do this with the ‘swip DOMWindow’ that I used with the last one. Tried this one with a tweaked version of the [fancyBox lightbox - jQuery plugin](http://fancyapps.com/fancybox/) , which is more than a bit odd, but is does work ( best on desktop so far). So here’s a lazy web-request for javascript wizard’s: For someone to reverse engineer, or optimise the javascript, or point to a similar thing that already exists.
    ***
    **!Update**: Changed the dependency to [ColorBox - jQuery lightbox](http://www.jacklmoore.com/colorbox) which turned out to be better suitable for the purpose of tweaking, at least for me. Weird resizing/top-margin going on with the Codepen on mobile (has probably to do with the iFrame it sits in), so for mobile please check out the one
    (http://bramdeh.home.xs4all.nl/playground/ui-patterns/colorbox-gallery/index-external.html). Seems quite stable so far.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".