gallery with jquery template

A Pen By melvin dompig

Pen Settings

↑ Insert the most common viewport meta tag

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.


              <!--jquery overlay-->
<div class="gallerycontent">
<div class="reference">
           	<ul class="image_gallery">
               <li><a id="activator-bureau" class="activator"><img src="" alt="buro" /></a></li>
              <li><a id="activator-werkwijze" class="activator"><img src="" alt="" /></a></li>
              <li><a id="activator-klanten" class="activator"><img src="" alt="" /></a></li>
              <li><a id="activator-contact" class="activator"><img src="" alt="" /></a></li>
       <!--jquery overlay content box-->                                               
              <div id="activator-werkwijze-overlay" class="overlay"></div>
              <div id="activator-bureau-overlay" class="overlay"></div>
              <div id="activator-klanten-overlay" class="overlay"></div>
              <div id="activator-contact-overlay" class="overlay"></div>

            <div class="box" id="activator-bureau-box">
	          <a class="boxclose" id="boxclose-bureau">x</a>
            <div class="slidewrap">texxt.</div> 

            <div class="box" id="activator-werkwijze-box">
	          <a class="boxclose" id="boxclose-werkwijze">x</a>
            <div class="slidewrap">texxt</div>

            <div class="box" id="activator-klanten-box">
          	<a class="boxclose" id="boxclose-klanten">x</a>
	          <div class="slidewrap">texxt .</div>          

            <div class="box" id="activator-contact-box">
	          <a class="boxclose" id="boxclose-contact">x</a>
	          <div class="slidewrap">texxt QWTRQTRQT.</div>          


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

    left: 0;
    margin-left: 0;
    min-height: 450px;
    width: 100%;
    z-index: 101;

a.activator {
    cursor: pointer;


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



              $('.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
      			//closes all items with overlay class
    //tells the current overlay to fade in
        		//animates current box bottom position to 0


//tells all items with boxclose class to animate its parents bottom to -600

Loading ..................