Articles tagged “javascript”

Implementing an image gallery using facebox and will_paginate

On VisitaCSA we’re using defunkt’s facebox to show places images at large. Facebox is a great general-purpose lightbox, because it is fast, stable, is based on jQuery and has got a really clean API.

But we needed more than a simple display lightbox, because we wanted our users to navigate easily between all images, possibly without modifying facebox at all. The solution turned out to be pretty simple, thanks also to the will_paginate plugin we were already using. It all burns out to have:

  • A Photo model, instrumented with the has_attachment method
  • Resource routes for photos (map.resources :photos, :only => :show in config/routes.rb)
  • A show controller method in the PhotosController that calls .paginate with a :per_page argument of 1
  • An HTML view for the photo resource, that has pagination controls using the will_paginate helper
  • Some jQuery code hooks onto the pagination links and make the browser load via AJAX the next photo directly into the facebox.

continue reading >>>

Posted at 00AM on 02/22/09 | 1 comment | Filed Under: development

The obfuscated blinking border

This is the obfuscated piece of Javascript code that implements the red border and loads Google Analytics on the Segmentation Fault site :

     77   <script type="text/javascript">// <![CDATA[
     78   var theLoadSequenceToRunAfterTheDocumentHasBeenLoaded = function() {
     80     // The blinking border
     81     //
     82     (function(t){// (C) 2009 vjt <>
     83       var $=function(_){return(document.getElementById(_));};var ee =[
     84       $('n'),$('s'),$('w'),$('e')],e,_=true;setInterval(function(){for
     85       (var i=ee.length;i&&(e=ee[--i]) ;_) {e.className=e.className?'':
     86       'b';}},t*08); /* .oOo.oOo.oOo. ^^^^^ -*** * *** *** *******- **/
     87     })((4 + 8 + 15 + 16 + 23 + 42) * Math.PI / Math.E + 42/*166.81*/);
     89     // Google analytics
     90     //
     91     try{var pt=_gat._getTracker("UA-1123581-3"); pt._trackPageview();}
     92     catch($aMarvellousErrorThatWontBeDisplayedOnTheUserBrowserAtAll){}
     94   }// end of theLoadSequenceToRunAfterTheDocumentHasBeenLoaded routine
     95   //]]></script>

To me, it looks like a contrived melody, or complicated poetry. It’s evil engineering, I know. But when I was writing it, I felt exactly the same I did while writing verses with rhymes. _why’s words are absolutely pertinent here: “until programmers stop acting like obfuscation is morally hazardous, they’re not artists, just kids who don’t want their food to touch.”.

You can view the code with syntax hilighting on github, or with the “View source” function of your browser while you’re on the segfault site. :)

Posted at 04AM on 02/20/09 | 0 comments | Filed Under: development

The jQuery ajax-upload-fu plugin

I recently wrote jQuery plug-in, that allows AJAX file uploads without using a fixed file input button. It achieves its goals by installing an OnMouseMove handler over the selected elements, and moving the input button under the mouse cursor.

The quote that inspired this code is: “If Muhammad won’t go to the the mountain, the mountain will come to Muhammad”,the opposite of the more known proverb :).

It has been spinned off from the Visita CSA application JavaScript codebase, see the gist for more information, and have a look onto the live app code for an example of its usage.

Here is the source code:

continue reading >>>

Posted at 09AM on 01/29/09 | 0 comments | Filed Under: development

Remove a lightwindow trigger link after an AJAX call

Well, this is the result of 2 days of head-banging with lightwindow:

Index: public/javascripts/lightwindow.js, line 444
  _removeLink : function(removed) {
    // remove it from the links array
    this.links = this.links.reject(function(link) {
      if (link == removed.href)
     return true;
    // remove it from the gallery links array
    if (gallery = this._getGalleryInfo(removed.rel)) {
      klass = gallery[0];
      name = gallery[1];
      if (this.galleries[klass] && this.galleries[klass][name]) {
        this.galleries[klass][name] = 
          this.galleries[klass][name].reject(function(link) {
            if (link == removed.href)
              return true;

call this function from your .rjs template, something like this:

page << "myLightWindow._removeLink($('element').down('a.lightwindow'));" 

More details to follow, when this work will be complete ;).

Posted at 17PM on 05/21/08 | 0 comments | Filed Under: development


This is, a weblog by Marcello Barnaba (@vjt) about technology, ruby, development, software, the internet, entertainment, politics, sociology, and the answer to Life, Universe, and Everything (42).