AjaxScroll is an lightweight jQuery plugins . Provided the ajax scollpane to replace the Next/Previous buttons, behaviour similar as Google Image & MSN Image Search.

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.

The final result is something like this:

Overview

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

Introduction

Until this day, jQuery is still blowing me away with its simplicity and robustness. As you can see, I have been concentrated to produce tutorials about it, and I just couldn’t help it! Right, this time, we’re going to learn how to create a news slider that come with the following features:

• Slideshow with Image and description/caption
• previous, next, pause and play buttons
• On mouse over, pause the slideshow, and play it on mouse out
• Sliding effect for both gallery panel and excerpt panel
• Adjustable slideshow speed
• And, finally, smarter script that will calculate width and height for the slideshow

We’re going to use scrollTo jQuery plugin during the development. A huge thumb up and big thank you to Ariel Flesler who created the plugin.

qGallery is a simple to use prototype based gallery script.

All image processing is done by the script so yo2u don’t have to worry about the images you upload on the server. All images for the skimmer graphics and the fullsize view will be created on the fly and stored in a cache directory on the server to save processing power on the server.

The script is fully customizable. You can change the size of the gallery, the interface graphics, the colors and some of the features. It’s possible to switch the skimmer overlay bar off, change or turn off the reflections, make the skimmer graphics smaller, decide what style you want for the scrollbar (windows or mac style) and a lot of other settings…

UIZE is a powerful, open source, object oriented JavaScript framework – supporting widgets, AJAX, DOM, templates, and more.

Introduction

GreyBox can be used to display websites, images and other content in a beautiful way.

Why use GreyBox:

• It does not conflict with pop-up blockers
• It’s only 22 KB!
• It’s super easy to setup
• It’s super easy to use
• You can easily alter the style as it is controlled through CSS

Examples

One website

• Launch google.com in a 500×500 center window
• Launch google.com in fullscreen window

To trigger GreyBox you’ll only need to append a rel tag on your a tags:

<a href="http://google.com/" title="Google" rel="gb_page_fs[]">Launch google.com in fullscreen window</a>

Website gallery

• Launch Google search
• Launch Yahoo search
• Launch Koders search

Image gallery

It takes very little code to display image galleries:

<a href="greybox/night_valley.jpg" rel="gb_imageset[nice_pics]" title="Night valley">
   <img src="greybox/night_valley_thumb.jpg" />
</a>
<a href="greybox/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">
   <img src="greybox/salt_thumb.gif" />
</a>

Installation

Step 1

Append following to your header section. GB_ROOT_DIR is the URL where static files are located:

<script type="text/javascript">
    var GB_ROOT_DIR = "http://mydomain.com/greybox/";
</script>

GB_ROOT_DIR should be absolute.

Step 2

Append also following scripts and one stylesheet:

<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />

AJS_fx.js is optional. It’s used for effects.

Step 3

You are ready to use GreyBox. Look on the documentation to see details and examples.

Where could it be used?

• Showing external pages
• AJAX uploading of files
• Showing internal pages (login, user preference, properties, contact formulas etc.)
• Showing a video or a flash animation
• Showing images
• Showing product information
• Admin sections
• …

What browsers are supported?

• Safari
• Firefox 1.5+
• Internet Explorer 5.5+
• Opera 8.5+

Other browsers may also be supported.

Need help? Join the GreyBox group

Please use our Google group if you need help:

• http://groups.google.com/group/greybox

You’ll need to become a member if you want to post.

Sites using GreyBox

• Video and Flash animation in a GreyBox window. Cool integration.
• Team 85
• Blablablog: Spanish version of popurls.com
• bitshaker – Check out the contact form
• OSSGear
• rig.hteo.us
• h2oworks.biz
• rescuemeanimalproject.com
• fwicki
• amstelhof.com
• Esme design – Flash games

For a recent client project, we wanted to be able to turn a list of YouTube links into a playlist. This would allow the client to manage their videos on YouTube and simply insert links to the videos on their site. With javascript enabled a nice playlist is created, whilst without javasript the user gets a regular list of links to youtube pages.

Demo showing the plugin with default options.
Demo showing the plugin set up to act like a gallery of YouTube videos.

Plugin options

Option - (default)holderId – (ytvideo)
The ID of the element (usually a div) into which the YouTube video will be inserted

playerHeight – (300)
The height of the embdedded youtube video

playerWidth – (450)
The width of the embdedded youtube video

addThumbs - (false)
Use true to add video thumbnails to each list item

thumbSize – (small)
Size of added thumbnails. Default is small, use large for larger thumbnails

showInline – (false)
If this option is true, the list item containing the link will be replaced with the YouTube video. See the gallery demo for an example of this.

autoPlay – (false)
true or false, whether or not to autoplay videos

showRelated – (true)
Set to false to stop related videos being shown at the end of the embedded video