jQuery Easy Slides v1.1 - Possibly the easiest to use jQuery plugin for making slideshows Possibly the easiest to use jQuery plugin for making slideshows! This is Easy Slides - Possibly the easiest to use jQuery plugin for making slideshows! Thank you for trying it out, I hope you will find it useful. Documentation Purpose A friend of mine who is currently beginning his journey into the world of jQuery asked me how I would go about making an image slideshow. Although there are plenty of features to make this more than just a basic slideshow plugin, the list of features (and options) are not extensive. jQuery Easy Slides also has the advantage of being fairly light weight, with both Javascript and CSS weighing in at just under 2.1kb. Usage Preparing Your Images Before we delve into Javascript and CSS, the first thing you should do is gather and prepare the images for your slideshow. So for example, if you want a slideshow with 3 images, you should name your files 1.jpg, 2.jpg, 3.jpg. Which Files Do I Need to Use? Preparing Your HTML & CSS Setting Up Easy Slides In jQuery Examples
QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler jQuery QuickFlip 2 jQuery QuickFlip takes any piece of HTML markup and flips it over like a card. The effect is similar to the UI animation on the iPhone Click to flip panel I’m happy to announce the release of QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. Download QuickFlip 2 for jQuery Read the QuickFlip documentation QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. What’s new in QuickFlip 2? QuickFlip 2 is now even easier to implement. Additionally, QuickFlip’s new version makes triggering the flip effect much simpler due to a new flip function that can be attached to any jQuery selector. Download QuickFlip 2 QuickFlip Examples Basic QuickFlip example A ton of QuickFlips with a hover effect How to use QuickFlip 2 First let’s set up our markup.
25 Fresh and New jQuery Plugins and Tutorials-Speckyboy Design Magazine | Speckyboy Design Magazine With jQuery becoming ever more popular, the volume and quality of plugins and tutorials that developers are releasing and writing are increasing rapidly. If you are looking for the latest in jQuery plugins this is the post for you, all the plugins and tutorials in this post are new and fresh, they have only recently been published (within the last six weeks). vTip Download Plugin »View Demo » vTip is designed to quickly provide lightweight (706b js, 272b CSS, 270b image) tooltips, using jQuery any element with a class of "vtip" will have it’s title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script. QuickFlip 2 Download Plugin »View Demo » QuickFlip 2 is a major reworking of the original Quick Flip plugin, it is a plugin that flips any piece of HTML markup over like a card. Juitter Download Plugin »View Demo » jPlayer Download Plugin »View Demo » MopBox Download Plugin »View Demo » MopSlider Download Plugin »View Demo » jLayout PassRoids
Top 20+ jQuery Slideshow and Image Gallery Tutorials Using slideshow is a great technique to show your featured content or your best image gallery in a limited amount of space is a good way to engage the reader. And with jQuery you can create dynamic and interactive effects for websites. But before you got ahead here are our previously jQuery Slideshow and Image Gallery related post: jQuery Roundrr – How To Create Circular Image Galleries With jQuery by Addy Osmani How about displaying your images or items around a shape like a circle or an ellipse instead?. In today’s post I’ll be showing you how to do just that with a brand new plugin I’ve written called jQuery Roundrr. Tutorial Demo Preview A Beautiful Apple-style Slideshow Gallery With CSS & jQuery by Martin Angelov This week, we are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. Tutorial Demo How to Create a Simple iTunes-like Slider Tutorial Demo Create an Image Rotator with Description (CSS-jQuery) Tutorial Demo Tutorial Demo
38 jQuery And CSS Drop Down Multi Level Menu Solutions Hello again, it’s time for the comprehensive programming article. Here you’ll find 38 mainly CSS and jQuery dropdown menu or just multi level menus with downloadable files and explanations as well. Mostly they are free. My favorite here is the first pick – Outside the box with a very unique navigation menu (free) and Mega Menu, which is premium. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Oh..and little tip – shorten your developing process with already premade menus, which can be easily modified with a little touch of CSS. Table of Contents: Are The Best jQuery Dropdown Menu Solutions Free? But well, also be aware when each code has been created, has it got some updates through time? At least I am doing my designing process like this – What has been your experience? And while you are figuring answers – enjoy this quality article! Wait but before..here is.. 1.
Pulling Your Flickr Feed with jQuery | Viget Inspire Feeds are the easiest way to view updated content, whether it's through a feed reader or outputted onto a web site. There are many different types of feeds, such as RSS or Atom, and many different ways display them on your site, such as using MagpieRSS to parse an RSS feed in PHP. However, you can also display feeds on your site using JavaScript, so in this post I'm going to be talking about a feed format called JSON and how you can use JavaScript to parse it out and display it. JSON (JavaScript Object Notation) is a data format that is easy to read and language-independent, meaning you can parse it using any programming language. Finding Your Feed If we go to the Viget Inspire collection on Flickr, we can click on the feed (orange button, bottom of the page) and bring up a RSS 2.0 feed of all the images in our pool. Bringing It Into jQuery So now that you have your JSON feed, lets put it to good use. Why Does Flickr Do That?
Flickr Photobar Gallery After we got a lot of great feedback for our image galleries we decided to follow some of the suggestions and create a gallery that uses the Flickr API. The aim was to build a bottom photobar that one can easily integrate into a website. It is hidden initially and slides up […] View demoDownload source After we got a lot of great feedback for our image galleries we decided to follow some of the suggestions and create a gallery that uses the Flickr API. For our demo we used the awesome photostream by tibchris. To get familiar with the Flickr API, you can find some information on the Flickr Services website. So, let’s begin! The Markup The HTML consists of one main wrapper for the whole photobar. As you can see, a lot of elements will be hidden in the beginning. The CSS Since we want this gallery to work as an integrated part of any website, we will give most of the elements a fixed position. Ok, so let’s define some general styles first: The photobar div will have the following style:
Animated Menus Using jQuery » ShopDev Website Design Blog I recently stumbled upon Dragon Interactive (dragoninteractive.com). It’s a pretty well designed site. However, the pièce de résistance is their rather cool animated menu. Now… had this been designed in Adobe Flash, I wouldn’t had paid much attention. A closer inspection revealed that the menu is plain XHTML, CSS and Javascript. Designing The Sprite To begin with, you will need to build your design in Adobe Photoshop - or some other illustration program. The XHTML Markup Here is the XHTML markup that is used in the demo: As you can see, an unordered list is used to structure the menu. The CSS For the demo, I assigned the repeating image as a background image for the <ul> element. Notice that in the above CSS, “list-style:none;” is used to prevent styling the list using the default bullet point format. Now we get to the good stuff! Each column represents a different link. This is because the “Home” button was designed such that it has a height of 81px and a width of 159px.