検索結果

2011-02-22

Lightboxやfancyboxを使っていて、クリックして拡大した先に文字情報を入れる場合、
aタグのtitle属性に文字を入れます。
すると当然のことながら、マウスを画像に当てたときにその文章が表示され、
長い文章でタグを含んだりすると非常に不格好です。

その場合、画像のimgタグにもtitle属性を入れてあげると
そちらが優先して表示されます。

例)
<a href="1.jpg" title="商品名<br />価格<br />コメント" rel="lightbox[1]"><img src="1s.jpg" width="100" height="100" alt="商品1" title="商品1"></a>

2009-12-22


自分でブログを書く場合は画像を指定のサイズにリサイズしてからアップするのですが、
あまりPCに詳しくない人がブログを書く場合には、大きいサイズのままアップすることがあると思います。

このときに、lightboxで拡大表示をすると、大きいサイズのまま表示されてしまいます。
それを防ぐために、lightboxのプラグインを改造しました。
横幅の最大値を960px、縦を720pxとしました。

まずCSSの変更です。IE6用にもハックを追加。
lightbox-2-wordpress-plugin/lightbox/css/lightbox.css に下記を追加。

#lightbox img#lightboxImage{
width: auto; height: auto; max-width: 960px; max-height: 720px;
}
* html body #lightbox img#lightboxImage{
height: expression(this.height >= 720 ? "720px" : "auto");
}


次にJavascriptの変更。
lightbox-2-wordpress-plugin/lightbox/js/lightbox.js
「 imgPreloader.onload = (function(){ 」の次の行から下記を追加。

var imgWidthMax = 960; // Max Width Size [px]
var imgHeightMax = 720; // Max Height Size [px]
var imgNewScale = 1;
if( imgWidthMax < imgPreloader.width ) {
imgNewScale = imgWidthMax / imgPreloader.width;
imgPreloader.width = imgWidthMax;
imgPreloader.height *= imgNewScale;
}
if( imgHeightMax < imgPreloader.height ) {
imgNewScale = imgHeightMax / imgPreloader.height;
imgPreloader.width *= imgNewScale;
imgPreloader.height = imgHeightMax;
}



これでバッチリです。
本当はローディングアイコンの位置とかも調整したいのですが、、
それはまた時間のあるときにしたいと思います。

ちなみに理想的には大きいサイズのファイルをアップさせないべきだと思います。
プラグインの「Resize At Upload Plus」を使うとアップする画像のサイズを指定サイズにできます。

2009-06-15

Ajaxを使っているとほぼ間違いなく遭遇するのが、
jQueryとprototypeのコンフリクト。

WEBを検索すればいくつでも例があるのですが、
使っているAjaxが違ったりすると、どうもうまく動かなかったりします。

今回はgalleyview(jQuery系)とlightbox(prototype系)。
結果的には、

<script type=”text/javascript” src=”../js/galleryview/jquery-1.3.2.js”></script>
<script type=”text/javascript”>
jQuery.noConflict();
</script>
<script type=”text/javascript” src=”../js/galleryview/jquery.easing.1.3.js”></script>
<script type=”text/javascript” src=”../js/galleryview/jquery.galleryview-1.1.js”></script>
<script type=”text/javascript” src=”../js/galleryview/jquery.timers-1.1.2.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(‘#slide’).galleryView({
panel_width: 640,
panel_height: 300,
frame_width: 80,
frame_height: 38,
transition_interval: 3000,
overlay_height: 0
});
});
</script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js”></script>
<script type=”text/javascript” src=”../js/lightview.js”></script>

となりました。

jQueryを上に記述し、jquery.galleryview-1.1.jsの $( を jQuery( に変換しています。

2009-03-21


最初は写真をクリックして拡大表示にすることを検索していたのですが、
調べているとLightboxを使用するプラグインのことが載っていたので、
それを使用することにしました。

「Lightbox 2」というプラグインをインストールすれば、
あとは何もしなくてOK!ということだったのですが、、、
そもそも写真を拡大させることをしていなかったので、
結局そこから調査し直しです。

画像を追加するときに、「リンクURL」という項目があり、
その下に「ファイルのURL」というボタンがあるので、それを押すと、
アップするファイルのURLが入ります。

つまり、拡大して見せたい画像(例えば800×600)をアップし、
ブログには中サイズ(例えば480×360)にして、
貼り付ければOKということです。

で、戻ってLightbox2なのですが、、、
なぜかうまく機能するページとしないページがあり、
しばらく悩んでもわからなかったので、
とりあえずはheader.phpに、無理やりJsをインクルードするソースを
書くことで解決しました。
使い方としては絶対間違ってるはずなので、また時間があるときに調べます。。

2012-07-17


このブログでは画像の拡大表示にずっとlightbox2とうプラグインを使っていたのですが、
他の仕事などではjQuery Colorboxを気に入って使用していたので、
ようやくこちらに変更しました。

ColorboxもWordPressに限らず有名な画像拡大などを行うプラグインです。
このColorboxのプラグインがWordPressでもあります。

続きを読む »

2011-12-23


先日よりおかしくなっていたトップページのグリッド表示。
デザイン変更も考えてはいましたが、とりあえずなぜなのかが気になり調査しました。

するとフッター近くに、Lightbox2で使用しているprototype.jsのタグが入っていました。
トップページではLightbox2を使用していないので、抜いていたはずなのですが、
なんでこんなところに??と思い、footer.phpを見てみたところ、
wp_footerが該当のタグを書き出ししている様子。

以前はなかったと思うので、おそらくWordPress3.3にしたことで、
仕様が変わったのではないかと思います。(すみません、あくまでも予想です。。)

とりあえずwp_footerで書き出されている内容が必要ではなかったので、
wp_footerの行を削除して無事に解決しました。
リニューアルは遠ざかりましたけど。。

2009-04-08

ブログで画像を投稿するときに、想定した以上のサイズをアップされると
レイアウトが崩れてしまいます。
そんなときにはmax-widthが便利なのですが、
IE6には対応していません。

そこで便利なのが、minmax.jsというライブラリ。
http://www.doxdesk.com/software/js/minmax.html

headタグ内に読み込むだけでmax-widthやmin-widthが
使用できるようになります。

が、WordPressで試したところ、高さがautoでうまくいくものと
いかないものが出ていました。
なんとなくLightboxの絡みのような気がしたのですが、
とりあえず画像の比率が4:3ばっかりになると思ったので、
max-heightに数値を入れることとしました。
縦写真の場合がちょっと悩ましいかもです。。