私のメモ書きとしてのホームページ改造やパソコンに関する日記です


[
新着] [ワード検索]
*--- Contents ---*
1.パソコンの組み立て  ■ ビデオ編集用パソコン  ■ プルダウンメニューの改良  ■ 写真サムネイルの変更  ■ Intel HD Graphics 530のドライバー  ■ さくらネットのレンタルサーバーの変更  ■ Windows 10 Anniversary Update  ■ Windows10 インストール  ■ windows10 インストール  ■ ページの自動更新
2.EDIUS Pro8のQSV効果  ■ キャッシュの件  ■ ビデオ作品のメニュー変更  ■ 再生リスト 追加  ■ EDIUSで一部のフォントが表示されない  ■ QSVのトラブル 原因究明  ■ ビデオ編集用パソコンの組み立て  ■ 項目ごとの掲載件数を表示  ■ ビデオ編集ソフト EDIUS Pro 7  ■ 再びQSVについて
3.Youtubeへのアップでトラブル  ■ プロジェクトの設定  ■ EDIUS Neo3.5 とQSV  ■ EDIUS Neo3.5に更新  ■ QSVについて  ■ USB3.0 Ports  ■ 常用PCのSSD化  ■ ビデオ用PCグレードアップ  ■ ビデオ編集用PCのHDD増設  ■ YouTubeの再生リスト
 新着の期間  [全ページの表示] [新着一覧





スライドショウ画面の変更2008/07/14(月曜)

左は今までの画面 [Scroll Off]が情報の左側に表示されている
右は変更した画面 [Scroll Off]を下側に配置した

この方が見やすい
この部分もマウスを10秒間動かさないと半透明になる


 

サムネイルの半透明化2008/07/02(水曜)

以前にも少し述べたが、右側のサムネイルが目障りな時もある
そこでサムネイルを半透明化、つまり
 filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;
で50%の半透明フィルターを掛ければいい
幸いなことに ;-moz-opacity: 0.5;opacity: 0.5 でIE以外でも半透明化出来る

半透明化は
1.サムネイルの表示位置にマウスがある時は半透明にしない
2.マウスを5秒以上動かさなかった場合はトップ・サムネイルの写真リストの部分を半透明化する
と言う条件を設定した
これでスライドショウの写真鑑賞に「ある程度」集中することが出来るだろう

Ver3.1として各ページに今日適用した
中々面白いアイディアだ

半透明化、その後2008/07/07(月曜)

5日間ほどこの方法でスライドショウを見ている
タイトル、サムネイルを半透明化すると写真がぐっとひきたってくる。
この方法で取り敢えずは満足している

半透明化の方法は透明化したい部分に透明画像を貼り付ける
この部分に
style='" + css_mask_black + "'
css_mask_black は
var css_mask_black = "background-color:#000000 ; filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;"
と設定しておく
背景色を「黒」(#000000)、alpha=50% としている
この透明画像を「表示」(style.visibility = "visible")にすれば半透明化され、
「非表示」(style.visibility = "hidden")にすれば通常の表示となる

このことはいずれ「私の雑記帳」に掲載しよう

 

写真説明文の表示2008/06/25(水曜)

6/21に「完成」と書いたが・・・
いろいろのページで閲覧していると、右のサムネイルに写真の説明文が欲しくなった
しかし複数行の説明文では折角のスクロールが思わしくなくなる
何とか1行で表示できないか・・・と。

文字表示には 11pt と 11px という書き方がある。通常は <font style="font-size:11pt"> と使う
ここを :11px でもちゃんと表示される
そこで下記のようにソースを書き換えた
----------------------------------------------------------------
 //-- 写真説明文
 var m_len = Math.floor(list_img_width/list_moji_size) - 1
 op +="<FONT style='font-size:" + list_moji_size + "px ; color:#00ff00'>"
 op += f_alt[i].substring(0 , m_len)
 if(f_alt[i].length > m_len){
  op +="..."
 }
 op +="</FONT>"
----------------------------------------------------------------
つまりサムネイルの幅 これは120〜80まで変化する
この幅を文字サイズ(ここでは13px)で除すると幅の中に何文字表示できるかが計算される
仮に6文字とする。これより長い説明文は「...」で表示する

これでサムネイルの下側に1行で表示できた
「これで完璧・・・」、いえいえまだまだ改良点が出てくるでしょうね

 

スライドショウ Ver3 完成2008/06/21(土曜)

長い時間かかったが、スライドショウ Ver3 をすべての写真表示に適用した

 

スライドショウ Ver3 その42008/06/19(木曜)

今日はだいぶ改良した

「ページ情報」が表示されている時、何の気なしにサムネイルをクリックしたくなる。
サムネイルをクリックしたらページ情報を非表示にしてスライドショウを開始できないか

Scroll On/Off のコメントをサムネイルの上に表示できないか・・・

と言うことで検討した
結論としては「リスト一覧」の考え方を取り入れて、それぞれを固定表示にすればよい

これは「ページ情報」の場合で setumei_pos_x 、setumei_pos_y を設定してしまえばいい
これを最初に実行する。そしてウィンドウサイズを変更した場合は setumei_pos_x をサイズに応じて変更すればよい
ということで予想どおりのページが出来上がった

 
 "<DIV id='SetumeiPage' style='position : absolute ; z-index : 2 ; left : " + setumei_pos_x + "px ; top : " + setumei_pos_y + "px ;'>"  
 "</DIV>"

■ サンプルページ
http://ono.sakura.ne.jp/sonota/zatuki/photo_disp/slideshow_ver3/sample.html

「私の雑記帳」に掲載2008/06/19(木曜)

一応納得のゆくところまで完成したので、「私の雑記帳」に掲載した

http://ono.sakura.ne.jp/sonota/zatuki/photo_disp/slideshow_ver3/index.html

 

スライドショウ Ver3 その32008/06/12(木曜)

右側のサムネイルについての改造
今までは 120x80ピクセルであった。ウインドウを縮小してもこのサイズで表示していた
これをウインドウサイズに応じて変更するようにした
ウインドウサイズの10%を基準にして、最大は120x80、最小は 80x54ピクセルとした
あまり小さいと撮影日の文字がはみ出してしまうので、80x54は妥当なサイズだろう

実際に data.js に写真の説明文を記入する時にどうしてもファイル名が知りたくなる
そこでこれを支援するために「リスト一覧」を表示するようにした
一旦ページが完成してしまうと必要ないので普通は表示しない

 

スライドショウ Ver3 その22008/06/10(火曜)

現在の方式では「蝶の写真集」の場合、 index#bottom で最終行が表示される
Ver3 の方式では今まで New から表示していた
この New は3ヶ月以内の写真が該当するようになっている

今日撮影してきた写真を追加して表示させてみると、3ヶ月以内だから6月10日の所からは当然表示されない
No3、2008/06/07 09:31 が表示される

これでは不都合だ。そこで New には関係なく最新の撮影日から表示するようにした

サンプルではNo8、2008/06/10 11:59 つまり6月10日分から表示される
なお、撮影日が1日限り(同一日)の場合は先頭から表示される

http://ono.sakura.ne.jp/sonota/zatuki/photo_disp/slideshow_ver3/sample.html

だいぶ使いやすくなってきた

 

スライドショウ Ver32008/06/07(土曜)

「写真日記」の掲載写真一覧表示が完成して、しばらく使ってみたら大変都合がいい
それではこの方法を「蝶の写真集、花の写真集・・・」等のスライドショウに活用できないかと検討してみた
その表示サンプルは下記の通り

http://ono.sakura.ne.jp/sonota/zatuki/photo_disp/slideshow_ver3/sample.html

この方法の基本的な考え方は
1.データ形式(data.js)は今までのスタイルを使用する
2.サムネイルを右側に表示する
3.任意のサムネイルをクリックすると、拡大表示をする
4.サムネイルからマウスを離すと、スライドショウが開始される
5.スライドショウの進行とともにサムネイルは「スムース」にスクロールする
6.但し、マウスがリストの画面上にあるときはスクロールしない
  これはサムネイルの選択を容易にするため
7.閲覧者はウインドウサイズを変更して、自由なサイズで写真を見ることが出来ます
8.ただし写真は縮小のみです

ということだ。
細かな操作方法でまだ不備な点があるが、とりあえずは何とか完成した

修正2008/06/08(日曜)

PC上で早速この方式で表示させてみた
ところがサンプルでは問題なかったが、「ギンイチモンジセセリ」「アサギマダラ(5月)」のページでは右側のリストが途中で止まるべきなのに、最後の所までスクロールされてしまう

単独で表示させると正常。「どうしてだろう・・・」と考えること半日。

夕方やっとその原因が判った
つまり現在の方法では、特に蝶のページでは追加していくので「蝶の写真集」やその他のリンクから呼び出すとき
index#bottom
と最終行を呼び出すようにしている。このようにすると最新の写真がスクロールすることなく見ることが出来るわけである

Ver3では <A name="top"> <A name="bottom"> を使っていた
このために途中から追加した「イチモンジ・・・」のページでは最終行までスクロールしてしまうことになる

<A name="list_top"> <A name="list_bottom">
と変更することによって、半日悩んだ問題が一瞬にして解決した
問題が解決したときは嬉しい(^o^)

数日間PC上で動作させてみよう
ただ現在の方法では、写真表示の画面がすっきりする。
Ver3 では右側にサムネイルがあるので少しごたごたしている感じだが写真選択では大変都合がいい

さて、どちらがいいか・・・
左は現在の方式、右が Ver3 の新方式


 

data.js の作成2008/06/01(日曜)

「写真日記」掲載写真一覧 が完成して、しばらく考えていたら
「そうだ、この方法を活用すれば写真・スライドショウに使う data.js も簡単に作れるかも・・・」
と思い、早速取りかかった

今までよりも短時間で作成できることが判った
これらをまとめて「私の雑記帳」に掲載した

■ data.js 作成
http://ono.sakura.ne.jp/sonota/zatuki/php/make_data/index.html

■ 掲載写真一覧の作成
http://ono.sakura.ne.jp/sonota/zatuki/php/make_joyfulyy/index.html

PHPは、はじめ「雲を掴むようだった」が何とか勉強できて大変よかった

 

「写真日記」掲載写真一覧 その72008/05/23(金曜)

その6でキーワードによる設定、自動的にデータの更新等を取り入れて完成したが、「自動的にデータの更新」はどうも好ましくない
つまり複数の閲覧者が同時に更新をしたら、 data.js が壊れてしまうだろう
この件については管理者のみが更新できるように改良した

さてさて、その7での改良は右側のリストの表示に元画像を縮小して表示していた
これでは100枚の画像を表示するのに時間がかかる
本来はサイズを縮小したサムネイルを使うべきである

PHPについて調べたら「サイズ縮小」が可能であると記されている
つまりサムネイルを作成できると言うことである
参考にしたページ
http://noongoro.main.jp/note/note0052.html


この技術を早速取り入れて改良した
http://ono.sakura.ne.jp/cgi/joyfulyy_diary/photo_list/index.html

リストの表示が当然のことだが早くなった
これらのPHPのソースは後日「私の雑記帳」にまとめておこう

いずれにしても「掲載写真一覧表示」はこれで完成である


[直接移動] [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]
投稿画像の表示サイズを変更できます
管理者用

- Joyful Note -
- JOYFULYY v2.50y24m45 :Edit by Yamamoto -
< Edit by michi >