CSSだけでサムネイルをクリックすると画像が切り替わるイメージギャラリー
Result こういうやつです。割と今更感な内容ですが書いてなかった気がするので 例によってinputと:checkedを使います css.gallery {/*親*/ display: flex; margin: 10px auto; max-width: 600px; position: relative; padding-top: 66.6666666667%; } .gallery__img {/*表示される大きな画像。エフェクト付き*/ position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease-in-out; } .gallery__thumb {/*サムネイル*/ padding-top: 6px; margin: 6px; display: block; } .gallery_
汎用性の高そうなjQueryイメージスライダー・Fotorama
よさ気だったので備忘録。jQueryで作るスライダーです。画像や動画にも対応、レスポンシブWebデザインにも対応しており、マークアップもシンプルで済みます。 なかなかいいスライダーでした。タッチイベントにも対応しているのでスマフォでも使えますね。 見た目はよくあるスライダーですが、汎用性は高い印象です。タッチイベント、レスポンシブWebデザイン、ハッシュタグ対応、動画も可能、フルスクリーン化も可能で、マークアップも画像を書けば良いだけ。 動作サンプルがいろいろ用意されています。 Sample コード<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="fotorama.js"></script>本体とプラグインとCSSを読み込みます。 <div class="fotorama"> <
PhotoCradle.js. An elegant wrap of your photo collection.
Javascript image gallery that delivers photos you store on services like Flickr or Picasa to your personal website or blog.What is this? Did you ever wish to show photos you store on а service like Flickr or Picasa on your personal website or blog? PhotoCradle is designed to deliver photos from 3rd party services to your website and wrap it into a smooth customizable slideshow. How it works? Photo
Photofy | Photo Swap Shuffle Plugin for jQuery
Not Just Any Gallery Plugin Photofy is a completely new take on the over-developed gallery plugin. Photofy doesn't just display images, it randomly shuffles them around in thumbnails, whilst pre-loading the next set of images in the background for a smooth transition. Giving a nicely different effect and keeping page load times snappy and consistent. The long awaited second version of Photofy is n
[CSS]CSS3の美しいエフェクトを備えたナビゲーション -Circle Navigation Effect
デモページ 写真画像の下の半透明のパネルには画像の説明文とナビゲーション（アローとテキスト）が配置されており、ホバーするとサークル状にアニメーションで拡大しながらサムネイル画像に変わります。 2枚目の画像 [ad#ad-2] 実装 画像ギャラリー自体はjQueryをベースに作られており、ここではナビゲーションのエフェクトの実装方法を紹介します。 HTML ナビゲーション箇所はテキストと画像をa要素で内包します。 <div class="cn-nav"> <a href="#" class="cn-nav-prev"> <span>Previous</span> <div style="background-image:url(../images/thumbs/1.jpg);"></div> </a> <a href="#" class="cn-nav-next"> <span>Next</
複数のコンテンツを効率的に管理し、有用にする6つのデザインパターン
コンテンツを効率的に表示し、ユーザーエクスペリエンスを強化する、人気の高いデザインパターンを紹介します。 6 Popular Content Presentation Design Patterns [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 価格表 2. 記事リスト 3. サムネイル画像 4. カルーセル・スライドショー 5. 水平スクロール 6. 無限スクロール 1. 価格表 価格表はサービスやプロダクトの価格を一覧できるようにしたものです。 ユーザーに基本的な機能と価格を比較させ、決断へと誘う効果があります。また、価格表自体にサインアップボタンを配置するのも効果的です。 LightCMS 2. 記事リスト 記事リストはニュースサイトやブログなどに多く見られ、よくできた記事リストにはタイトルだけでなく、記事の始まりや概略などを添えて表示します。これはユーザーにとって
[JS]省スペースでもサムネイル付きの画像ギャラリーが設置できる -Micro Image Gallery
Micro Image Gallery: A jQuery Plugin デモページ ギャラリーはデフォルトで三種類のサイズがあり、表示パターンはサムネイル一覧と画像拡大の二種類があります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
kyrielles.net