In this image gallery, I wanted to create the effect of intersecting lines to highlight the selected image in a grid like a crosshair. I used differing opacities of images horizontally across from the current image and vertically above or below the image to achieve this effect. This gallery uses jQuery Masonry to achieve the animated resizing effect of the grid.
Archive for 2011
Image cropping is the most important and required part in social media projects. In this post my friend had implemented image cropping functionalities such as upload image file into physical location, cropping image using jquery and resizing image into small resolution.
Event delegation may be some techie term that you’d rather shy away from, but if you’ve not already used it, this example will show you a simple but powerful use of event delegation.
Found a tutorial about image loading using Jquery written by Remy Sharp while trying to create the same function for company i am working at. Remy has publish the core script and here i will modify it to make it work for multiple images, and load in sequencing order.
In this guide you will lern how to make a box that shows a preview of the description on mouseover.
The idea of this plugin is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, it will take advantage of that body class when you are writing your CSS to size the different elements appropriately.
In this tutorial we will use JQuery and a plugin named jQueryRotate.The main idea behind making this watch is to rotate the three images according to the actual time tt/mm/ss. We split that time up in hours, minutes and seconds. Then use some math to convert each of the three values into an angle between 0 and 360. one for each of our three pointers. Then we use a timer function in JQuery to do that every second. That will make it look like the pointers is ticking like a real watch.
VisualSearch.js enhances ordinary search boxes with the ability to autocomplete faceted search queries. Specify the facets for completion, along with the completable values for any facet. You can retrieve the search query as a structured object, so you don’t have to parse the query string yourself.
This code checks/unchecks all checkboxes within the same fieldset. Simple and semantic.
Highlight increases usability by highlighting elements as you interact with the page.
Its primary use is for forms, but it can also be used for tables, lists, or any element you specify. It can also be used to toggle elements on and off, for example, table rows.