2012年03月25日

Lightbox 連続表示を解除 グループ機能を追加する

jQueryのLightboxは
IDやClassに対して適用されて
そのID・クラス内の画像は全てグループ化されるので
全部 連続表示されてしまいます。

LightboxのIDやClassの中でも さらに li 内でも
好きにグループ表示ができる方法がわかりました。

変更後は
rel="lightbox[gourp1]" だけにjsが反応するので
いろいろな状態のimgが配置できるようになります。

なので、同じ IDやclass内、また liで囲んだ中に複数のimgにたいしても
別々にグループ化させられます。

こんな感じです(わかりにくかったらすみません)
dd.jpg






jQuery lightboxダウンロード先: http://leandrovieira.com/projects/jquery/lightbox/


●連続表示を解除し グループ機能を追加する 方法



-----------■ @ jquery.lightbox-5.0.js を変更します。

jquery.lightbox-5.0.js をテキストエディタで開きます。

Ctrl + F をおして 検索ボックスに下のコードを入れて検索します。
100行目ぐらいにあると思います。



// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
}
}





→ そこを下のコードに変更し保存します。


 // Add an Array (as many as we have that match the objClicked 'rel' attr), with href and title atributes, inside the Array that

storage the images references
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
if(jQueryMatchedObj[i].getAttribute('rel')==objClicked.getAttribute('rel')) {
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
}
}
}


変更した ファイルです:jquery.lightbox-0.5_g.js



-----------■ A Lightboxを呼び出すもともとのコードの変更


→ head 内に 変更した jquery.lightbox.jsへの リンクを記述して

→ Lightboxを呼び出すもともとのコード(下記)
 
<script type="text/javascript">
$(function() {
$('#gallery').lightBox();
});
</script>


→ を 下のコードに変更します。

<script type="text/javascript">
$(function() {
$('a[rel^=lightbox]').lightBox();
});
</script>



-----------■ B グループ化


→あとはa要素内のrelプロパティで 

rel="lightbox[好きなグループ名]" 

を追加すれば グループ化します。

<a href="img01.jpg" rel="lightbox[gourp1]">Image01</a>
<a href="img02.jpg" rel="lightbox[group1]">Image02</a>



rel="lightbox[gourp1]" を付けないimgは無視されます
rel="lightbox[gourp1]" を付けた画像だけ続けて拡大表示されます。(同じグループ名)




posted by ron2010deta at 15:08| Comment(1) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

ページ内リンクをスムーズにスクロールする jQuery

これをscrolltopcontrol.jsメモ張などに貼り付けて scrolltopcontrol.jsで保存します
( .jsで保存すれば 名前はなんでもいいです。)
jquery.jsのファイルもいります。

2つを htmlのhead内にリンクさせます。


・先に jquery.js を記述します。

<script type="text/javascript" src="ここにjsファイルのパスを記述(../js/jquery.js)←など"></script>
<script type="text/javascript" src="ここにjsファイルのパスを記述
(../js/scrolltopcontrol.js)←など"></script>




<a href="#new"> 上に戻る </a>  ここ(ボタン)をクリックすると

<a name="new"></a>            ここにすい〜っと移動します。

new の部分は好きな名前でOKです。ただし同じ名前にします。ボタンには# を忘れずに。


-------うまく動作しないとき

・jquery.jsをサイトから ダウンロードしてそちらを使ってみてください。

・head内のjsの記述の順番は @jquery.js Ascrolltopcontrol.js の順に記述します。

・他にも 同じページ内にjqueryを導入している時は、
 記述する順番を最後にしてみると動いてくれました。
 または jquery.jsへのリンクを消してみたり(重複している場合のみ)しても
 動作するようになりました。

posted by ron2010deta at 01:50| Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2012年01月18日

複数のjavascriptを入れると動作してくれなくなる件について

以前紹介したスクロールバーのカスタマイズですが

同じページに 追加して jqueryのスライドショーを追加したところ
スクロールバーが動作しなくなりました。

すべてjqueryを使っていますいろいろ試したら解決したので紹介します。

-----解決した理由

スライドショーにあったjs
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

スクロールにあったjs
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

がかぶってる? のがエラーの原因みたいでした

・スライドショーの jquery-1.7.1.min.jsをとりあえす削除してみたら スライドショーもスクローリバーもきちんと動作してくれました




他にも jsを読み込ませる順番や jqueryどうしでないと動作しないとかあるみたいです。
posted by ron2010deta at 11:11| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

2012年01月12日

スクロールバーのカスタマイズ


一部分のスクロールバーをカスタムする

s.jpg

ダウンロード先:https://github.com/vitch/jScrollPane/archives/master



スクロールの色
スクロール全体の背景色
スクロールバーの大きさ
などcssで変行出来ます。




ダウンロードしたフォルダにはいろいろサンプルがあります。
anchors.htmlを使ってみました。

-----head内の記述例

<!--scroll-->
<link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript" id="sourcecode">

$(function()
{
$('.scroll-pane').jScrollPane(
{
hijackInternalLinks: true
}
);
});
</script>



-----body部分の記述例

<div id="container">
 <div class="scroll-pane">
  <p id="para1">文章が入ります</p>
  <p id="para2">文章が入ります</p>
 </div>
</div>




いれ込むページ内でほかのjsがある時
hesd内の一番最後に読み込ませると動作しました。



ファイルのパスを変えても動作しました。
使いやすくカワイイです@




---------
そのたスクロール。。入れてみましたがパスが変わると動作してくれませんでした。
方法はあるのかも です。


その他スクロールダウンロード先:http://manos.malihu.gr/jquery-custom-content-scroller
「Custom Scrollbar」の参考サイト:http://blog.verygoodtown.com/2010/12/jquery-custom-content-scroller/


------上記のjquery-custom-content-scrollerの動作しない件について
単にbody内に記述する一番最後のスプリクト
<script src="jquery.mCustomScrollbar.js"></script>

の相対パスの書き換えを見逃してただけでした;


posted by ron2010deta at 07:47| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

2012年01月10日

ふわっとロールオーバーさせるjs

マウスをのせると ふわっと ロールオーバーする ボタンのjavascriptをみつけました。

ダウンロード先:http://d.hatena.ne.jp/KAZUMiX/20071017/rollover2
デモ:http://www.rr.iij4u.or.jp/~kazumix/d/javascript/rollover2007XF/xhtml.html

-----使い方 けっこう簡単にできました。
ダウンロードしたファイルへのリンク
・head に記述
<script type="text/javascript" src="d(名前好きに変えました;).js"></script>


・body の記述例

<a href="#" title="フェード!">
<img src="http://画像_rollout.jpg" alt="フェード!" width="160" height="108" />
</a>


●画像はwebにアップロードしなしと動作しませんでした。なので imgのパスは 必ずURLになります。
●あと 
デフォルトの画像は   「好きな名前 _rollout.拡張子」とします。
ロールオーバーの画像は 「好きな名前 _rollover.拡張子」 とします。
 

それで ふわっと ロールオーバーされました。



参考サイト:http://katt79.jp/blog/2009/01/16/106.php#comment-48
posted by ron2010deta at 20:36| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

UTF-8 を Shift-JIS に変換する方法

1.変換したい テキストの上で右クリック → プログラムから開く → IEを選択

2.
表示 
→ エンコード 
→ その他  
→ Shift-JIS(日本語) 
→ ファイル  
→ 名前を付けて保存 
→ 画面下の 「エンコード」で Shift-JIS(日本語)を選択して 保存





参考サイト:http://www.atmarkit.co.jp/fwin2k/win2ktips/395codeconv/codeconv.html
posted by ron2010deta at 19:52| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

2012年01月07日

lightBoxのjqueryのtitleにリンクを付ける

lightBoxのjqueryを使って
画像の拡大されたときに
title="コメント"の部分が
コメント分で表示されます。

名称未設定-1.jpg

------挿入部分・例
<div id="gallery">
<ul>
<li>
<a href="photos/image1.jpg" title="コメント">
<img src="photos/image1.jpg" width="56" height="72" alt="" />
</a>
</li>
</ul>
</div>




------title="コメント"部分にリンクをつけたい時・例

title="&lt;a href=&#x27;リンク先.html&#x27; &gt;  コメント  &lt;/a&gt;"


-----webにリンクさせるとき・例
title="&lt;a href=&#x27;http://ron2010deta.seesaa.net/&#x27; &gt;  コメント  &lt;/a&gt;"



---------title部分から ファイルのダウンロードも可能です。
リンク先部分を ファイルパスとファイル名(.zip)にすればいいだけです。
title="&lt;a href=&#x27;../e_10_01.zip&#x27; &gt;  ダウンロード  &lt;/a&gt;"


ロールオーバー時にtitle部分が表示されてしまいますが 非表示の方法もあるようです。



--------付属の imagesのリンク切れについて

画像が拡大されたときに表示される
next や close などの画像が リンク切れで 表示されない時は
imagesのリンクフォルダのファイルをwebにアップして、 
そのファイルのURLを 
jquery.lightbox-0.5.js のソース内に付け加えると 表示されるようになります。

-----jquery.lightbox-0.5.jsの変更部分 (5つファイルがあります。)
30〜34行目

imageLoading:'http://ここにアップしたURLを付け加えます。images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon

imageBtnPrev:'http://ここにアップしたURLを付け加えます。/images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image

imageBtnNext:'http://ここにアップしたURLを付け加えます。/images/lightbox-btn-next.gif', // (string) Path and the name of the next button image

imageBtnClose:'http://ここにアップしたURLを付け加えます。/images/lightbox-btn-close.gif', // (string) Path and the name of the close btn

imageBlank:'http://ここにアップしたURLを付け加えます。/images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)


posted by ron2010deta at 10:15| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

jqueryを使っているなら jqueryのlightBoxをつかおう

lightBoxをHPに入れたら
同ページの ほかのスクリプトが動作しなくなりました(;;)
原因は lightBoxがjqueryでないので 動かなくなったみたいです。


なので jqueryのlightBoxを 使うことで解消できました。

●lightBoxのjquery ダウンロード先 : http://leandrovieira.com/projects/jquery/lightbox/
posted by ron2010deta at 10:08| Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2012年01月03日

lightbox 使用法 拡大したときに出る 閉じるボタンのリンク切れになる対処法 などなど

ライトボックスについて。

--------------●js css のリンク
ダウンロードしたら
head内にjs css をリンクさせます。


---記述例

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript">
<script src="js/lightbox.js" type="text/javascript">
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript">





--------------●拡大したときに出る 閉じるボタンのリンク切れになる対処法
hrmlとimagesフォルダの位置を一緒にしとかないと
拡大したときに出る 閉じるボタンが リンク切れになってしまって
うまくいきませんでした。
e.jpg

なので 

@imagesフォルダをwebにアップロードして そのURLを

Alightbox.js の
49と50行目 の画像のパスに追記します。

●変更するファイル---------
images/loading.gif
images/closelabel.gif




●変更後の記述---------

LightboxOptions = Object.extend({
fileLoadingImage: ' http://ここにアップしたURLを記述 images/loading.gif',
fileBottomNavCloseImage: ' http://ここにアップしたURLを記述 images/closelabel.gif',


・アップした画像のURL を前に追加して記述すると 閉じるボタンの画像が表示されました。
ほかの画像も同じようにしたらいいと思います。



--------------●画像拡大の文字の入れ方。---------
title="ここにいれた文字が拡大した時の説明文になる"

<a href="rogo.jpg" rel="lightbox" title="あいうえお">
<img src="rogo.jpg" width="383" height="47" alt="かきくけこ ">
</a>




--------------●lightbox の画像のグループ化。

lightbox のうしろに [ここに任意のグループ名] を付けるだけ


記述例
<a href="http:// ..." rel="lightbox[gloup1]">
<a href="http:// ..." rel="lightbox[group1]">
<a href="http:// ..." rel="lightbox[group2]">
<a href="http:// ..." rel="lightbox[group2]">


--------------●lightboxの不具合
lightboxを入れると 同じページ内のjsがきかなくなりました。
対処法はあるかも。。です





posted by ron2010deta at 13:56| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする
AX
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。