overlayThe other day I was having a bit of headache trying to find the best way to display a gallery via Ajax for one of my projects. There are tons of great lightbox type scripts out there (I even have one: lightboxXL) but none of them truly suit my needs as most of them, including mine, are creating the image galleries on DOM load, or on Document load, or on Window load… none of them allowed me to make use of Ajax and I certainly didn’t want to rewrite the code of anybody.

Suddenly, searching the web I found the OVERLAY object from JQuery Tools. This library offers a set of objects that extend the functionality of JQuery, it contains six of the most useful JavaScript tools available for today’s website. The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library.

This is how I used it to create the Image Gallery via Ajax:

Insertion of Libraries

First we must include the library on the HEAD section of the page (JQuery Tools have a compressed version of its tools and latest version of JQuery library)

<!-- Full version of jQuery Tools + jQuery 1.3.2 -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>

CSS Coding

This is where we are going to apply styles to our overlay.


/* scrollable should not disable gallery navigation */
#gallery .disabled {
    visibility:visible !important;
}

#gallery .inactive {
    visibility:hidden !important;
}

/* the overlayed element */
.simple_overlay {

    /* must be initially hidden */
    display:none;

    /* place overlay on top of other elements */
    z-index:10000;

    /* styling */
    background-color:#333;

    width:675px;
    min-height:200px;
    border:1px solid #666;

    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
}

/* close button positioned on upper right corner */
.simple_overlay .close {
    background-image:url(images/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}
/* styling for elements inside overlay */
.simple_overlay .details {
    position:absolute;
    top:15px;
    right:15px;
    font-size:11px;
    color:#fff;
    width:150px;
}

.simple_overlay .details h3 {
    color:#aba;
    font-size:15px;
    margin:0 0 -10px 0;
}
/* "next image" and "prev image" links */
.next, .prev {

	/* absolute positioning relative to the overlay */
	position:absolute;
	top:40%;
	border:1px solid #666;
	cursor:pointer;
	display:block;
	padding:10px 20px;
	color:#fff;
	font-size:11px;

	/* upcoming CSS3 features */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.prev {
	left:0;
	border-left:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-left-radius:0;
}

.next {
	right:0;
	border-right:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-right-radius:0;
	-webkit-border-top-right-radius:0;
}

.next:hover, .prev:hover {
	text-decoration:underline;
	background-color:#000;
}

/* when there is no next or previous link available this class is added */
.disabled {
	visibility:hidden;
}

/* the "information box" */
.info {
	position:absolute;
	bottom:0;
	left:0;
	padding:10px 15px;
	color:#fff;
	font-size:11px;
	border-top:1px solid #666;
}

.info strong {
	display:block;
}

/* progress indicator (animated gif). should be initially hidden */
.progress {
	position:absolute;
	top:45%;
	left:50%;
	display:none;
}

/* everybody should know about RGBA colors. */
.next, .prev, .info {
	background:#333 !important;
	background:rgba(0, 0, 0, 0.6) url(images/h80.png) repeat-x;
}

HTML Coding

Now the HTML holder

<!-- overlay element -->
<div class="simple_overlay" id="gallery">

<!-- "previous image" action -->
<a class="prev">prev</a>

<!-- "next image" action -->
<a class="next">next</a>

<!-- image information -->
<div class="info"></div>

<!-- load indicator (animated gif) -->
<img class="progress" src="images/ajax-loader.gif" />

<!-- end of overlay element -->
</div>

PHP Response

By now, you should already know how to do Ajax calls using JQuery, if you don’t please review it on JQuery’s site. What we are going to check is how is the PHP response in order to make our Image Gallery work after an Ajax call.

// ************************************
// Scenario: An ajax call to this PHP script was done and
// a POST variable has been sent in order to fill $pics from
// a database.
//
// pics == array of pictures
// ************************************

// loop the array
foreach($pics as $pic)
{
	// check the class attribute --> ibox
	// $pic is also an object with certain properties in this case
       $html .= '<div class="pic">
			<a href="'.$pic->imgPath.$pic->strName.'" class="ibox" title="'.$pic->strName.'">
			<img src="'.$pic->imgPath.$pic->strName.'" width="50" border="0" /></a>
			</div>';
}
//
// here I create the necessary javascript code to load the OVERLAY object of JQuery Tools
// please check the 'ibox' call
//
$html .= '
     <script type="text/javascript">
     //<![CDATA[
     $('.ibox').overlay({
    		target: '#gallery',
    		expose: '#f1f1f1'
		}).gallery({
		speed: 800 });
     //]]></script>';

//
// echo response
//
echo $html;

And that’s it, once your image gallery is loaded whereever you wish to from an Ajax call, the latest javascript will fire and create the Image Gallery.

Addendum

I don’t want to say that there aren’t other ways to do exactly what I did in this post. I just share what was, in my case, the solution that I implemented into my project and it worked. I will go deeper into JQuery Tools in future posts. Nevertheless, hope you find this post useful.