$('.inner').wrap('<div class="gallerycontent"/>');
$('.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'});
});
});
Made a Codepen from a forked js fiddle that you referred to earlier 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.
So I made this new Codepen. 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, but I chose this swip DOMWindow thing
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 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.
@user2015864 : It's all open source I guess, so you're welcome (, maybe with an attribution to the javascript developer)? I did make a new Pen 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 , 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 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 I parked here. Seems quite stable so far.
i want to restrict the overlay within the height and width of #gallerycontent. my jsfiddle
html
javascript
CSS
When you would do:
That would probably do the trick. Chris Coyier did quit a few posts about positioning, and how they differ.
Made a Codepen from a forked js fiddle that you referred to earlier 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.
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
So I made this new Codepen. 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, but I chose this swip DOMWindow thing
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:
The tweaking in the code of the original .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.
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?
@user2015864 : It's all open source I guess, so you're welcome (, maybe with an attribution to the javascript developer)? I did make a new Pen 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 , 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 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 I parked here. Seems quite stable so far.