Seatability Redesign

  • https://seatability.com

    The CSS for this site was built 100% from scratch. The front page slider was built using the jQuery Cycle plugin, and it is used elsewhere in the site. The product and blog listing pages were designed using the DataTables jQuery plugin.

    I’m pretty proud of the drop shadows. It uses the onion skin technique, so there are three images involved, but it will work on any sized container. All I do is add the class “dropshadow” to any object, then I have a jQuery line that adds three divs on top of it that do the onion skinning for me.

    The other pretty cool thing about this site is on the product pages. Each product has its own album on our Picasa Web Albums login, then the page automatically parses in the image feed from Picasa to load the Cycle plugin. It uses three different sized images from Google for the thumbnail, main photo and the zoomed in photo.

Viewing 3 replies - 1 through 3 (of 3 total)

  • How does this relate to the forum on the Hybrid theme? Is this spam or just misplaced?

    @ploobers

    What slider did you use?

    @edkilby

    The name of the forum is “Your WordPress: Strut your stuff.” The point of this forum is to show off your site.

    Thread Starter Derek Perkins

    (@ploobers)

    @edkillby – The site was designed on top of the Hybrid theme with a lot of help from the ThemeHybrid community.

    @greeshady – I used the jQuery Cycle plugin – https://malsup.com/jquery/cycle/. It’s a very robust plugin with a ton of options. I only used the most basic transitions on the site, but you can do just about anything you can think of with just a few changes to the javascript call.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Seatability Redesign’ is closed to new replies.