「JavaScript」タグアーカイブ

jquery-lightbox-0.5.jsで説明部分に改行コードを入れる場合

前回は、http://lokeshdhakar.com/projects/lightbox2/のlightbox に

改行を入れる場合でしたが、

今回は、jquery-lightbox-0.5.jsで説明部分に改行コードを入れる場合

http://www.huddletogether.com/projects/lightbox2/のjquery-lightbox-0.5.jsのバージョンになります。

下記のように変更します!

#####################################################################

if ( jQueryMatchedObj.length == 1 ) {
settings.imageArray.push(new Array(objClicked.getAttribute(‘href’),objClicked.getAttribute(‘title’).replace(/##/g,”<br />”)));
} else {
// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references                    //change abund aoki
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute(‘href’),jQueryMatchedObj[i].getAttribute(‘title’).replace(/##/g,”<br />”)));
}

#################################################################

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

#################################################################

if ( jQueryMatchedObj.length == 1 ) {
settings.imageArray.push(new Array(objClicked.getAttribute(‘href’),objClicked.getAttribute(‘title’).replace(/##/g,”<br />”)));
} else {
// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references                    //change abund aoki
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute(‘href’),jQueryMatchedObj[i].getAttribute(‘title’).replace(/##/g,”<br />”)));
}

#################################################################

これで、うまくいくはずです。

safari1.3ではjquery-lightbox自体は使えません。

Lightbox v2.04で改行を入れたいが・・・

写真をカッコ良く見せる為にLightboxのJavascriptを使うのですが、
http://lokeshdhakar.com/projects/lightbox2/
しかし、説明文を入れるのにtitleに入れる形になる。下記が例。

<a href=”images/image-1.jpg” rel=”lightbox[plants]” title=”ああああああああああああああああああああああああ”><img src=”images/thumb-1.jpg” width=”100″ height=”40″ alt=”” /></a>

ここで説明文が長文になったときに改行を入れたいと思うと、、<br>タグを入れば改行される。

当然、W3Cのチェック(http://validator.w3.org/check)は通らない。

なので、通るように、##を入れると<br>に変更してくれるように作り変える。

Lightbox v2.04の場合は lightbox.jsの下記の2行の間に1行追加。

///////////////////////////////////////////////////////////////////////

var imageNum = 0;

if ((imageLink.rel == ‘lightbox’)){

////////////////////////////////////////////////////////////////////////

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

///////////////////////////////////////////////////////////////////////

var imageNum = 0;

imageLink.title = imageLink.title.replace(/##/g,”<br />”);

if ((imageLink.rel == ‘lightbox’)){

////////////////////////////////////////////////////////////////////////

さらに、追記です。このままだと、Next機能に対応できない為、下記の行も変更。

///////////////////////////////////////////////////////////////////////

collect(function(anchor){ return [anchor.href, anchor.title; }).

///////////////////////////////////////////////////////////////////////

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

///////////////////////////////////////////////////////////////////////

collect(function(anchor){ return [anchor.href, anchor.title.replace(/##/g,”<br />”)]; }).

///////////////////////////////////////////////////////////////////////

変更後、HTMLを書く。
<a href=”images/image-1.jpg” rel=”lightbox[plants]” title=”あああああああああああ##あああああああああああああ”><img src=”images/thumb-1.jpg” width=”100″ height=”40″ alt=”” /></a>

mixiアプリでFlash

mixiアプリでFlashを使う。

公式には下記の書き方になっています。

http://developer.mixi.co.jp/appli/pc/lets_enjoy_making_mixiapp/use_flash

しかし、下記のソースを使って、ガリガリ書くことにしました。DOM等の制御も必要な為。

http://code.google.com/p/swfobject/

IEでDOMの書き換えやFlashコンポーネントの上のポップアップ表示ができないことが

ある為、Flashを非表示にするという制御がmixiアプリ標準のポップアップ画面を

使用する為には避けては通れないことになります。

また、広告表示もFLASH等が発生しているので、その部分も配慮する必要が

あります。

Mixiアプリを作成してみる。

MixiアプリはJavaスクリプトがわかればOKです。

簡単に設定用XMLを説明すると、

<!–l version=”1.0″ encoding=”UTF-8″–>
<Module>
<ModulePrefs title=”Shanpy”  />ここにタイトルです。
<Require feature=”dynamic-height” />
<Content type=”html” view=”home, profile”>   ここに表示場所 home, profile,canvasと選べます。
↓この下が内容を書く部分、スクリプトを書く部分ですが、外部ファイルを読み込ますことをおススメします。
<![CDATA[        <mce:script language=”JavaScript” type=”text/javascript” src= “http://********?”></mce:script>
]]>
</Content>
</Module>

———————————————————————-

自社のアプリはこちらです。

SHANPY MIXIアプリ
shanpy_mixiapp_icon
http://platform001.mixi.jp/view_appli.pl?id=6317
MIXIアプリ一般公開後は
http://mixi.jp/view_appli.pl?id=6317
になる予定です。