Archive of 2010 February

Building your own Lightbox with Javascript (part 1)

Posted on Feb 21 in General, jQuery, Tutorials | (1) Comment

See the final result of part 1: Demo Why write your own lightbox? The simple answer is: to learn how it’s done. If you’re going to use if for an image gallery, embed flash and videos or even to load Ajax content you are probably better off using one of the many existing lightbox plugins [...]

See the final result of part 1: Demo

Why write your own lightbox?

The simple answer is: to learn how it’s done. If you’re going to use if for an image gallery, embed flash and videos or even to load Ajax content you are probably better off using one of the many existing lightbox plugins (Thickbox, FancyBox). If you plan to use a lightbox for more complex applications like the admin back end of a cms (see the future Drupal 7 Admin Panel ) then you should either fully understand every line of your plugin or write your own.

This tutorial assumes some knowledge of Javascript. If you are just starting Javascript I highly recommend watching Jeffrey Way’s Javascript from null video series on nettuts.com.

Read More

Adding multiple images to a Rails model with paperclip

Posted on Feb 13 in General, Ruby on Rails, Tutorials | (26) Comments

How to add multiple images to a rails model – all in one form!

The Goal

I have been working on improving the admin section of a ski club website. The club sells ski trips online and they need to be able to create new trips from the admin panel. A trip has a title, description, date and price. For marketing reasons when the trip information is displayed on the website a number of pictures related to the trip are also displayed in a slideshow. The goal was to allow admins to add a new trip to the website (including the images) through a single form. Up until now, admins had to create the trip text data and then add the images separately through another form.

The Solution

The solution makes use of Paperclip (the awesome file attachment ruby gem) and the nested attribute functionality that has been added in rails 2.3. If you are new to these I strongly suggest watching these two screencasts from Railscasts: http://railscasts.com/episodes/196-nested-model-form-part-1 and http://railscasts.com/episodes/134-paperclip

To install paperclip add the following line to the environment.rb file and run rake:gems:install

config.gem "thoughtbot-paperclip", :lib => "paperclip"

 Read More