Dirk.Net

Impressed by fellow Chiang Mai expat’s site gt-rider.com I was looking for an gallery/slideshow javascript similar to JonDesign’s SmoothGallery (jdgallery), but working with jQuery rather than mootols. jdgallery combines slideshow, image title overlay and many different transitions in an aesthetically appealing package.

The search led me to the conclusion that the transitions (slideshow functionality) should be handled by a different script than the actual image display. For the former there is the excellent jQuery Cycle plugin.

So how do we get text displayed over the image?

One solution might be to use a jQuery gallery plugin that can do titles over images. fancybox is such a package. For an impressive mashup of fancybox and cycle you might check out this site and look at the source code, js and css. You just need the two plugins (fancybox and cycle) and then call

$(’#your_element_collection’).cycle();

I found all this a bit thick and heavy for my needs, but certainly useful to keep in mind and add to the toolset. Then there was the recent image title demo by Chris Coyier from css-tricks.com which demonstrates a simple technique to display a text title on top of the image via a custom jQuery plugin, which improves on the common h2 + spans technique. In the comments David Chambers posted a pure-css image title solution, using a an html definition list. This is arguably a more semantic markup than the commonly used h2 tag.

Anyway, I mashed this up with the cycle plugin and created a small demo app which you can check out from github. or watch the demo. This might be a powerful and easy to implement way of getting text overlays over images, and then animating a slide show with the extremely powerful and versatile jQuery cycle plugin. YMMV.

=-=-=-=-=
Powered by Bilbo Blogger

Having long used jRails in place of of scriptaculous/prototype with my Rails projects, I found that the latter won’t work with the original auto_complete plugin for Rails.

So I tried a few solutions such as this which uses the auto_complete_jquery plugin,  as well as more involved solutions such as this and this one which uses HAML. However, I didn’t want to write javascript and also have all the helpers of the original plugin, to implement the solution presented in Railscast 102, with a RESTful call to the correct controller (the original plug-in doesn’t work RESTfully in its default configuration).

I ended up using the jrails_auto_complete plugin and it works fine so far. Be sure though to include all js files included with project. Aside from some minor styling issues it seems to work just like the original auto_complete plugin with the same helpers and the code used in the Railscast.

Here’s a sample text_field_with_auto_complete tag using the auto_update_element/afterUpdateElement callback which fires when the selection is made:

    <%= text_field_with_auto_complete :hotel_search,
      :destination_code, {:size => 30 },
      {:url => (destinations_path(:format => :js)),
      :method => :get,
      :param_name => ’search’,
    :after_update_element => “function(element,value){alert(’You have chosen ‘ +
      $(\”#hotel_search_destination_code\”).val());}”
    } %>

 Of course this cries out for being extracted into a helper but it can be hard to get the syntax right, especially for the callback.

Note: this article uses jQuery, Ruby on Rails and CSS. It might be useful for other combinations.

You have a list of products and don’t want to force users to search for the link to the details page. Rather, give him some hover effect for each list item and let him click anywhere on the item. The list here is displayed as an unordered list (UL), but a similar technique should work with table rows (TR), divs or other block elements.

Several techniques are applied here:

Step 1: Turn the cursor into a pointer:

.list_item {cursor:pointer}; (believe it or not, WORKS in IE6!)

Step 2: Re-style the list item when the cursor is over it:

Civilized browsers, use the :hover pseudo element:

.list_item:hover {background-color:#a1a1a1}

That abomination from hell, IE666, use JavaScript, here’s a snippet for jQuery, note the syntax of the css function:

$(document).ready(function(){ 
$(’.list_item’).mouseover(function(){
      $(this).css({’background-color’:'#a1a1a1′})
        }
)
      .mouseout(function(){
          $(this).css({’background-color’:'#1a1a1a’})
      }
);
});

Or even better, get the prior color and reset on mouseout:

$(document).ready(function(){
var orig_bg;
$(’.list_item’).mouseover(function(){
orig_bg = $(this).css(’background-color’);
      $(this).css({’background-color’:'#a1a1a1′})
        }
)
      .mouseout(function(){
          $(this).css({’background-color’:orig_bg})
      }
);
});

Step 3: Bind the click event to every list item:

As every list item likely has a link to the details  page, pilfer the url from there, no need to dig into the Rails routes. Here’s the jQuery code:

$(document).ready(function(){
$(’.list_item’)
.click(function(){
//now $(this) refers to the current list_item element, dig deeper with .find() to get the link:
var details_link = $(this).find(’a#details_link’)[0].href;
//do the ‘redirect’:
     parent.location.href = details_link;
}
)   
});

Summing up, this is all pretty easy thanks to the power of jQuery. There was no need to use Rails’ div_for to get to the product links or generate them, just get everything out of the DOM. There might be a leaner, DRYer or easier way to do this, if you know better, please post a comment.