2011年12月8日星期四

網頁設計筆記(二十) 中英文版之轉換


<a href="<?=langURL('/folder/eng')?>" >ENG</a>
<a href="<?=langURL('/folder/chi')?>" >中文</a>
<?php 
function langURL($file_path = '') {
   $pageURL = 'http';
   if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
   $pageURL .= "://";
   if ($_SERVER["SERVER_PORT"] != "80") {
   $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"];
   } else {
   $pageURL .= $_SERVER["SERVER_NAME"];
   }
   $baseRequest = explode('/',$_SERVER["REQUEST_URI"]);
   
   if ($file_path != '') {
   $pageURL .= $file_path;
   }
   
   $pageURL .= '/'.$baseRequest[sizeof($baseRequest)-1];;
   
   return $pageURL;
}
?>

2011年12月5日星期一

網頁設計筆記(十九) Slider JQuery

因為實在太麻煩了...都放在一起吧



http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/

http://snook.ca/technical/fade/fade.html
simple one

http://ryanflorence.com/jquery-slideshow/
都簡單

http://www.smoothdivscroll.com/
感應移動

http://brenelz.com/blog/build-a-content-slider-with-jquery/
有BUFFER

http://www.addyosmani.com/resources/roundrr/#
圓形的..勁
唔方便
Arrow滑入,下方有控制列
有Arrow ,黑色底,左字右圖
自動式,冇制
小圖用,下有推列
自動滑,Hover停止
Slidebox
右上有南點,自動滑
圖片出黑框大圖
Tab(在上方) Slider
強,要Load, 真係相簿感,有Pause,左右arrow,黑點,下方控制
下方有小圖preview

圖片名稱成一列
uNIVERSAL 用過個個...

fade in out,冇制,有title 列

JCOVERFLIP

jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.

CREATE A CUSTOM JQUERY IMAGE GALLERY WITH JCAROUSEL

COIN SLIDER

jQuery Image Slider Plugin with Unique Effects


Live Demo

LOOPEDSLIDER

loopedSlider jQuery Plugin


Live Demo

NIVO SLIDER

Nivo Slider – The Most Awesome jQuery Image Slider


Live Demo

COLORFUL SLIDERS WITH JQUERY & CSS3

The new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.


Live Demo

HOW TO CREATE A SIMPLE ITUNES-LIKE SLIDER

The new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.


Live Demo

AUTOMATIC IMAGE SLIDER W/ CSS & JQUERY

The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.


Live Demo

THE LOF SIDERNEWS PLUGIN

Base on the Jquery Framework and the Easing Plugin, The JSiderNews Plugin is a slideshow plugin that displaying images or type of content and support favious navigation to previous|next items.


Live Demo

ADVANCED JQUERY BACKGROUND IMAGE SLIDESHOW

Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow.


Live Demo

CJ FLASHY SLIDE SHOW

Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow.


Live Demo

JQFANCYTRANSITIONS

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.


Live Demo

MAKING A MOSAIC SLIDESHOW WITH JQUERY & CSS

We are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.


Live Demo

JQUERY BLINDS SLIDESHOW USING CSS SPRITES

jQuery Blinds Slideshow using CSS Sprites


Live Demo

MULTIPLE IMAGE CROSS FADE

we learn how to fade list of images through each other in continuous loop. We will also add captions and tooltips to make it more usable. This simple effect is ideal for portfolio websites, galleries or magazines where images need to be seen.


Live Demo

BARACKSLIDESHOW

I guess pretty much everyone has seen Barack Obama’s website by now, which is clearly one of the prettiest of all candidates we’ve heard of so far. Not only is it an example of state-of-the-art design, but it’s also nice to navigate and interact with.


Live Demo

The LofCoolFlashNews Plugin

In this post I want to explain how to turn old boring image viewer into a nice-looking one with jQuery. It’s simple just using some lines of java-script code. Implement this and enrich animation features to your web projects.

CREATING A ROTATING BILLBOARD SYSTEM WITH JQUERY AND CSS

In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one (the other ad) appear. We will decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just like in a rotating billboard system.


Live Demo

ANIMATE PANNING SLIDESHOW WITH JQUERY

In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.


Live Demo

CREATE FEATURED CONTENT SLIDER USING JQUERY UI

There are a few tutorials on creating featured content sliders like the one from CSS-Tricks, but it uses jQuery Coda Slider plugin. Today I’m going to show you how to create a featured content slider for your website using the jQuery UI library.


Live Demo

CU3ER – FLASH 3D IMAGE SLIDER

CU3ER – Flash 3D Image Slider


Live Demo

THE PIECEMAKER XML GALLERY

To kick us off in style, here’s the awesome Piecemaker gallery created by Björn from Modularweb. Besides the freebie, you’ll find extensive documentation and a tut explaining the native 3D features of Flash CS4. Over to you, Björn..


Live Demo

UIZE JAVASCRIPT FRAMEWORK

UIZE JavaScript Framework


Live Demo

JQUERY EASY SLIDES V1.1

Possibly the easiest to use jQuery plugin for making slideshows!


Live Demo


SlideDeck jQuery plugin


SlideDeck Lite is a limited version of the feature-rich SlideDeck Pro. It’s a great way to give SlideDeck a try and immediately improve the performance of your website.

Automatic Image Slider w/ CSS & jQuery


With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.

Quicksand


At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items.

Move Elements with Style


Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)
In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.

Nivo – A new jQuery image slider


This is a new launched image slider what use jQuery. Is cross browser and have 9 unique transition effects, navigation controls, is simple, clean, valid markup and free.

Making a Google Wave History Slider


We’ve all seen the videos (and some even got access to a developer’s preview) of Google’s latest product – Wave. Although not “ground-braking” and “revolutionary” as we’ve imagined (wonder why “over-hyped” comes to mind) it still features some great UI that will surely inspire at least a few developers to implement some of it in their works.
I, being one of those inspired people, am going to show you how to create a Google Wave-like history slider. Using it, we will enable our visitors to go back and forth in time to view the changes that take place on a comment thread.

JQuery Clock Slider


Animate Panning Slideshow with jQuery


Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well.
In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

jDigiClock jQuery plugin


Moving Boxes jQuery slider


I’m not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out.

The iPhone unlock screen in xHTML, CSS and jQuery


The iPhone: Everybody knows what it is, many people “played around” with the gadget and most people love it. I also own one of these amazing smartphones, and the looks of the software is really, really sleek and innovative (Just like we’re used from Apple).
I wanted to transfer (some) of these amazing designs to a webpage to re-create the same look and feel for webbrowsers. Today, I’m going to show you how to create The iPhone unlock screen in xHTML, CSS and jQuery.

Create Beautiful jQuery slider tutorial


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

jQuery Infinite Carousel


jQuery pageSlide


jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or “throwing”) content aside to reveal a secondary content pane.



jQuery Tools Scrollable


Making a Content Slider with jQuery UI


Creating a Slick Auto-Playing Featured Content Slider


Create Featured Content Slider Using jQuery UI


jQuery.ScrollTo


Apple Style Slider 
我喜歡這個