lightboxの設置について

2011年4月5日 at 21:22

http://www.lokeshdhakar.com/projects/lightbox2/
上記サイトよりダウンロードしたlightbox2を設定しようとしたところ、うまくいきません。だれか助けてくださいcrying

わたしが行った順序は

1.header.phpに
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
と、
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
を入れ、
2.themes内images、js,cssをアップロード

3.ページ編集のhtmlで
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

を入力しました。

よろしくお願いしますsmiling

Re: lightboxの設置について

2011年4月6日 at 2:24
concrete5ではjQueryを利用していますので、prototype.jsなど他のJavascriptライブラリを併用すると干渉します。コンフリクトを避けることもできますが、最も簡単なのはfancyboxなどjQuery系のプラグインを利用することです。
http://fancybox.net/
 

Re: lightboxの設置について

2011年4月6日 at 18:51
yamanoiです。

jQueryを使ったthickboxでよければどうぞ。
http://www.yamanoi.org/concrete5/download/thickbox/

画像ブロックのカスタムテンプレートです。
 

Re:Re: lightboxの設置について

2011年4月8日 at 15:57
hissyさん、yamanoiさんお答えいただいてありがとうございますgrin
早速hissyさんからご紹介いただいたfancyboxを設置しようと試みましたが、header.phpのhead内に

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images ・・・・・以下省略

ここの部分はどの様に修正して入力すればいいのかわかりません。
基本的な部分の質問で申し訳ないのですが、よろしくお願いいたしますsmiling
 

Re: Re:Re: lightboxの設置について

2011年4月8日 at 23:24
yamanoiです。

先ほどのthickboxカスタムテンプレートを研究して書きなおせば簡単ですよ。
thickboxをインストールして、どんな仕組みか研究し
差し替えればよいかと考えています。

がんばってください。
 

Re: Re: Re:Re: lightboxの設置について

2011年4月10日 at 11:22
yamanoiです。

基本的なfancyboxを画像ブロックのカスタムテンプレートで書いてみました。
オプションは自分でview.phpを書き換えてください。
添付: fancybox.zip
 

Re: Re: Re: Re:Re: lightboxの設置について

2011年4月13日 at 3:54
yamanoiさま
すごーい!
わざわざ書き直していただけるなんて…ありがとうございますgrin

とりあえず、view.phpをheight と widthを書き換えてみました。
いろいろとやってみましたが、アップロード先がわからないですcrying concrete/blocks/内にfancyboxフォルダ(css js view.php)を入れればのですか?
何度も申し訳ないです>sad
 

Re: Re: Re: Re: Re:Re: lightboxの設置について

2011年4月13日 at 7:44
yamanoiです。


/blocksの下にアップします。
/blocks/image/templates/fancybox/*
使い方は、画像ブロックで写真を貼った後に、カスタムテンプレートを指定します。

ちょっと解説
imageブロック本体は、/concrete/blocks/の下にあります。
こちらを編集するとconcrete5のアップデートで不具合が生じますので
カスタマイズする場合は、/blocksの下に同じ名前で置きます。
concrete5は、ファイルを /blocks --> /concrete5/blocks の順に探しています。
 

Re: Re: Re: Re: Re: Re:Re: lightboxの設置について

2011年4月16日 at 5:31
yamanoiさま

出来ましたgrin
丁寧に教えていただきありがとうございます!!
解説までしていただけたのですごく勉強になりましたsmiling