I have implemented lots of concepts widely spread throughout the Internet and I truly hope that they all work. Still, lot of work to do but as soon as I have spare time I will share with all of you guys lots of PHP and JS bits and pieces that I hope we, all together, could improve in order to make a great Open Source Resource for everybody to use.

For example, I have developed a set of PHP classes that help PHP programmers to implement GMaps without the need of Javascript knowledge.

I can wait to share…

Anyway, any feedback related to my site will be highly appreciated. One more thing and very important: I DO NOT SUPPORT INTERNET EXPLORER due to its security pitfalls on the bank payment gateway and its sillly way of understanding CSS rendering and styles -and I don’t mention its JS engine at all.

Bookakar.com works only on two Spanish areas: Alicante and Ibiza, but it will grow to other areas very soon.

The jQuery programmers not happy with a new release has also created a new  jQuery API site. Check what they have done on their API site here.

John Resig will announce 1.4 release details tomorrow but meanwhile, you can download it and see for yourself.

• Download jQuery 1.4 from Google CDN
• Download jQuery 1.4 from Official jQuery website

Also, if you want to learn more about what is new in jQuery 1.4 then you might find the following resources useful:

1. 14 Days of jQuery
2. Official jQuery Blog
3. jQuery 1.4 Cheatsheet
4. jQuery on Tweeter

Check what is new or changed on this new release here.

Happy birthday jQuery! Thanks for the good work!

Any feedback is highly appreciated.

One of those days crawling I found an online tool created by kath called Ajax Load – Ajax Loading GIF Generator. There you don’t need to worry if you know how to design or not, this simple but very useful tool allows you to select the type of design you want for your ajax loading gif, the foreground and background colors and voilá, your ajax loading gif is ready to download.

For those, like me, without a clue about designing there it is, the Ajax Load – Ajax Loading GIF Generator.

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.

It was created as a demo but if anybody thinks that it could be used for something else than that let me know. Maybe I am not the only one who find this feature useful…