aniyaさん
ご丁寧に有難うございます。
試してみます。
先程も書きましたがiphone用のテーマの追加がうまく行かず・・・
ホスティングサービスへ問合せをしている最中ですので、
せっかく教えて頂いたのに試すのはしばらく先になりそうです。
複数の写真の表示の仕方
2012年8月25日 at 17:32
複数の写真の表示の仕方について教えて下さい。
ショーケースにあるcyanonさんが作成された「藍空亭」
http://aisoratei.com/
の「Photograph」ページ
http://aisoratei.com/photograph/
で写真が綺麗に並んでいますが、
いずれかの写真をクリックするとその写真がズームアップされて画面中央に表示されます。
その表示された写真に左右矢印のガイドのようなものが表示されていて、
それをクリックすると別の写真が表示されていきます。
このような写真の表示のさせ方はどのような手順で行うのでしょうか？
よろしくお願いいたします。
Re: 複数の写真の表示の仕方
2012年8月26日 at 8:06
こんにちは、当サイトをご覧いただき、ありがとうございます。
お言葉嬉しいです。
lightboxは結構簡単に実装出来ました。
バージョンは現行のlightbox2.51を利用していて、今の所問題ありません。
http://lokeshdhakar.com/projects/lightbox2/
lightboxが上手く動かない理由には、lightbox.jsの中に固有の画像ファイルを呼びだす記述がしてあり、利用のテーマ内にjs/css/imagesを作ってファイルを置くと、そのファイルが読まれません。なのでユーザー領域に置く必要があります。(どなたかjsファイル内で"<?php echo $this->getThemePath() ?>/ファイル名"のやり方を何方か知っていたら教えて下さい。とても知りたいです。）
lightboxの実装方法です。
jquery.jsは勝手に読まれてくる本体のものを利用するので記述は必要ありません。
ユーザー領域にある、jsフォルダにlightbox.js入れます。
同じくユーザー領域にある、cssフォルダにlightbox.cssと、lightboxに必要な画像ファイルの入っている、imagesフォルダを入れます。
試用しているテーマのheader.phpを開いて、<head>のcssが並んでいる所の一番下にでも
<link rel="stylesheet" media="screen" type="text/css" href="/css/lightbox.css" />
そしてfooter.phpの<?php Loader::element('footer_required'); ?>の手前に
<script type="text/javascript" src="/js/lightbox.js"></script>
…と記入ます。
で、表示したい部分に
<a href="lightboxで表示する画像のパス" rel="lightbox[plants]" >
<img src="サムネイル画像" />
</a>
で動きました。
ちなみに、ご指摘のページはFlickr Blockに、上記のlightboxを追記して使っています。
http://www.concrete5.org/marketplace/addons/flickr/
Flickerに写真を追加すると自動でサイトに追加されて便利です。通信の所為でページ表示が若干重いですが。。。
もしこのページのカスタムテンプレートが必要なら差し上げます。
(プログラマーさんにはきっと怒られてしまいそうな酷いコードですが。。)
お言葉嬉しいです。
lightboxは結構簡単に実装出来ました。
バージョンは現行のlightbox2.51を利用していて、今の所問題ありません。
http://lokeshdhakar.com/projects/lightbox2/
lightboxが上手く動かない理由には、lightbox.jsの中に固有の画像ファイルを呼びだす記述がしてあり、利用のテーマ内にjs/css/imagesを作ってファイルを置くと、そのファイルが読まれません。なのでユーザー領域に置く必要があります。(どなたかjsファイル内で"<?php echo $this->getThemePath() ?>/ファイル名"のやり方を何方か知っていたら教えて下さい。とても知りたいです。）
lightboxの実装方法です。
jquery.jsは勝手に読まれてくる本体のものを利用するので記述は必要ありません。
ユーザー領域にある、jsフォルダにlightbox.js入れます。
同じくユーザー領域にある、cssフォルダにlightbox.cssと、lightboxに必要な画像ファイルの入っている、imagesフォルダを入れます。
試用しているテーマのheader.phpを開いて、<head>のcssが並んでいる所の一番下にでも
<link rel="stylesheet" media="screen" type="text/css" href="/css/lightbox.css" />
そしてfooter.phpの<?php Loader::element('footer_required'); ?>の手前に
<script type="text/javascript" src="/js/lightbox.js"></script>
…と記入ます。
で、表示したい部分に
<a href="lightboxで表示する画像のパス" rel="lightbox[plants]" >
<img src="サムネイル画像" />
</a>
で動きました。
ちなみに、ご指摘のページはFlickr Blockに、上記のlightboxを追記して使っています。
http://www.concrete5.org/marketplace/addons/flickr/
Flickerに写真を追加すると自動でサイトに追加されて便利です。通信の所為でページ表示が若干重いですが。。。
もしこのページのカスタムテンプレートが必要なら差し上げます。
(プログラマーさんにはきっと怒られてしまいそうな酷いコードですが。。)
Re: 複数の写真の表示の仕方
2012年8月26日 at 12:48
Flickrブロックのカスタムテンプレートは下記アドレスからダウンロード出来ます。
http://aisoratei.com/down_load/concrete5etc/
これの作業中に、ifとかelseの{}の数が解らなくなってしまって、試行錯誤してたらどんどん増えてしまいまして...なのでだいぶ恥ずかしいコードになってます。
きっとこんなに{}入らないと思うので、よかった整理して下さい。。
普通に使うだけでしたら、後半デザイン部分の
<a href="<?php echo $fileCachePathRel?>" rel="lightbox[plants]" title="<?php echo $item->get_title(); ?>">
<img src="<?php echo $fileCachePathRel?>" />
</a>
この部分を作りたいデザインに当てはめてれば、大丈夫だとおもいます。
ただ、コードからも解る通り、ページ上にもlightboxにも同じ画像を出力してる状態で、cssでサイズだけ変えていたりする、ややインチキをしてます。
上の方のforeach文の辺りで小さいサイズのサムネイルを生成が出来るコードが書ければ、ページ上では小さいサイズ、lightboxでは大きいサイズという事も出来ると思いますが、自分には無理でした。
（どなたかのお力があれば出来るかも...ちゃっかりとよろしくお願いします）
...とりあえずそんな感じです。
それではサイト制作、頑張って下さいませ。
http://aisoratei.com/down_load/concrete5etc/
これの作業中に、ifとかelseの{}の数が解らなくなってしまって、試行錯誤してたらどんどん増えてしまいまして...なのでだいぶ恥ずかしいコードになってます。
きっとこんなに{}入らないと思うので、よかった整理して下さい。。
普通に使うだけでしたら、後半デザイン部分の
<a href="<?php echo $fileCachePathRel?>" rel="lightbox[plants]" title="<?php echo $item->get_title(); ?>">
<img src="<?php echo $fileCachePathRel?>" />
</a>
この部分を作りたいデザインに当てはめてれば、大丈夫だとおもいます。
ただ、コードからも解る通り、ページ上にもlightboxにも同じ画像を出力してる状態で、cssでサイズだけ変えていたりする、ややインチキをしてます。
上の方のforeach文の辺りで小さいサイズのサムネイルを生成が出来るコードが書ければ、ページ上では小さいサイズ、lightboxでは大きいサイズという事も出来ると思いますが、自分には無理でした。
（どなたかのお力があれば出来るかも...ちゃっかりとよろしくお願いします）
...とりあえずそんな感じです。
それではサイト制作、頑張って下さいませ。
aniya
Re: 複数の写真の表示の仕方
concrete5で使われている「jQuery」との干渉が懸念され設置は難しいかと思います。
※詳しくは下記スレッドを参照ください。
http://concrete5-japan.org/community/forums/design/post-2235/
本家のマーケットプレイスに同等の機能の物がありますので一度試されてみることをお勧めします。
http://www.concrete5.org/marketplace/addons/-/view/?submit_search=1&search_keywords=lightbox
※設置も簡単ですし、気軽に試せるFreeの物も数点あります
マーケットプレイスの使い方やパッケージのインストール方法につきましては下記をご参照ください。
http://concrete5-japan.org/help/editing/install_theme_and_blocks/