2012年9月25日火曜日

JAVASCRIPTのライトボックスをちょっとカスタマイズ


ライトボックスちょっとだけカスタマイズ
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto


amiさんに教えてもらったんです。
Facebookのいいねボタンもつけられるんですよ!
amiさん とってもサンキュー!!!


MIZONではこのjquerry.prettyPhoto.jsのソースを理解することは不可能!

でも、完璧ではないですが、
true falseなどの値を変更するだけで、
多少なり自分の理想に近づけるライトボックスができましたので
チャレンジされる方はご参考にしてみてください。


animation_speed:'fast',→animation_speed:20,でライトボックスが早く動く
slideshow:5000,→slideshow:0,でスライドショーが再生しない
opacity ライトボックスの透明度
show_title:true,ならALT属性を表示する
allow_resize:true,→falseで画像の最大サイズでライトボックスが表示される
allow_expand:true,→falseでさらに画像が大きくするための「拡大ボタンが消える」
default_width:500,default_height:344,これは大体中央からライトボックスが起動する
horizontal_padding:20,値を変えるとライトボックスの変なところから画像が表れる
(上記2項目は値を変えて小さな画像を表示してみるとよく分かりますが、設定は初期値が良いようです)
overlay_gallery:trueで手前の小さなギャラリーを表示する。大きさはoverlay_gallery_max:30,
keyboard_shortcuts:true,キーボードの左右でスライドショーが動く

その他、意味不明な初期値(もちろん意味があると思うのですけどね)
autoplay_slideshow:false,
hideflash:false,  transparent(透明不透明?)
wmode:'opaque',
autoplay:true,
modal:false,
deeplinking:true,
ie6_fallback:true,


この他に、ローディングする画像が嫌だったので
loader.gf画像を、透明画像に変えるという力技で見えなくしてみました。

カラーはCSSで多少変更できるようです。

参考画像





7 件のコメント:

  1. 今日は忙しいなかいろいろ教えていただいてありがとうございました!!
    僕はなぜかJavascriptがすごく苦手意識が強くてどうしてよいのかわからず、苦しんでいました。前日にライブラリを探していたのでprettyphotoも見ていましたがよくわからなかった。

    今日は手ほどきのおかげでなんとなくどういう風にmizonさんが使われているか掴めたような気がします。キッカケって大事ですよね。
    これを少しずつ使えるようにしていけたらなぁと思っています。ありがとうございました。

    返信削除
    返信
    1. Arkさん Javascriptも奥が深いですよね。

      こちらこそJavascriptの本を貸していただいてありがとうございました。

      とても分厚くて、ほんと見たって感じの理解しかしてませんが、
      後々頑張って勉強していきたいですね!

      その時はいろいろ教えてください^^

      削除
  2. 情報共有ありがとうございます~!!
    私もlightbox使うので、とても参考になります!!
    今日は、USBを忘れていっていたせいで、画像がなくてまた例によって笑福亭仁鶴やらをスライドさせていたのですが明日からは、ほんちゃんの画像を入れ込んでいきたいです!!
    ちなみに、facebookのいいねマークをリンクさせる方法、いまだ解明できずです。

    返信削除
    返信

    1. >笑福亭仁鶴やらをスライド

      さくさく動いているのが面白かったです。
      何故、あのキャラ達を選んだのか笑

      いいねマーク是非つけたいですよね!
      FaceBookは使用変更が多いらしいですが、その原因か。
      もしかしたらサーバーにアップしないと動かないのかもしれません。

      PrettyPhotoはTwitterとか他は正常に動いているし、サイト自体しっかりしているサイトなので、すでにOKの可能性もあります。


      削除
    2. こんにちは。久しぶりにゆっくりパソコンを開けて、
      皆さんの言語を訳しながら(調べながら)読ませていただいていま~す。

      lightboxって何だろうって調べているうちに こんなものを・・・
      ずれていたらごめんね。
      ガラパゴスだかweb関連にお勤めの方のブログ 
      http://d.hatena.ne.jp/glpgsinc/20110504/1304476477この中に
      [いいねボタン]について書かれてありました。

      http://developers.facebook.com/docs/reference/plugins/like/
        ♪いいねボタン つくれますって・・・
      わたしには よくわからないのですけどね  ふふ。

      削除
    3. >>minoさん
      「いいね」ボタンの情報ありがとうございます!!
      それができたらいいなぁ、とこの間mizonさんと話していたところでした。
      このブログにも、ついてますもんねぇ……、「いいねボタン」。
      つけてみたいなぁ~~~。

      削除
    4. minoさん いいねボタンのシェアありがとうございます。
      ボタンつけれるようになったら、僕もシェアさせていただきますね! もしかしたら、ローカル環境では繁栄されず、サーバーにアップロードしないといけないのかなと思ったりもしているんですが。その後も研究していきます^^
      よろしくお願いいたします。

      削除