Ck2 Blogger画像をpopupさせるLightview #3

画像をpopupさせるLightview #3 Posted at 2008/06/14 (Sat) 01:03 [Blog]

この関連のトピックを見て頂ければわかると思いますが、Lightbox JSの方は、prototype.jsがなかったので、無事に設置できたんですが、友達が教えてくれたLightbox 2には、prototype.jsが必須で、firefoxでは、ちゃんとエラーも出ず表示されるにも関わらず、IEで見ると、サイト自体にアクセスできない状態になってました。原因はprototype.jsとサイドバー折り畳みスクリプトがバッティングしてて、それが原因だった様子。

そこで、私が見つけ出してきたのが、

prettyPhoto - jQuery lightbox clone - by Stephane Caron

これは、prototype.jsを使用しないでjQueryというライブラリを使用するという物。これを設置してみたんですけど、途中で、見つけたLightviewというスクリプトが高機能で、尚且つカッコイイという事で、どうしても、これを設置したくて、prototype.jsが使えるように、原因を調べて、バッティングしてたサイドバー折りたたみスクリプトをはずしてみたら、IEでもすんなり動くようになりました。

Lightview

設置方法

まずは、lightviewをダウンロードしてきます。展開したファイルの自分の環境に合わせて、アップロードします。次にscriptaculous.jsと、そのZIPファイルに一緒に入っているeffects.jsをアップロードします。（先にダウンロードしたlightviewを同じディレクトリに入れるのが簡単かと。）

そして、自分の環境に合わせて、head内にパスを記述します。

<link rel="stylesheet" type="text/css" href="css/lightview.css" />  
<script type="text/javascript" src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">google.load("prototype", "1.6.0.2");</script>  
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>  
<script type="text/javascript" src="js/lightview.js"></script>

今回は、Google AJAX APIを使って、jQueryやPrototypeなどをgoogleからダウンロードし、、自分のサーバーにjquery.jsやprototype.jsを設置する事なく使えちゃいます。今回はこの方法を取りました。なぜかというと、メリットが大きいからです。（だいたい自前で設置すると、prototypeが重過ぎるんだよ(´д｀)）

バージョン指定を最後までしないことで最新版を利用できる
バージョン指定が簡単に出来る
Gzip圧縮転送を自動で行ってくれてファイルは可能なかぎり最小化される

画像単体で表示する場合の記述方法

hrefに拡大画像のURLと"lightview"のclass属性をつけます。

<a href="image.jpg" class="lightview"><img src="image_samneil.jpg" border="0" alt="" width="" height="" /></a>


画像にコメントを表示
1.<a href="leopard.jpg" title="A title" class="lightview" >Leopard</a>  
2.<a href="gazelle.jpg" title="This image has a title :: And a caption" class="lightview">Gazelle</a>  
3.<a href="cheetah.jpg" ttitle=":: I don"t have a title, just a caption" class="lightview">Cheetah</a> 

"This image has a title :: And a caption" の場合、This image has a title の部分に画像のタイトルを、::を挟んで And a captionに、画像の見出し説明文を指定すれば、表示されます。
iframeで他サイトをpopupで表示
<a href="http://www.google.com" rel="iframe" title="Google :: :: fullscreen: true" class="lightview" >Google</a>  
<a href="http://www.yahoo.com" rel="iframe" title="Yahoo :: A caption :: width: 800, height: 600" class="lightview" >Yahoo</a> 

例のごとく、title属性に "画像ファイルのタイトル :: 見出し（説明） :: width: 800, height: 600" といった感じで、フルスクリーンからサイズ指定してのiframeをpopupしてくれます。
その他のメディアファイルの指定の仕方は、本家サイトでの説明をご活用下さい。
lightview.jsが何故素晴らしいかと言うと様々なメディアファイルをLighboxのように表示出来ちゃうんです。扱える画像も「画像」「動画(Quicktime)」「FLASH(swf)」「AJAX」「iframe」「HTML(inline content)」と幅広く、使いこなせたら、かなり便利な代物です。フォームなんかも、このスクリプトを使えば、できちゃいますしね。
と、言うわけで、うちでは、このスクリプトを使っていきたいと思います。せっかくprototypeいれたので、そちらの方で、折りたたみを実現しようかなーって思ってます。うまくいくかわかりませんけどね。(´д｀)

参考サイト
様々なメディアファイルをかっこよく表示してくれるlightview.js | CSS Lecture

EyesPic - フリー画像素材

Google AJAX APIを使ってjQueryやPrototypeを読み込む | CSS Lecture

Ajaxload - Ajax loading gif generator






Permanent link
 Same Topics
 TrackBack (1)
 Comment (0)
 Edit





Edit this entry... (webmaster only)




 wikieditish message: Ready to edit this entry.





Title:




Body:

meta-creation_date: 2008-06-14T01:03:43+09:00

<p>この関連のトピックを見て頂ければわかると思いますが、<a href="http://www.huddletogether.com/projects/lightbox/" title="Lightbox JS" target="blank_">Lightbox JS</a>の方は、<code>prototype.js</code>がなかったので、無事に設置できたんですが、友達が教えてくれた<a href="http://www.lokeshdhakar.com/projects/lightbox2/" title="Lightbox 2" target="blank_">Lightbox 2</a>には、<code>prototype.js</code>が必須で、firefoxでは、ちゃんとエラーも出ず表示されるにも関わらず、IEで見ると、サイト自体にアクセスできない状態になってました。原因は<code>prototype.js</code>とサイドバー折り畳みスクリプトがバッティングしてて、それが原因だった様子。</p>
<p>そこで、私が見つけ出してきたのが、</p>
<blockquote>
<p class="quote-title"><a href="http://www.no-margin-for-errors.com/projects/prettyPhoto/" title="prettyPhoto - jQuery lightbox clone - by Stephane Caron" target="blank_">prettyPhoto - jQuery lightbox clone - by Stephane Caron</a></p>
</blockquote>
<p>これは、<code>prototype.js</code>を使用しないで<code>jQuery</code>というライブラリを使用するという物。これを設置してみたんですけど、途中で、見つけたLightviewというスクリプトが高機能で、尚且つカッコイイという事で、どうしても、これを設置したくて、<code>prototype.js</code>が使えるように、原因を調べて、バッティングしてたサイドバー折りたたみスクリプトをはずしてみたら、IEでもすんなり動くようになりました。</p>
<blockquote>
<p class="quote-title"><a href="http://www.nickstakenburg.com/projects/lightview/" title="Lightview" target="blank_">Lightview</a></p>
</blockquote>
<!-- more -->
<p><em>設置方法</em></p>
<p>まずは、lightviewをダウンロードしてきます。展開したファイルの自分の環境に合わせて、アップロードします。次に<code>scriptaculous.js</code>と、そのZIPファイルに一緒に入っている<code>effects.js</code>をアップロードします。（先にダウンロードしたlightviewを同じディレクトリに入れるのが簡単かと。）</p>
<p>そして、自分の環境に合わせて、head内にパスを記述します。</p>
<pre>
<code>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/lightview.css&quot; /&gt;  
&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;&gt;&lt;/script&gt;  
&lt;script type=&quot;text/javascript&quot;&gt;google.load(&quot;prototype&quot;, &quot;1.6.0.2&quot;);&lt;/script&gt;  
&lt;script type=&quot;text/javascript&quot; src=&quot;js/scriptaculous.js?load=effects&quot;&gt;&lt;/script&gt;  
&lt;script type=&quot;text/javascript&quot; src=&quot;js/lightview.js&quot;&gt;&lt;/script&gt;</code>
</pre>
<p>今回は、Google AJAX APIを使って、jQueryやPrototypeなどをgoogleからダウンロードし、、自分のサーバーに<code>jquery.js</code>や<code>prototype.js</code>を設置する事なく使えちゃいます。今回はこの方法を取りました。なぜかというと、メリットが大きいからです。（だいたい自前で設置すると、prototypeが重過ぎるんだよ(´д｀)）</p>
<ul>
	<li>バージョン指定を最後までしないことで最新版を利用できる</li>
	<li>バージョン指定が簡単に出来る</li>
	<li>Gzip圧縮転送を自動で行ってくれてファイルは可能なかぎり最小化される</li>
</ul>
<p><em>画像単体で表示する場合の記述方法</em></p>
<p><code>hrefに拡大画像のURLと&quot;lightview&quot;のclass属性をつけます。
<pre>
<code>&lt;a href=&quot;image.jpg&quot; class=&quot;lightview&quot;&gt;&lt;img src=&quot;image_samneil.jpg&quot; border=&quot;0&quot; alt=&quot;&quot; width=&quot;&quot; height=&quot;&quot; /&gt;&lt;/a&gt;</code>
</pre>
<p><em>画像にコメントを表示</em></p>
<pre>
<code>1.&lt;a href=&quot;leopard.jpg&quot; title=&quot;A title&quot; class=&quot;lightview&quot; &gt;Leopard&lt;/a&gt;  
2.&lt;a href=&quot;gazelle.jpg&quot; title=&quot;This image has a title :: And a caption&quot; class=&quot;lightview&quot;&gt;Gazelle&lt;/a&gt;  
3.&lt;a href=&quot;cheetah.jpg&quot; ttitle=&quot;:: I don&quot;t have a title, just a caption&quot; class=&quot;lightview&quot;&gt;Cheetah&lt;/a&gt; </code>
</pre>
<p>&quot;This image has a title :: And a caption&quot; の場合、This image has a title の部分に画像のタイトルを、::を挟んで And a captionに、画像の見出し説明文を指定すれば、表示されます。</p>
<p><em>iframeで他サイトをpopupで表示</em></p>
<pre>
<code>&lt;a href=&quot;http://www.google.com&quot; rel=&quot;iframe&quot; title=&quot;Google :: :: fullscreen: true&quot; class=&quot;lightview&quot; &gt;Google&lt;/a&gt;  
&lt;a href=&quot;http://www.yahoo.com&quot; rel=&quot;iframe&quot; title=&quot;Yahoo :: A caption :: width: 800, height: 600&quot; class=&quot;lightview&quot; &gt;Yahoo&lt;/a&gt; </code>
</pre>
<p>例のごとく、title属性に &quot;画像ファイルのタイトル :: 見出し（説明） :: width: 800, height: 600&quot; といった感じで、フルスクリーンからサイズ指定してのiframeをpopupしてくれます。</p>
<p>その他のメディアファイルの指定の仕方は、本家サイトでの説明をご活用下さい。</p>
<p>lightview.jsが何故素晴らしいかと言うと様々なメディアファイルをLighboxのように表示出来ちゃうんです。扱える画像も「画像」「動画(Quicktime)」「FLASH(swf)」「AJAX」「iframe」「HTML(inline content)」と幅広く、使いこなせたら、かなり便利な代物です。フォームなんかも、このスクリプトを使えば、できちゃいますしね。</p>
<p>と、言うわけで、うちでは、このスクリプトを使っていきたいと思います。せっかく<code>prototype</code>いれたので、そちらの方で、折りたたみを実現しようかなーって思ってます。うまくいくかわかりませんけどね。(´д｀)</p>
<blockquote>
<p class="quote-title">参考サイト</p>
<p><a href="http://www.css-lecture.com/log/javascript/006.html" title="様々なメディアファイルをかっこよく表示してくれるlightview.js | CSS Lecture" target="blank_">様々なメディアファイルをかっこよく表示してくれるlightview.js | CSS Lecture</a><br/>
<a href="http://eyes-art.com/pic/" title="EyesPic - フリー画像素材" target="blank_">EyesPic - フリー画像素材</a><br />
<a href="http://www.css-lecture.com/log/web/007.html" title="Google AJAX APIを使ってjQueryやPrototypeを読み込む | CSS Lecture" target="blank_">Google AJAX APIを使ってjQueryやPrototypeを読み込む | CSS Lecture</a><br/>
<a href="http://www.ajaxload.info/" title="Ajaxload - Ajax loading gif generator" target="blank_">Ajaxload - Ajax loading gif generator</a>
</p>
</blockquote>


Excerpt:

この関連のトピックを見て頂ければわかると思いますが、Lightbox JSの方は、prototype.jsがなかったので、無事に設置できたんですが、友達が教えてくれたLightbox 2には、prototype.jsが必須で、firefoxでは、ちゃんとエラーも出ず表示されるにも関わらず、IEで見ると、サイト自体にアクセスできない状態になってました。原因はprototype.jsとサイドバー折り畳みスクリプトがバッティングしてて、それが原因だった様子。そこで、私が見つけ出してきたのが、prettyPhoto - jQuery lightbox clone - by Stephane Caronこれは、prototype.jsを使用しないでjQueryというライブラリを使用するという物。これを設置してみたんですけど、途中で、見つけたLightviewというスクリプトが高機能で、尚且つカッコイイという事で、どうしても、これを設置したくて、prototype.jsが使えるように、原因を調べて、バッティングしてたサイドバー折りたたみスクリプトをはずしてみたら、IEでもすんなり動くようになりました。Lightview設置方法まずは、lightviewをダウンロードしてきます。展開したファイルの自分の環境に合わせて、アップロードします。次にscriptaculous.jsと、そのZIPファイルに一緒に入っているeffects.jsをアップロードします。（先にダウンロードしたlightviewを同じディレクトリに入れるのが簡単かと。）そして、自分の環境に合わせて、head内にパスを記述します。<link rel="stylesheet" type="text/css" href="css/lightview.css" />  <script type="text/javascript" src="http://www.google.com/jsapi"></script>  <script type="text/javascript">google.load("prototype", "1.6.0.2");</script>  <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>  <script type="text/javascript" src="js/lightview.js"></script>今回は、Google AJAX APIを使って、jQueryやPrototypeなどをgoogleからダウンロードし、、自分のサーバーにjquery.jsやprototype.jsを設置する事なく使えちゃいます。今回はこの方法を取りました。なぜかというと、メリットが大きいからです。（だいたい自前で設置すると、prototypeが重過ぎるんだよ(´д｀)）	バージョン指定を最後までしないことで最新版を利用できる	バージョン指定が簡単に出来る	Gzip圧縮転送を自動で行ってくれてファイルは可能なかぎり最小化される画像単体で表示する場合の記述方法hrefに拡大画像のURLと"lightview"のclass属性をつけます。<a href="image.jpg" class="lightview"><img src="image_samneil.jpg" border="0" alt="" width="" height="" /></a>画像にコメントを表示1.<a href="leopard.jpg" title="A title" class="lightview" >Leopard</a>  2.<a href="gazelle.jpg" title="This image has a title :: And a caption" class="lightview">Gazelle</a>  3.<a href="cheetah.jpg" ttitle=":: I don"t have a title, just a caption" class="lightview">Cheetah</a> "This image has a title :: And a caption" の場合、This image has a title の部分に画像のタイトルを、::を挟んで And a captionに、画像の見出し説明文を指定すれば、表示されます。iframeで他サイトをpopupで表示<a href="http://www.google.com" rel="iframe" title="Google :: :: fullscreen: true" class="lightview" >Google</a>  <a href="http://www.yahoo.com" rel="iframe" title="Yahoo :: A caption :: width: 800, height: 600" class="lightview" >Yahoo</a> 例のごとく、title属性に "画像ファイルのタイトル :: 見出し（説明） :: width: 800, height: 600" といった感じで、フルスクリーンからサイズ指定してのiframeをpopupしてくれます。その他のメディアファイルの指定の仕方は、本家サイトでの説明をご活用下さい。lightview.jsが何故素晴らしいかと言うと様々なメディアファイルをLighboxのように表示出来ちゃうんです。扱える画像も「画像」「動画(Quicktime)」「FLASH(swf)」「AJAX」「iframe」「HTML(inline content)」と幅広く、使いこなせたら、かなり便利な代物です。フォームなんかも、このスクリプトを使えば、できちゃいますしね。と、言うわけで、うちでは、このスクリプトを使っていきたいと思います。せっかくprototypeいれたので、そちらの方で、折りたたみを実現しようかなーって思ってます。うまくいくかわかりませんけどね。(´д｀)参考サイト様々なメディアファイルをかっこよく表示してくれるlightview.js | CSS LectureEyesPic - フリー画像素材Google AJAX APIを使ってjQueryやPrototypeを読み込む | CSS LectureAjaxload - Ajax loading gif generator



Ping URLs:




Password: