Nucleus(JP)フォーラム Forum Index

Find on the forum:
OR  AND    » Advanced Search

未返信の記事を表示 | 全てのフォーラムを既読にする

検索 | メンバーリスト | ユーザーグループ | FAQ
登録する | ログイン
Nucleus(JP)フォーラム Forum Index -> 小技の共有 -> Lightbox.JSについて
 ページ移動 1, 2  次へ
新しいトピックを投稿 トピックに返信
前のトピックを表示 :: 次のトピックを表示
投稿者 メッセージ
NaCanan



登録日: 2005.01.24
記事: 23
記事 日時: 2006.01.05 (木) 14:51   記事の件名: Lightbox.JSについて
引用付きで返信
http://www.huddletogether.com/projects/lightbox/

上記サイトに画像をWEB2.0チックにポップアップさせるJavascriptがありました。
きれいでしたので、動かせるかどうかと努力をしてみました。
四苦八苦しましたが、いつまで経っても画像は出ず・・・。
もしどなたか試した方で、動いた方がいたら、コツをお教えいただけたらと・・・ Crying or Very sad

私がやったのは
・サイト内下部のファイル（４）をアップロード
・NP_ImagePopupを入れ、テンプレートを修正
・スキンのヘッダーに指定の文字を入れる（JSファイル指定）
・テンプレートにて画像リンクに指定の文字を入れる（rel="lightbox"）
です。

コレでは動かないんでしょうか？（；；）
作者のHPはしっかり画像が出てくるのに・・・。

もしご存知の方がいらっしゃれば・・で結構です。宜しくお願いいたします。

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
PUSHMAN



登録日: 2004.08.15
記事: 56
記事 日時: 2006.01.05 (木) 15:40   記事の件名: 「rel="lightbox"」がありません
引用付きで返信
はじめまして。

サイトを拝見しましたが、アンカータグに「rel="lightbox"」が付加されていないようです。また、「onclick」でポップアップウィンドウが開くようになっているので、それともぶつかるような気がします。が、私は「NP_ImagePopup」を使用していないうえに、Javascript　の事もよくわかりませんので詳細はわかりませんが、とりあえずご報告まで。

ちなみに
http://blog.heartfield-web.com/mac/milkyway.html
上記記事の一つ目の画像に適用させていますが、

  1. 「lightbox.js」「lightbox.css」「overlay.png」 をアップロード
  2. <head> 内にリンク記入
  3. 任意のアンカータグ内に「rel="lightbox"」を追記

としかしていません。NaCanan さんと同じだと思います。

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
NaCanan



登録日: 2005.01.24
記事: 23
記事 日時: 2006.01.05 (木) 16:20   記事の件名: はい
引用付きで返信
お返事ありがとうございます。
説明が拙かったです Crying or Very sad

今の時点では、満足に動作しなかったので全部テンプレートも白紙に戻したんです。
スキンのほうは、影響ないのでほおっておいてますが、テンプレートのほうは元に戻したときに　rel="lightbox"　も消してしまいました。

onclickも一度消しまして、バッティングしないようにしてみたのですが、結局ローディングの画像が出るだけで、がぞうがシームレスに表示されなかったので・・・。

http://blog.heartfield-web.com/mac/milkyway.html

を拝見させていただきましたが、画像をクリックすることで、その画像のページに飛んでいますよね？
lightbox.jsが正常に動作をしたときには、ページはジャンプせず、Javascriptで画像を表示するみたいなのです。
つまり、サムネイルが表示されているURLのままで、元画像をポップアップ表示できるのです。

それが出来なくて・・・ Crying or Very sad

元に戻すと確認が難しそうなので、自分のところのは、動かない状態に戻しておきます。

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
Andy
モデレーター
モデレーター


登録日: 2004.03.18
記事: 1490
所在地: 横浜
記事 日時: 2006.01.05 (木) 16:27   記事の件名:
引用付きで返信
簡単にプラグイン化してみました。

http://www.huddletogether.com/projects/lightbox/
からlightbox.js，lightbox.cssなどをダウンロードしてプラグインディレクトリ下にlightboxディレクトリを
作っていれます。下記のコードをNP_Lightbox.phpとしてプラグインディレクトリに保存します。
後は，スキンのヘッダ部分に<%Lightbox%>と書くだけです。
NP_ImagePopupは使っていないのでどういうコードを吐くのか分からないのですが，一応
NP_Thumbnailには対応しています。
Code:
<?php

// plugin needs to work on Nucleus versions <=2.0 as well
if (!function_exists('sql_table')) {
   function sql_table($name) {
      return 'nucleus_' . $name;
   }
}

class NP_Lightbox extends NucleusPlugin {
   function getName()      { return 'Lightbox'; }
   function getAuthor()    { return 'Andy'; }
   function getURL()       { return 'http://lab.matsubarafamily.com'; }
   function getVersion()   { return '0.1'; }
   function getMinNucleusVersion() { return 200; }
   function getEventList() { return array( 'PreItem' ); }
   function supportsFeature($what) {
      switch($what) {
         case 'SqlTablePrefix':
            return 1;
         default:
            return 0;
      }
   }

   function getDescription() {
      return 'Use lightbox JavaScript';
   }


   function doSkinVar($type) {
      $url = $this->getAdminURL() . 'lightbox.js';
      echo '<script type="text/javascript" src="' . $url .'"></script>';
      $css = $this->getAdminURL() . 'lightbox.css';
      echo '<link rel="stylesheet" type="text/css" href="'. $css . '" />';
   }
   
   // callback function
   function makelink_callback($m) {
      global $CONF;
   
      $mcnt = count($m);
      
      if ($mcnt == 2) { // popup var
         $mvar = explode('|', $m[1]);
         if ( strstr($mvar[0], '/') ) $memberdir = '';
         else $memberdir = $this->authorid . '/';
         $url = $CONF['MediaURL'] . $memberdir . $mvar[0];
         $linktext = $mvar[3];
         return "<a href='$url' rel='lightbox'>$linktext</a>";
      }
      else if ($mcnt == 3){
         preg_match('/imagepopup=([^&]+)&/', $m[1], $m2);
         $url = $CONF['MediaURL'] . $m2[1];
         return "<a href='$url' rel='lightbox'>{$m[2]}";
      }
      else return $m[0]; //invalid match. return as it is
      
   }
   
   function event_PreItem($data) {
      // prepare
      $tgt  = array(
         '/<%popup\((.+?)\)%>/',
         '/<a(?:\s+?)href=([^>]+)>(<img(?:\s+?)src=[^>]+>)/'
         );
      
      // convert
      $obj = &$data["item"];
      $this->authorid = $obj->authorid;
      $obj->body = preg_replace_callback($tgt, array(&$this, 'makelink_callback'), $obj->body);
      $obj->more = preg_replace_callback($tgt, array(&$this, 'makelink_callback'), $obj->more);
   }
   
   

}
?>

_________________
Foodyn CMS開発日誌
http://www.matsubarafamily.com/lab/

最終編集者 Andy [ 2006.01.05 (木) 18:22 ], 編集回数 1 回

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
NaCanan



登録日: 2005.01.24
記事: 23
記事 日時: 2006.01.05 (木) 16:40   記事の件名: おお
引用付きで返信
おお、ポップアップします。有難うございます。

ただ、popupimageは・・・・
Code:
</a>
を消しました Very Happy

Code:
         return "<a href='$url' rel='lightbox'>$linktext";


うーん、いくら頭を下げても足りないくらい感謝です。
有難うございます～。

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
PUSHMAN



登録日: 2004.08.15
記事: 56
記事 日時: 2006.01.05 (木) 16:41   記事の件名:
引用付きで返信
Quote:
今の時点では、満足に動作しなかったので全部テンプレートも白紙に戻したんです。
スキンのほうは、影響ないのでほおっておいてますが、テンプレートのほうは元に戻したときに　rel="lightbox"　も消してしまいました。

そうですよね。失礼しました。

私のサイトでは正常に動作していると思うのですが…と慌てて見たところ、ページを全て読み込む前にクリックしてしまい、当然表示されませんでした。さらに慌てましたが、落ち着いて読み込み完了しおてからクリックすると、正常に表示されました。

なんて事を書いてるうちに、解決されたみたいですね。おめでとうございます。

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
藤咲
モデレーター
モデレーター


登録日: 2003.11.17
記事: 1164
所在地: 広島
記事 日時: 2006.01.05 (木) 18:08   記事の件名: 本題とは関係ないですが
引用付きで返信
PUSHMAN wrote:
私のサイトでは正常に動作していると思うのですが…と慌てて見たところ、ページを全て読み込む前にクリックしてしまい、当然表示されませんでした。さらに慌てましたが、落ち着いて読み込み完了しおてからクリックすると、正常に表示されました。

本題とは関係ないですが…。
PUSHMANさんのサイトで、IEだとポップアップではなく画像だけのリンクに飛んでしまいます。
Firefoxだときちんとポップアップ表示されることを確認しました。
_________________
藤咲
備忘録とかもろもろ
http://fjsk.tk/

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
PUSHMAN



登録日: 2004.08.15
記事: 56
記事 日時: 2006.01.05 (木) 18:22   記事の件名:
引用付きで返信
藤咲さん

ご報告ありがとうございます。しかしなんでだろう…
Windows が手元に無いので確認できませんが、原因が判明したらご報告します。

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
Andy
モデレーター
モデレーター


登録日: 2004.03.18
記事: 1490
所在地: 横浜
記事 日時: 2006.01.05 (木) 18:22   記事の件名:
引用付きで返信
CSSを読み込んでいなかったので，そこを修正しました
_________________
Foodyn CMS開発日誌
http://www.matsubarafamily.com/lab/

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
NaCanan



登録日: 2005.01.24
記事: 23
記事 日時: 2006.01.05 (木) 21:41   記事の件名: 少しずれますが
引用付きで返信
おお・・。

CSSで思い出しました。lightboxのcssには見慣れぬ文が・・・いや、自分で学んでみます Shocked

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
mas
モデレーター
モデレーター


登録日: 2003.11.14
記事: 292
所在地: 埼玉
記事 日時: 2006.01.05 (木) 23:01   記事の件名:
引用付きで返信
これおもしろいですね。

v3.22
NP_Thumbnail 1.3+XHTML　入。
XREA.COMに設置してみました。

うまく動きました。そして気に入りました。
WindowsXP: Firefox1.5, IE6.0(黒透過背景はNG)
Mac OSX 10.4: Safari, Firefox1.5

Andyさん、みなさん、ありがとう。

こういうのを見ると、IEがpng表示に対応していないのはホントどうにかして欲しくなりますね。

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
On3



登録日: 2004.11.30
記事: 40
所在地: 横浜
記事 日時: 2006.01.18 (水) 18:56   記事の件名:
引用付きで返信
こんにちは、いつも勉強させて頂いてます。lightbox.jsがバージョンアップしてたので差し替えてみました。
が、NP_Lightbox.phpでは画像が表示できなくなりました。 Crying or Very sad

ところでIEでは半透過のバックが表示できない件ですがlightbox.cssを以下のように変更すると表示されます。
元のCSSの部分
Code:
html #overlay{
   background-color: #333;
   back\ground-color: transparent;
   background-image: url(blank.gif);
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
   }

ここの
background-image: url(blank.gif);を
background-image: url(overlay.png);に、
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");の一行を
filter: alpha(opacity=80）;にする。

filter: alpha(opacity=80)とは「指定された画像の透過率を80%で表示」の意味です。（IE固有）

これで半透過のバックが表示されますがもともとの"overlay.png"の色がグレーなのでなんだかキレがありません。

そこで100角の黒色のgif画像を作り"overlay.gif"として保存、lightboxホルダーにUPします。

background-image: url(overlay.gif);
filter: alpha(opacity=75);
等とすると他のブラウザと同程度のコクとキレがでます、おためしください。
（見本は私のblogでご覧ください）

要らないかとも思いますが一応。

overlay.gif
 説明:
overlay.gif
 ファイルサイズ:  205 バイト
 閲覧済み:  32188 回

overlay.gif

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
Andy
モデレーター
モデレーター


登録日: 2004.03.18
記事: 1490
所在地: 横浜
記事 日時: 2006.01.18 (水) 19:28   記事の件名:
引用付きで返信
On3 wrote:
こんにちは、いつも勉強させて頂いてます。lightbox.jsがバージョンアップしてたので差し替えてみました。
が、NP_Lightbox.phpでは画像が表示できなくなりました。 Crying or Very sad

僕も今日差し替えてはまりました。NP_Lightboxはタグを付け替えているだけなので，プラグインだから問題，といったことはないと思うのですが，困ってます（元のファイル上書きしちゃったし）。
On3 wrote:

ところでIEでは半透過のバックが表示できない件ですがlightbox.cssを以下のように変更すると表示されます。
元のCSSの部分
Code:
html #overlay{
   background-color: #333;
   back\ground-color: transparent;
   background-image: url(blank.gif);
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
   }

ここの
background-image: url(blank.gif);を
background-image: url(overlay.png);に、
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");の一行を
filter: alpha(opacity=80）;にする。

filter: alpha(opacity=80)とは「指定された画像の透過率を80%で表示」の意味です。（IE固有）

これで半透過のバックが表示されますがもともとの"overlay.png"の色がグレーなのでなんだかキレがありません。

そこで100角の黒色のgif画像を作り"overlay.gif"として保存、lightboxホルダーにUPします。

background-image: url(overlay.gif);
filter: alpha(opacity=75);
等とすると他のブラウザと同程度のコクとキレがでます、おためしください。
（見本は私のblogでご覧ください）

要らないかとも思いますが一応。

なるほどこういう手もあるのですね。僕もここを試していたのですが，AlphaImageLoaderが，画像をスクリプトのパスではなく，ページのパスから読もうとしているのではないかと思いました。src="overlay.png"のところを絶対パスに変えたらうまく行きました。冒頭の問題が解決したら，新版で対応できるようにしたいと思います。
_________________
Foodyn CMS開発日誌
http://www.matsubarafamily.com/lab/

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
Andy
モデレーター
モデレーター


登録日: 2004.03.18
記事: 1490
所在地: 横浜
記事 日時: 2006.01.18 (水) 23:09   記事の件名:
引用付きで返信
新版で動かない件，一応解決しました。

lightbox.jsの195行目近辺を
Code:
   if (objLoadingImage) {
      objLoadingImage.style.display = 'none';
   }

としたら動くようになりました。ただ，新機能のクローズ・ボックスは表示されません。またtitleにも対応してみたのですが，そちらもうまくいっていません。
また，On3さんの方法も試しているのですが，なぜだか同じようになりません。
http://www.matsubarafamily.com/lab/index.php?itemid=87
のページです。
_________________
Foodyn CMS開発日誌
http://www.matsubarafamily.com/lab/

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
NaCanan



登録日: 2005.01.24
記事: 23
記事 日時: 2006.01.19 (木) 00:07   記事の件名: Re:
引用付きで返信
こんばんは。
しばらく動かなく、諦めかけていたLightboxJSが動いてます！
少し感動をいたしました。 Very Happy

感謝です。

いや、しかし便利でかっこいいというのが一緒だとうれしいです。

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
irijon



登録日: 2006.02.06
記事: 6
所在地: 北海道
記事 日時: 2006.02.18 (土) 20:38   記事の件名: はじめまして
引用付きで返信
はじめまして。

設置してクローズボックスが表示しなかったのですが解決しましたので.....
サーバーのログのリクエストを見て気づきましたので報告です。

最初の方の
var loadingImage = 'loading.gif';
var closeButton = 'close.gif';
を、http:// からのフルパスにすると表示します。

たったそれだけでした..... Razz

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
藤咲
モデレーター
モデレーター


登録日: 2003.11.17
記事: 1164
所在地: 広島
記事 日時: 2006.02.18 (土) 22:26   記事の件名: まとめ
引用付きで返信
ということで私も設置してみたので、まとめてみます。

設置に当たっては以下の変更を行うとOKでした。
１．lightbox.jsの
var loadingImage = 'loading.gif';
var closeButton = 'close.gif';
をフルパスに変更（by irijonさん）

２．lightbox.cssの
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
をフルパスに変更（by Andyさん）
_________________
藤咲
備忘録とかもろもろ
http://fjsk.tk/

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
藤咲
モデレーター
モデレーター


登録日: 2003.11.17
記事: 1164
所在地: 広島
記事 日時: 2006.02.18 (土) 23:42   記事の件名: もひとつ
引用付きで返信
こちらのlightbox plusだとcssの修正なしで、
js側の末尾
addEvent(window,"load",function() {
var lightbox = new LightBox({
loadingimg:'loading.gif',
expandimg:'expand.gif',
shrinkimg:'shrink.gif',
effectimg:'zzoop.gif',
effectpos:{x:-20,y:-20},
effectclass:'effectable',
closeimg:'close.gif'
});
});
をフルパスにするだけでOKでした。
こちらは画像がブラウザのサイズより大きいときに、画像をブラウザサイズにあわせて表示してくれるのでなかなか良いです。
_________________
藤咲
備忘録とかもろもろ
http://fjsk.tk/

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
ぽち



登録日: 2006.02.10
記事: 21
記事 日時: 2006.06.09 (金) 19:18   記事の件名: イメージへのリンクあると…。
引用付きで返信
つい最近このトッピクを参考にしてLightbox.JSを導入しました。

popup画像に関しては順調に作動しているのですが、
他のイメージ画像に誤作動が起きています。
イメージにリンクがあるとリンク先に飛ばず、Loadingマークが出てしまいます。
私のページでは「Amazon（Nucleusのプラグインです。アイテムの物だけ誤作動が起き、サイドバーにある物はきちんと動いています。）」や「ちず窓」
アイテムhttp://pochinote.cute.bz/blog/day/item/181のLightbox Plusへのリンクなどがそのような現象を起こしています。（画像にリンクがかかっています。）
画像にカーソルを置いた時のリンク先を見ると　http://・・・・/・・・・/media　になっています。

申し訳無いのですが難しい事が全く分かりません…。
説明もちゃんと伝わっているか不安なのですが、
何か解決方法があればお教え頂ければ幸いです。

よろしくお願いします。

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
藤咲
モデレーター
モデレーター


登録日: 2003.11.17
記事: 1164
所在地: 広島
記事 日時: 2006.06.09 (金) 19:55   記事の件名: Re: イメージへのリンクあると…。
引用付きで返信
とりあえずプラグイン管理画面で、NP_AmazonとNP_Lightboxの順序を逆にしてみたらどうなりますでしょうか。
_________________
藤咲
備忘録とかもろもろ
http://fjsk.tk/

トップに戻る

 ユーザーのプロフィールを表示 プライベートメッセージを送信 投稿者のウェブサイトに移動
新しいトピックを投稿 トピックに返信
特定期間内の記事を表示:   

Nucleus(JP)フォーラム Forum Index -> 小技の共有 -> Lightbox.JSについて

ページ移動 1, 2  次へ

Page 1 of 2

All times are GMT + 9 Hours

移動先:  

新規投稿: 不可
返信投稿: 不可
記事編集: 不可
記事削除: 不可
投票参加: 不可
ファイル添付不可
ダウンロード： 可

Powered by phpBB © 2001, 2002 phpBB Group