Neo's shared items
Technology
- MakeUseOf.com
- NETTUTS
- Refcardz - Free Cheat Sheets for Developers
- Graphic Alerts
- Six Revisions
- TheAppleBlog
- Tutorialzine
- Website Magazine Consumer Corner
- Silicon Alley Insider
- ViralPatel.net
- Lifehacker
- Mashable
- Smashing Share
- ProgrammableWeb
- jQuery Blog
- Queness
- CNN.com - Technology
- Smashing Magazine
- Slashdot
- The Alagad Technical Blog Rss Feed
- ReadWriteWeb
- SitePoint.com
- Top Sharepoint Sites
- Wired Top Stories
- Newest Add-ons :: Firefox Add-ons
- Recommended Add-ons :: Firefox Add-ons
Technology
- MakeUseOf.com
- NETTUTS
- Refcardz - Free Cheat Sheets for Developers
- Graphic Alerts
- Six Revisions
- TheAppleBlog
- Tutorialzine
- Website Magazine Consumer Corner
- Silicon Alley Insider
- ViralPatel.net
- Lifehacker
- Mashable
- Smashing Share
- ProgrammableWeb
- jQuery Blog
- Queness
- CNN.com - Technology
- Smashing Magazine
- Slashdot
- The Alagad Technical Blog Rss Feed
- ReadWriteWeb
- SitePoint.com
- Top Sharepoint Sites
- Wired Top Stories
- Newest Add-ons :: Firefox Add-ons
- Recommended Add-ons :: Firefox Add-ons
Bookmark this on DeliciousSay what you will about web design trends, but the fact is: people love their sliders! Here’s twenty of the highest quality sliders available on our coding marketplace.
1. Advanced Slider – jQuery XML
Advanced Slider is a jQuery plugin that allows you to easily create XML-driven sliders, which are much easier to setup and maintain than sliders that use HTML markup.
2. Sexy Slider
SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!
3. o’Slider
Inspired by an Android OS change-screen wallpaper effect, built with a jQuery javascript library!
4. Lowrider Triple Slider
The Lowrider Triple Slider is a uniquely-designed gallery with a contemporary look that displays three images at a time. Upon each rotation, the images slide into their frames from different directions. The directions reverse if you move backwards in the slideshow order. Each set of images has a corresponding button below the gallery. If the slideshow is set to run automatically, the buttons will follow along and become highlighted when their corresponding images are shown. To skip to a set of images, simply click their button.
5. SV Slider- Slideshow Script
SV Slider is a script to make it easy for you to build a custom slideshow, be it a featured content slideshow or just an image gallery. The Idea behind it is that you create the html/css to structure the slideshows look/feel the way you want and use the script to add functionality and control it.
6. JQuery Slider/Image Rotator
liJQuery Image Slider is carefully crafted slider/image rotator, full of features, easy to install and customize. Whenever you need a full featured slider image rotator or you need a simple ad banner, liJQuery Image slider will do the job with ease!
7. Jawdropper Slider
Jawdropper Slider is a jQuery image slider that comes with some really unusual transition effects.
8. Slider Pack – 2 Featured Sliders
9. Quartz Slider
Quartz slider is a beautiful slider that comes in 13 effects in total ! Including 6 html5 based transition and 7 jQuery slider effects. Fallbacks nicely to jQuery slider. Effects are perfect for portfolio and photography websites. Supports inline comments and lot of options.
10. Lowrider Triple Slider – WordPress
Try something different. Lowrider Triple Slider is a non-traditional slider for WordPress.
11. Lateral Slider
Lateral Slider is a jQuery plugin used to create a clean, animated image slider on a webpage. It includes a gamut of features as well as great browser support. Refer to the information below for specifics:
12. jQuery Banner Rotator / Logo Slider
13. jQuery Banner Rotator / Slideshow
14. Boutique Carousel
A ready to use jQuery slider/carousel to present your images in a unique, smooth and customizable way.
15. DDSlider – 10 Transitions – Inline Content Support
DDSlider introduces a new easy-to-go slider with 9 different unique transitions (+fading & random—11 total) that support Inline Content. You can also have multiple sliders in the same page
16. jQuery List Style Rotator
This is a jQuery list style banner rotator featuring multiple transition effects.
The scrollable list allow for easy navigation of your images.
The banner rotator is also fully re-sizable and configurable through the plugin’s parameters and css file.
17. Nirvana Slideshow
Nirvana is a beautiful slideshow with over 12 transitions including never before seen mask transitions. Thats not it, you can use mask transitions on divs, image etc.
18. svUltimateSlider- 30 transitions + build your own!
svUltimateSlider is a jQuery plugin meant to make it easy for users to create some amazing content sliders/slideshows. The focus during the creation of this plugin was allowing users to easily control/define transitions.
19. AviaSlider – jQuery Slideshow
AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.
20. Featured Box
With this script you can make a nice interactive slide gallery like you find on every big site these days. Because the script is highly customizable you can use this script for lots of purposes.
The Full Collection
We maintain a full collection of the top selling sliders on CodeCanyon. You can bookmark it for future reference!
<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'JW5meKfy3fY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
This example will play a video for several seconds and then stop playback. An instance of YT.Player is used to control the player, defined by script loaded from http://www.youtube.com/player_api . For more information about the API usage, as always, please consult our Player API documentation and let us know what you think on our Developer Forum.
Cheers,
-Jarek Wilkiewicz, on behalf of the YouTube Player Team
Considering a job in IT? We've covered some of the reasons that perhaps you shouldn't and what could be done about them. But there are plenty of good reasons to consider a career in IT. For example: good pay, better than average job prospects and the chance to work with cutting edge technology. However, there are a few things you should know before you get into the industry. ZDNet's Jason Hiner has compiled a list of 10 dirty little secrets you should know about working in IT.
Sponsor
Please note that Hiner's advice is for people like network administrators, IT managers, and desktop support professionals - not programmers and developers.
- The pay in IT is good compared to many other professions, but since they pay you well, they often think they own you
- It will be your fault when users make silly errors
- You will go from goat to hero and back again multiple times within any given day
- Certifications won't always help you become a better technologist, but they can help you land a better job or a pay raise
- Your nontechnical co-workers will use you as personal tech support for their home PCs
- Vendors and consultants will take all the credit when things work well and will blame you when things go wrong
- You'll spend far more time babysitting old technologies than implementing new ones
- Veteran IT professionals are often the biggest roadblock to implementing new technologies
- Some IT professionals deploy technologies that do more to consolidate their own power than to help the business
- IT pros frequently use jargon to confuse nontechnical business managers and hide the fact that they screwed up
These about right, and you can read more about each "secret" in the original article. There are two things I'd add:
- Even though you'll hear a lot about how there are "so many" IT jobs, you and your colleagues will often have trouble finding jobs. Why? Because most of those positions will demand very specific skill sets that are hard to acquire without direct experience
- Even though the pay looks good, many IT jobs are temporary contracts with no benefits. And you may go months at a time without working (see above).
Photo by The Trial
DiscussHere is what we’re going to build together today. Click the image to view the live demo.
Step 1: Getting files
We could have created our theme from scratch, but there’s no need to reinvent the wheel when there’s tools that can help you save lots of time. The tool we’re going to use is called Blank Theme. It is a functional WordPress theme, but without any styling. That way, it can be used as a starting point for creating your own themes. For example, I’ve used Blank Theme to create the current Cats Who Code theme.
Blank Theme has been created by Chris Coyier and it can be downloaded here. Get a copy and unzip it on your server or hard drive: We’re going to start. Optionally, open the style.css file and modify the theme name to fit your own needs.
Step 2: Header and Footer files
As we’re going to create a theme that will rely much on jQuery, the first thing we have to do is to link to jQuery and the jQuery Mobile files. You can either download the files individually and link them to the theme, or you can use jQuery’s CDN and link the online versions to your theme. I personally prefer linking to the online version, but it’s up to you.
Open the header.php file from the Blank Theme directory, and insert the following code to link to jQuery Mobile, within the <head> and </head> tags:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
Once done, the required jQuery files are now linked to our theme. But we’re not done yet with header.php. As jQuery Mobile uses HTML5, we have to modify the doctype. Replace the first 6 lines of the file with:
<!DOCTYPE html> <html> <head>
Then, scroll down to the bottom of the file and locate the <body> tag. Replace everything from the <body> tag until the end of the file by the following:
<body <?php body_class(); ?>>
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header">
<h1><?php bloginfo('name'); ?></h1>
</div>
<div data-role="content">We just dove in jQuery Mobile with the code above. What? We haven’t even wrote a single line of JavaScript! That’s right. jQuery Mobile doesn’t need you to write any JavaScript. All it needs is some <div> tags with the proper data-role attribute.
As an explanation, take a look at line 3 of the code above. Have you noticed the data-role="header"? It describe a header bar. If you save the file and view your theme right now, you’ll notice a header bar on the top of the screen, with your blog name.
Now, save header.php and open footer.php. Replace its content by:
</div><!-- data role content-->
<div data-role="footer" class="ui-bar">
<a href="#jqm-home" data-role="button" data-icon="arrow-u">Up</a></div>
<?php wp_footer(); ?>
</div><!-- data role content-->
</body>This simple code will insert a footer bar to our theme, with a button that will scroll up to the header when the user will tap on it. Did you noticed the data-icon attribute? It allows you to specify which kind of icon you want. In our case, we want an up arrow, but there’s lots of different icons you can use.
Step 3: The homepage
Now, let’s code our homepage. As we’re building a theme for mobile devices, we do not need anything fancy. Let’s build a list of our recent posts. To do so, open the index.php file, locate the loop, and replace it by the following code:
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;endif ?>
</ul>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>Save the file and take a look to your theme: It looks great! We now have a list of posts on our homepage. Once again, we have a very good looking list, with some nice transition effects, without coding a single line of JavaScript. That’s the magic of jQuery mobile.
The list is created by using the data-role="listview" attribute on the unordered list. The other attributes specifies the appearance of the list. Want to experiment a bit? Simply replace data-theme="c" by data-theme="b" and see what happens.
Now, modify the loops of the search.php and archive.php files like we did with index.php.
Step 4: Post and pages files
By default, the single.php and page.php files from the Blank Theme looks good in our mobile version, so we do not need to modify those files. Though, we can do something to enhance user experience: Mask the comments by default, and show them only if the user decides to. This can be done extremely easily using jQuery mobile.
Open comments.php and locate line 15. Insert the following line:
<div data-role="collapsible" data-state="collapsed">
Then, go to line 31 and insert a closing </div> just before the else statement. Save the file and have a look at one of your posts: Comments are now masked by default, and a tap/click on the bar display them. If you prefer to show the comments by default, no problem: simply remove the data-state="collapsed" attribute. That’s all we need to create a collapsible content block.
Did you noticed that on posts, the header bar is showing a “Back” button? A click/tap on it will take you back to your blog homepage.
Step 5: Implementing search
Right now, we have a theme fully optimized for mobile devices. But it is missing something important: An easy to access search bar. Open your searchform.php file and replace its content by the following:
<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<div data-role="fieldcontain">
<input type="search" name="s" id="search" value="" />
</div>
</form>After you saved the file, reopen index.php and include the search form between the get_header() function and the unordered list which contain our posts:
<?php include('searchform.php'); ?>Our homepage now has a working search form. Right now, our theme is done and we can use it on a production site.
Step 6: Final touches
Of course, even if the theme we’ve built is perfectly functional, there are still a lot of things that can be done to enhance its look and functionality. For example, I have noticed that the search field is smaller than the list items. In order to make the search field as wide as the list items, paste the following in style.css:
.ui-input-search{
width:96% !important;
}That’s all for today. I hope you enjoyed this tutorial. If you want to download the finished theme, just click here.
Also, I just redesigned my other blog Cats Who Blog so don’t hesitate to visit it or grab the RSS feed to read it later. The blog is now 100% focused on tools to make your life as a blogger, developer or designer easier. Enjoy!
