Image Zoom Tour with jQuery
Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. View demo Download source Today we want to share a little zoom tour script with you. The images used in the demos can be found here: image1: City Crowd image1_5: Office image2: Ikea Room image3_n: Portimão Marina Background Pattern by on The HTML Structure For the HTML structure we will have a main container and each image inside of a div with the class “zt-item”: <img class="zt-current" src="images/imageX.jpg" /> is the image in each step. The example structure above has the first initial image (zt-item-1) with two tags that lead to zt-item-2 and zt-item-3. zt-item-2 and zt-item-3 only have the back tag. Options The following are the default options:
Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows - Smashing Magazine
Advertisement A visitor comes to your website all giddy to learn more about your product, when suddenly a snazzy slideshow loads with some snap. Impressed, they go to register and are greeted by a most elegant modal window. At this point they are finally overjoyed by the velociraptor that suddenly charges across their screen. Crafting a polished and unique experience for your users is becoming ever more critical as the Web gets more overloaded. Today, we are thrilled to introduce two new jQuery plug-ins that were developed exclusively for Smashing Magazine readers to liven up your developer tool belts: Orbit, a new slider; and Reveal, a modal plug-in. Why Create Our Own? Quickly, before diving into the details, some background would be helpful. Flexibility We use these plug-ins for clients, internal projects, our apps and a number of other places. Have a look at a couple of our previous articles: Orbit: jQuery Image Slider First up is our new jQuery slider, Orbit. The Code Neato Options (kw)
30 CSS and Javascript Tabs Solutions
Tabs have been around for a long time, they are nothing new, but with so many sites (blogs, ecommerce sites, web apps…) needing to show as much content and navigation as possible, they have never been so relevant. They are the perfect web page tidying up solution for organizing cluttered content in a space-limited web page. Separating content into tabs keeps everything nice and compact, clutter free and are always at the ready should a user need it. In this round-up we have a variety of easy to use modern tabs solutions, techniques, tutorials and plugins, most of them make use of a variety of Javscript libraries (MooTools, jQuery…), but you will also find some innovative pure CSS solutions as well. Sweet Tabbed Navigation Bar using CSS3 Sweet Tabbed Navigation Bar using CSS3 → Demo → CSS3-Only Tabbed Area CSS3-Only Tabbed Area → Demo → Using CSS to Create a Tabbed Content Area Using CSS to Create a Tabbed Content Area → Demo → CSS3 Hover Tabs without JavaScript Sweet AJAX Tabs (jQuery) nanotabs
15 Fresh jQuery Menu Plugins and Tutorials
We haven’t actually taken a look at any new jQuery menu plugins in quite a long time. For the most part, the plugins below are a great platform/canvas for you to build your navigation by offering fantastic customization options that allow you to style the system as required and control its functionality. Other plugins and tutorials, although beautifully crafted, do have limited customization options and may not be suited for a typical site. Remember, having a well organized and intuitive menu is key to any sites success. naviDropDown 1.0 Plugin The naviDropDown plugin allows you to create a simple drop down menu, utilizing hoverIntent, and jQuery’s own slideUp and slideDown effects. Drill Down Menu Plugin This plugin will take any standard nested list and turns it into an iPod-style drill down menu. Memu – A simple CSS & jQuery Menu This small and very easy to use jQuery plugin can be used with or without jQuery (if you don’t want any JS on your page, just get the CSS). Cool Animated Menu
60 Useful JQuery Tutorials From 2010
60 Useful JQuery Tutorials From 2010 Posted by Prakash on December 7th in Tutorials. Web developer created some great jQuery tutorials and today we just want list some of the 2010 tutorials which really stand out from the tradition javascript effect tutorials. In today’s post we have compiled 60 the best and useful jQuery tutorials from 2010. Enjoy! Animate Panning Slideshow with jQuery Beautiful Background Image Navigation with jQuery Coding a Rotating Image Slideshow w/ CSS3 and jQuery How to Create a jQuery Confirm Dialog Replacement Making an Apple-style Splash Screen Do you want to clear the 3101.1 exams successfully in the first attempt? Elements with jQuery and CSS3 Making an Interactive Picture with jQuery Creating a Stylish Coming Soon Page with jQuery Create Custom PopUp (Modal Window) with jQuery Content Slider Using CSS and Jquery Tabbed Content with Navigation using jQuery UI Crafting an Animated Postcard With jQuery Lights Out – Dimming/Covering Background Content with jQuery Prakash
Five Useful Interactive CSS/jQuery Techniques Deconstructed - Smashing Magazine
Advertisement With the wide variety of CSS3 and JavaScript techniques available today, it’s easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience. In this article, we’ll walk through five interactive techniques that you can start using right now. We’ll cover: Besides learning how to accomplish these specific tasks, you’ll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. So, let’s dive in and start building more exciting websites! 1. The footer of David DeSandro’s website uses extruded text that animates on mouseover. View the demo First let’s set up some text (the code is copied from the original site): <span class="extruded">Extrude Me</span> And some basic styling (the code is copied from the original site): Here, we’ve applied some basic styles and added a text-shadow. text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px; Styling the Hover State 2. 3.
