Subway Map Visualization jQuery Plugin » TechBubble. I have always been fascinated by the visual clarity of the London Underground map.
Given the number of cities that have adopted this mapping approach for their own subway systems, clearly this is a popular opinion. At a conference some years back, I saw a poster for the Yahoo! Developer Services. They had taken the concept of a subway map and applied it to create a YDN Metro Map. Once again, I was in awe of the visual clarity of this map in helping one understand the various Yahoo! University departments, offices, student groupsGovernmentOpen Source projectsInternet startups by category More examples on this blog: Ten Examples of the Subway Map Metaphor.
Fast-forward to now. With these goals in mind, I started creating my jQuery plugin. Download or get it on GitHub Step-by-Step Guide Here is a guide to using the Subway Map Visualization jQuery Plugin. Demo: Here’s a demo of the finished map described in this guide. Referencing the Plugin 2. Using the Plugin HTML Markup for Plugin Map Rendering 3. Beautiful advanced jQuery background image slideshow. A couple of weeks ago, I received an e-mail from a guy named Patrick.
He just visited the website from Philadelphia and wanted to know how to create the slideshow header that's on top of the page. Since I was also impressed by the effect, I took the time to recreate this effect myself. Our focus is the background image slideshow (including the text), not the other things (like the dropdown menu). With the use of transparent PNG's, some HTML, pretty nifty CSS and jQuery, we can make this technique work. Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow. It features changing text and playback controls. Start up your HTML/CSS/jQuery editor and let's see how you can create this effect yourself!
The idea To understand what we need to make, I created a simple reference image. Now that we truly know what we need to create, we can start coding! Having said that, this is the HTML I came up with. <div id="header"><! jQuery And that's about it! Image gallery with fancy transitions effects « Workshop. I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition effects. Mostly that was fading and sliding effects. I wanted something different so I decide to made my own slideshow gallery plugin for jQuery. That’s how was born jqFancyTransitions. My main idea was to build some ‘strip curtain’ effect and I start from that.
At the beggining you will need to download jQuery and jqFancyTransitions and include them on your page similar like this : After that you will need some placeholder with some images for your slideshow. When you set everything time is to call jqFancyTransition and tell him where to do his job. The code above is enough to made your fancy transitions gallery 400px wide and 300px high. Wavezippercurtain Of course, you can made custom effect with set of options that you can use to set speed, number of strips, direction, type of effect, etc. Changelog.