Slider Gallery
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch. How to Solve the Problem To create the slider controlled gallery, we need the following: Markup that allows us to place several items within a list, and that overflows out of sight.A slider widget to control what subsection of products we can see.Logic to translate the sliders position to slide the products inversely (i.e. we slide left-to-right, the products go right-to-left). I’ve provided a screencast to walk through how create this functionality. Watch the slider gallery screencast (alternative flash version) View the demo and source code used in the screencast jQuery UI jQuery UI is “a set of themable widgets and interactions”. jquery.dimensions.jsui.mouse.jsui.slider.js HTML Markup jQuery
jQuery for Complete Beginners: Part 3 | Graphic and Web Design Blog
Welcome to the third post in this series, taking you from jQuery novice to jQuery expert. The past two weeks have essentially just listed functions that you will need to know. Today we are going to put the skills we’ve learned into practice (as well as meeting new things) and create a basic accordion. An accordion is a very good way of showing lots of content in a small area. Firstly I set up the accordion itself: And then just some very basic CSS to make it look a bit clearer: This leaves us with something similar to this. Now we can get onto the JavaScript. All I am doing here is selecting all the heading 3 elements and all the paragraphs, and saving them to two arrays. However I find it quicker to just put a comma between them and emit one of the ‘var’s. Once we’ve done that we now need to hide all but the first paragraph. First I hide all the paragraphs and then use eq(0) to select the ’0th’ element of the ‘paras’ array. And now we can write the code for hiding and showing.
fancyBox - Fancy jQuery Lightbox Alternative
Contextual Slideout Tips With jQuery & CSS3 – Tutorialzine
Martin Angelov By now, you’ve probably heard about Adobe’s new CS5 software pack. Also, you’ve probably seen their product pages, where they present the new features of the suite. Apart from the great design, they’ve also implemented an interesting solution for showcasing the new features their products are capable of – using contextual slideout tips. Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines. The idea The main idea is to create an easily configurable set of contextual slideouts. To create a slideout element, you need to include a regular paragraph p tag to the page. Contextual Slideouts Step 1 – XHTML Now lets take a look at the structure of the paragraph tags you should add to the page, and how they are configured. demo.html slideout markup Structure of the Slideout Step 2 – CSS Closed Slideout
Slick Drop down Menu with Easing Effect Using jQuery & CSS
Drop-down menus are an excellent feature because they help clean up a busy layout. When structured correctly, drop-down menus can be a great navigation tool, while still being an attractive design feature. Continuing from “DAY2: Fading Background Color With jQuery .animate()“, today we would like to take a look at another effect that we can create using the .animate() function. In this tutorial we’re going to be using the jQuery & CSS to create an attractive and functional dropdown menu. We’ll have a multilevel <ul>, which has a series of <li> elements each containing different blocks of <ul>. We are going to use jQuery to display the submenu items in and out of view. Make sure to subscribe to our RSS Feed and follow us on Twitter to get updates on our new post series: jQuery .animate() function and what you can do with it. Let’s have a sneak peak about what we are going to create today. Check out the demo of “Slick Drop down Menu with Easing Effect With jQuery & CSS”. Step1. Step2.
How to Integrate jCarousel to Wordpress Theme - Padd Solutions
There are at present two themes developed by Padd Solutions using jCarousel as featured gallery: Masugid and Masipag. Though we released only two themes using the said feature gallery, we would like to share on how to integrate jCarousel to a WordPress Theme which is used for the slideshow of featured posts. The scope of this tutorial covers the list of Javascript files needed to run, adding the thumbnail generator script, returning posts which can be used as a featured post, and steps on how to modify the WordPress theme files in order to add the function. Requirements jCarousel Plugin. TimThumb Script. Any WordPress Theme. Step 1: Altering the Directory Structure Under wp-content folder, create folder called tt-script. Next, under your theme folder, create a folder named js (or whichever is convenient to you) and put your jCarousel Javascript file inside the said folder. Open the header.php file. Then, download the jcarousel-images.zip file. Files to be downloaded Step 3: Getting to work
MooTools Zoomer Plugin
I love to look around the MooTools Forge. As someone that creates lots of plugins, I get a lot of joy out of seeing what other developers are creating and possibly even how I could improve them. One great plugin I've found is Zoomer by Anton Samoylov. The HTML Note the big attribute within the image is where the you place the path to the larger image. The MooTools JavaScript Using Zoomer is as easy as the code above -- simply provide the ID of the image and the custom smooth setting. Sweet huh? Be Heard Tip: Wrap your code in <pre> tags or link to a GitHub Gist! Older Growl-Style Notifications Using MooTools Roar Newer Smooth Scrolling with MooTools Fx.SmoothScroll
jQuery et Wordpress
Jquery Plus WordPress : Plugins and Tutorials Posted by Vikas Ghodke on April 7th in Tutorials. Worpress is one of the famous blogging and CMS platform used by bloggers and now many corporate websites too. And jQuery is one of the most famous javascript framework used this days. So today we have collected some plugins along with tutorials which combines both wordpress and jquery. Tweet Blender Tweet Blender is a WordPress plugin and a Widgetbox widget that blends Twitter tweets from multiple sources. Image Drop Shadow Image Drop Shadow wordpress plugin adds stylish drop shadow to images posted on your blog using jQuery. OpenID OpenID is an open standard that allows users to authenticate to websites without having to create a new password. jQuery-Pagebar jQuery-Pagebar show instead of the next and prev links a jQuery slider as a modern pagebar. jQuery Lightbox For Native Galleries Shadowbox JS Create a jQuery Carousel with WordPress Posts Used to overlay images on the current page. WP Wall
