07 | 2017/08 |  09

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

自作 jQuery プラグイン :アニメーションポップアップ で遊ぶ

animatedPopup で他サイトの写真や動画を表示する。

完成した自作 jQuery プラグイン「 animatedPopup 」を実際に使ってその可能性を見極めてみようと思う。それはまたこのプラグインの PR にもなるだろう。

なお jQuery 本家サイトのプラグインサイトに登録してみたいが、英語解説を書く自信がないので行えないだろう。(苦笑)

さて、このエントリイでは、他サイトの写真や動画を幾つかポップアップしてみる。

但し、トップページを経由しないでダイレクトにアクセスすることを認めない素材サイトが結構多いため、ダイレクトアクセス が可能な Web サイトに限定して探さざるを得なかった。

全てボタンをクリックすれば、画面中心部に写真や動画がポップアップされるように設定した。但し jquery プラグイン animatedPopup はIEでは動かないことを断わざる得ない。

  • (出典は pixta )easing は easeOutElastic を使用し背景色等はグレー系を指定
  • (出典は pixta )easing は easeInOutExpo を使用し背景色等は既定値のママ
  • (出典は フォトライブラリー )easing は easeInOutSine を使用し、背景色等は紫系を使用
  • (出典は LinkStyle )easing はeaseInOutBack、背景色は赤系を使用
  • (出典は youtube )easing は温和しめの swing、背景色は緑系を使用

上の5つの animatedPopup プラグイン活用事例において、次の点に着目してもらえれば幸いである。

  • 背景色とボーダー色・種類、並びに easing は5つそれぞれに変えた。
  • easing 所要時間は「夏の丘」: 1 秒、「地球と月」:1.2秒、「ライトシャワー」:1.4秒、「暮色」:1.5秒、動画:1.8 秒と変化させた。

なお、このアニメ-テッドポップアップのコードについては、以前のエントリイ で詳細に解説を加えたので、時間と興味があればそちらを見て戴きたい。

さて、上の5つの実行結果についてだ。

まず写真4枚は「一応」設定通りに動いてくれた。しかし動画は埋め込みタグ情報からは横幅を自動的には取得できなかった。( object タグや embed タグには width 値が明記されているが、これをjquery.js に用意されている outerWidth やouterHeigh メソッドでは取得できないようだ。)

そこで、やむなく第5引数である options に横幅指定を入れて強制的に横幅を設定した。

動画においてこのような問題はあるものの、一部の問題を除いて設計通りの動きをしてくれることが確かめられたので、(..)(^^)(^。^)(*^o^)(^O^)ウレシーーーー!!!

その一部の問題については項を改めて以下に記したい。

▲ToTop

一部の、しかし既に解決した2つの問題点について

一部の問題点とは、第一に、背景色やボーダーの仕様(色・太さ・種類)を各ポップアップで変化するようにコードを書いているのに、そうならず、5つ全ての背景色が同じになってしまったり、ボーダーが表示されなかったりしたことである。

この点については、animatedPopup プラグインそのもののバグだったため、そのバグ退治に相当の時間を費やして改善を図った結果、やっと意図したとおりに表示されるようになった。

このバグは現在では退治済みなので、既にこの「一部の問題」は発生しなくなった。

第二の問題点は情報の先読み欠如である。画像や動画の先読み指定を行っていなかったため、初めてこのページを開いてボタンクリックしたときには、画像がうまく表示されなかったのだ。

久しく画像を扱っていなかったので(苦笑)、当然指定すべき先読み指定を忘れていたのだ。

勿論この点も解決済みである。

▲ToTop

次に他サイトそのものをポップアップしてみる

上では、或るサイト内に存在している画像や動画の1つをポップアップしたが、次にサイトそのものをポップアップしてみる。これにはインナーフレームを使うことが相応しい。

ここでは easing はjquery.js の既定値(swing)を使用し、背景色等はグレー系、easing 所要時間は 1.8 秒とした。

実はサイトの縮小表示を行いたいのだが、それを実現する方法がIE以外では分からないため、当面は不可能だ。

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/710-5ec7729f

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200904261807
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。