MegaGallery, Part 7: Finishing Touches (jQuery)

In this post, we will finish up with the MegaGallery series. I wanted to add some hover effects to the thumbnails, and also protect the images from people who will right-click and save-as on the images. If you want to seel the images in the gallery, disabling the right-click is a good way to protect you images. NOTE: Someone could still right-click with javascript turned off; so, this is not a perfect solution.

Disable Right-Click Context Menu

First, we need to create a javascript. You can do this inline in the head of your document. I usually put it in it’s own file, because I like to keep my code and markup separated as much as possible. We will start up by telling the browser to start the script once the document is ready. I will use the jQuery short-cut method here, since jQuery is the only client-side scripting language we are using.

$(function() {

});

Now, the code to disable the right-click.

$(document).bind("contextmenu",function(e){
 return false;
 });

We are telling the browser that when someone tries to bring up the right-click context menu, immediately return false. This means the context menu will never show.

The Hover Effects

Here the code.

$("#gallery a").css("opacity", 0.3)
 .hover(function() {
 // hover over
 $(this).stop().fadeTo(500, 1)
 .parent().css("border-color", "#FF0000");
 }, function () {
 // hover off
 $(this).stop().fadeTo(500, 0.3)
 .parent().css("border-color", "#444");
 });

The first line takes all the links in the gallery and sets their opacity to 30%. In the next line, we use the hover() function to control what happens when the user hovers on and off the thumbnail links. The hover() has two parts. The first part is when we hover over the image link, and the second part is when we hover off the image link. When we hover over the image, we bring the opacity to 100% using the fadeTo() function. We also change the border color of our list item by calling the parent() function, and changing its CSS properties using the css() function. When the user hovers off the image, we fade back to 30% opacity and return the list item border color back.

You will notice that before we call the fadeTo() function in lines 4 and 8, we call the stop() function. This stops any animation in progress. we need this to stop the images from going into a Christmas lights effect when the mouse goes quickly back and forth over the images.

Fade effects on thumbnails

Fade effects on thumbnails

Wrap Up

This has been a fun project, but I want to leave you with some ideas about how you could improve the MegaGallery on your own.

  1. Add error checking – we haven’t really done much of that.
  2. Check for other directories in the image folder.
  3. Turn it into a PHP class. Maybe an implementation of FastTemplate.
  4. Build a back end for uploading images and changing settings.

It’s been fun. Back next time with something new. Check out the Completed Sample.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s