忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[66] [65] [64] [63] [62] [61] [60] [59] [58] [57] [56

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Javascriptで見せる画像ギャラリー

Javascriptを使った、画像表示方法についての記事。

それほど新しい記事ではありませんが、
友人からAppleのTimeMachineのインタフェースを見せられ、
似たようなインタフェースを思い出したので、メモ。


SpaceGallery

AppleのTimeMachineのインタフェース?画面効果がこんな感じのようです。
アルバイト先にTimeMachineと表示されるサーバはあるのですが、このインタフェースは見たことがなかったです。


せっかくなので同じページにあったものをいくつか紹介。


Noobslide

画像を横(もしくは縦)にスクロールさせるような感じの、画像のスライドショー。
みよんみよん弾性が表現されているのは見事ですが、
ちょっと切り替えのスピードが速くて、人工的な感じがします。
たぶん切り替えの速さは変更可能だと思います。


Accessible News Slider

jQueryベースのスライドショー。矢印ボタンを押してスライドさせる感じです。
View Allボタンを押すと、スライドショーではなくなり、
格納されていた(隠れていた)コンテンツが一括表示される、という少し不思議なシステム。


SmoothGallery

LightBoxに近い印象を受けました。
LightBoxはページの上にレイヤーを重ねて画像を表示しますが、
これはページ内のボックスの中で効果を出す感じです。

画面上部のPicturesをクリックすると画像の一覧が表示されたり、
画面中央をクリックすると画像が大きくなったりと、機能は豊富。

ですが、ナビゲーション(進む、戻る)が非常にわかりにくく、
あまり関係ないかもしれませんが、
SmoothGalleryのページからデモページに行くのにも迷いました
(これは、私が英語読めないからかもしれません)

ちなみに、BackSpaseで前の画像に戻ることができるという機能も搭載しています


jQuery Multimedia Portfolio

インタフェースは、Appleのサイトの上のほうにある製品一覧によく似ています。
画像だけじゃなくてflvファイルやmp3も埋め込めるようです。
ただ、動きとしてはAppleサイトのほうがスムーズかなと思います。


Carousel

Carouselっていうのは、「円形」という意味だそうで。
Amazonとかにありそうな、円に配置されて回る画像の見せ方。
Amazonにある(あった?)インタフェースの方がもっとスムーズに見えますね。
結構重いです。


以上。情報元はCatsWhoCode.com
ちなみに、元記事のJavascriptリンクは参考にしましたが、キャプションを翻訳したわけではありません。あしからず。

 

個人的にはそれほど驚きの効果はなかったので、もうちょっと数を調べて、お気に入りリストとして記事を書けたらと思います。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
04« 2017/05 »06
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
ブログ内検索
忍者ブログ [PR]