バタンキュー

Web制作の現場から・・ただいま少し一休み中

※当ページを閲覧される場合は、Windows7以上、Internet Explorer11などの安全でできるだけ最新の閲覧環境でアクセスされることを推奨いたします。
※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は、レイアウトが崩れて正しく表示されない可能性がありますのでご了承ください。


スポンサーサイト

カテゴリー:-

一定期間更新がないため広告を表示しています

0
     | - | | | pookmark

    このブログ(JUGEM)の画像拡大表示

    カテゴリー:ブログいぢり・・・
    よく仕事でクライアントにおすすめしてた無料のレンタルブログサービスの一つに、exite(エキサイト株式会社)が運営する『エキサイトブログ』がありました。他社のサービスにもあるような有料プラン(ヘッダー広告や記事下広告を非表示にできたり、画像容量が無制限になったりいろいろ)もあるんですが、広告を気にせんかったら無料プランでも充分活用できて、インターフェイスも、クライアント側で更新してもらうことを考えた場合、結構分かりやすい方やと思って利用させていただいておりました。
    その『エキサイトブログ』、少し前までは、デフォルトやと投稿時にアップした画像の拡大(ポップアップ)表示ってかなりしょぼ〜い感じで、“右クリック”で画像やイラストを取得することを禁止する(実際は画面上に表示されてる時点で既に取得されてる訳なんですが・・)という「右クリック禁止ブログパーツ」を導入すると、LightBoxのようなポップアップ表示効果が得られるという裏技があったりして、ちょっとした他言無用の禁じ手的な使い方で得した感さえあったりしました。
    そして時は流れ、写真なんかの記事中の画像をクリックすると、別ウィンドウ表示にこそならないものの、今じぁフツーにギャラリー表示されるような感じになってるんじゃないでしょか?

    で、『エキサイトブログ』のことを熱く語らせていただきましたが、『アメーバブログ』略して『アメブロ』なんか、ずっと前からフツーにギャラリー表示やってまっせー!!

    参照:エキサイトブログ(blog)|簡単作成!使いやすい無料ブログ

    参照:アメーバブログ(アメブロ)|Amebaで無料ブログを始めよう


    それに比べてここ、JUGEMさん・・・ずーっと前からショボショボ〜なままでございます。当然、別ウィンドウ表示なんかにはなりません。自分でせっせと target="_blank" を<a>タグ内に仕込んだところで、真っ黒、正真正銘 #000 の背景画面のど真ん中にリンク先画像が<<ででーん>>と表示されるだけの仕様なのです。 じゃあ、管理画面の【データ管理】→【画像の管理】で「サムネイルを作成」なんて期待させるような機能つけるなよー!ただその分、容量食ってるだけやん!!っていちいち突っ込んでしまう悲しいさが

    は〜、何とかならんかな〜??? せっかくjQueryをGoogle先生んとこのCDNからお借りしてるんやったら、jQueryプラグインの画像表示操作系あたりのパッケージファイル群を適当に外部のサーバーにアップしていろいろ試してみよかいなー!と思ってやってみました。

    しかーし!・・なんと、結果は無残・・・ここ(JUGEM)にアップした画像に対しては一切効果なし! →元の画像自体も外部サーバーにアップして、記事内の<img>要素のsrc属性で呼び出せば何とか言うコトをきいてくれはしましたが・・ううぅー、違う、違うなー、決してこんなことがしたかった訳やないぞー!! もっとスマートにフツーに記事を投稿して画像を(JUGEMに)アップしてLightBoxでも何でもええから見た目のクオリティーをアップできへんのかー! そして更に調査続行・・・

    そして、ようやく見つけました。何と、2009年にLightBoxに対応されてたんじゃあないですか!!これはこれは大変、本当に大変失礼いたしましたー。でも prototype.js+scriptaculous.js 版で稼働するバージョンだった?ようで、2012年には jQuery版の「LightBox2」の最新版を各自で jQuery本体とともに勝手にバージョンアップしていってねーみたいなお知らせも発見してしまいました。あうー。

    参照:<追記あり>javascriptのライブラリを公開いたしました。 by JUGEMお知らせブログ

    参照:JUGEMブログに動的画像拡大表示”Lightbox2”を追加 by 【浦山ダイバーズ】

    そして、何はともあれ“Lightbox2”の本家サイトへ行って最新版をダウンロード。現時点ではv2.7.1です。 早速ダウンロードしたZIPファイルを解凍、そのフォルダの中にある『jsフォルダ』の中の「lightbox.min.js」か「lightbox.js」と、『cssフォルダ』の中の「lightbox.css」、『imgフォルダ』の中の「close.png」「loading.gif」「next.png」「prev.png」の4つの画像を外部サーバーなどにアップしておきます。
    ※『imgフォルダ』の中の4つの画像は、ここ(JUGEM)の管理画面からJUGEMにアップしておいても良いと思います! ただし、その場合は予め、「lightbox.css」の該当箇所をすべて“http://img-cdn.jg.jugem.jp/***/******/********_******.png”などの絶対パスに書き換えておいてください!!

    実際のソースは次のよな感じです。
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="http://外部サーバーなどのディレクトリーパス/lightbox.min.js"></script>
    <link rel="stylesheet" href="http://外部サーバーなどのディレクトリーパス/lightbox.css">
    
    そして、<a>タグ内にrel属性を[rel="lightbox"]と追加すれば基本的には動作します。具体的なソースは次のよな感じになります。
    <a href="http://img-cdn.jg.jugem.jp/***/******/********_******.jpg" rel="lightbox"><img src="http://img-cdn.jg.jugem.jp/***/******/********_******_t.jpg" alt="○○○○○" title="クリックで拡大表示" width="300" height="200"></a>
    

    グループ化して、ギャラリー表示(PREVマーク「<」や、NEXTマーク「>」で、LightBox内で連続表示)したい場合は、rel属性じゃなくてdata-lightbox属性を使います。グループ化したい画像リンクの<a>タグ内に[data-lightbox="group-1"]と同じグループ名をつければ良いみたいです。
    ※"group-1"のグループ名は任意でご自由にお好みの名前で良いですよ。
    <a href="http://img-cdn.jg.jugem.jp/***/******/********_******.jpg" data-lightbox="group-1"><img src="http://img-cdn.jg.jugem.jp/***/******/********_******_t.jpg" alt="○○○○○" title="クリックで拡大表示" width="300" height="200"></a>
    

    ブログなんかの場合、全部同じグループで良いから一括で自動的にグループ化してギャラリー表示したいな〜なんていう人は下記ページをご覧あれ!

    参照:Lightbox2の使い方 by Webエンジニアブログ

    ↑途中あたりに「data-lightboxを自動的に追加」っていう見出しで参考になるスクリプトを公開してくれておりますよー! まあ、実際はすべての<a>タグにdata-lightbox属性を追加するのは、上記ページにも書かれてるようにテキストリンクもあることを考慮すると、ちと現実的じゃないので、最後のやつが一番実用的かも知れません。 あ、ちなみに上記には書かれてませんが、<body>要素内、それも出来るだけ最後の方、</body>の前あたりに記述する方が良いかもしれましぇん。

    ↓JUGEM用に少し補足版を私の方から。
    <script>
    // ページ内のすべてのa要素に繰り返し処理
    $("a").each(function() {
        if( $(this).find("img").length) { // a要素内にimg要素があるかどうかを判断し、
            $(this).attr("data-lightbox", "group-1"); // 拡大表示の画像リンクの場合は属性を追加
        }
    });
    <script>
    

    そしてそして、画像から単に拡大表示だけじゃなくて、知り合いのWebサイトや外部の情報サイト、あるいはAmazonなんかへリンクさせてる場合は、そいつらも「data-lightboxを自動的に追加」から除外しないといけないので、次のよに改変。
    <script>
    // ページ内のすべてのa要素に繰り返し処理
    $("a").each(function() {
        if($(this).find("img").length) { // a要素内にimg要素があるかどうかを判断し、
           if($(this).attr("href").match(/amazon|pid/)) { //且つhref属性にamazon等の文字列があれば、
           $(this).attr("target", "_blank"); // └→ target属性に_blankを設定
           } else {$(this).attr("data-lightbox", "group-1");} // それ以外で拡大表示の画像リンクの場合は属性を追加
        }
    });
    <script>
    

    もちろん、すべてグループ化じゃなくて単独ポップアップで良いという場合は"data-lightbox"を"rel"に、"group-1"を"lightbox"にそれぞれ置き換えれば良いだけです。
    あと、条件設定で文字列を含むかどうかの判定には、正規表現のmatchメソッドを使った方が無難かもです。match(/****/)が基本的な書式で、半角の縦罫線「|」で区切れば条件式になる文字列を増やせますよ!
    実は最初、indexOfメソッドを使うという方法を思いついたものの、Internet Explorer(以下IE)のバージョン「8」以前ではサポートされていないということを途中で知り断念。またしてもIEの壁・・・何やらIE8でもindexOfが使えるように別にスクリプトを用意すれば良いらしいんやけど、それはそれでまた面倒な気がする。

    参照:indexOf メソッド (Array) (JavaScript) by Microsoft Developer Network

    参考:IEでのindexof使用する際の注意 by かえでBlog
    0
       | ブログいぢり・・・ | | | pookmark

      スポンサーサイト

      カテゴリー:-
      0
         | - | | | pookmark
        コメント欄
        erica様、モブログ利用ということで携帯メール投稿でJUGEMブログをご利用中だということですね。

        詳細は別途ご案内させていただいたとおりですが、無料プランのスマホ版だと制限があって、残念ながらほとんど中身を触れません。
        しかし有料プランであれば、スマホ版でもhead要素(<head>〜</head>)内にフリースペースを挿入できるので、管理画面からカスタマイズ設定を行えばうまくいくかもしれません。→ http://info.jugem.jp/?eid=17214

        ただ、外部JavaScriptのダウンロードやアップロード、管理画面の操作設定などはスマホでは少しキビしい気がするので、PCからの操作が必要になると思われます。
        あまりお力になれずに申し訳ございませんでした・・・。
        | 一望 | 2015/05/01 12:15 |
        わーーー返事いただけると思ってなかったので嬉しいです!!!
        ちなみに、あたしスマホでモブログなのでパソコンでする系では無理なんです。いけますかね?
        アドレス載せてますのでお願いします!!!.*・゚ .゚・*.
        | erica | 2015/04/30 21:34 |
        はじめまして、erica様。この記事にたどり着いてコメントを送っていただけたことに感謝いたします!

        画像の拡大表示の件ですが、アメブロ(※)のような完全なブラウザー全体のギャラリー表示とはいきませんが、JavaScriptの「jQuery」と「LightBox2」というjQueryプラグインを利用して、関連するCSSや画像データを読み込ませてポップアップ表示させる方法をこの記事中で紹介させていただいております。

        ※ちなみにアメブロは別ウィンドウではなく、正確には同じウィンドウ上でギャラリー表示へ画面遷移してしまいます・・・。

        (JUGEMは、昨年頃からスマホ版限定で「フォトアルバム」という使い勝手の良いような悪いような、PC版にこそあって欲しいのに・・と思う機能をリリースしています→ http://info.jugem.jp/?eid=17212

        もし、記事中でわかりにくい点や不明な箇所があれば遠慮なく仰ってください!

        コメント入力の際、[email:]の入力欄に連絡用のメールアドレスをご入力いただければ、本ブログ上ではなく、メールで不明な内容などの詳細についてご説明させていただくこともできますので、よろしくお願いします。
        尚、[email:]欄にメールアドレスをご入力いただいても、ブログ上には公開されませんのでご安心ください。
        | 一望 | 2015/04/30 21:30 |
        はじめまして!いきなりすみません!
        あたしもそれだけが気になってたんです!ブログはジュゲムがいいんですが、アメブロみたいに画像クリックしたら別ウィンドウで拡大して見れるようにしたい!

        どうしたら出来るのでしょうか?(;o;)いきなりすみません。。
        | erica | 2015/04/30 12:12 |
        コメントする


        ※メールアドレスは公開されません

        ※Name:欄に入力したお名前にリンクが設定されます




        この記事のトラックバックURL
        http://stressful.jugem.jp/trackback/78
        トラックバック

        Button of Go to Home

        Button of Back to Top