質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

a hrefでユーザーが投稿した画像を取得したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,002

mig2332

score 28

現在Ruby on Railsで開発しています。
今回画像ギャラリーを配置しようと思い、jQueryプラグインのlightboxを導入しました。
ユーザーが何枚か画像を投稿できるようにして、投稿した画像をギャラリーにして見れるようにしたいです。

ユーザーの投稿した画像(user_image1)をギャラリーに   <%= image_tag @user.user_image1 %>で反映しました。
それは問題なく見れますがクリックして拡大する時に表示される画像を <a href>で指定しないといけないので、<%= image_tag @user.user_image1 %>が使えません。

<a href>でユーザーの投稿した画像を取得する方法を知りたいです。

      <div class="row">
        <div id="demo-test-gallery" class="demo-gallery">


      <!--ギャラリーに表示されている画像をクリックした時に拡大表示された画像 -->
          <a href="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x683" >


      <!--ギャラリーに表示されている画像 -->
            <%= image_tag @user.user_image1 %>
            <figure>画像説明文</figure>
          </a>
       </div>
</div>

試してみたこと

   <a href= "public/uploads/user_images/#{@user.user_image1}" data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x683" >


            <%= image_tag @user.user_image1 ,class: "face_pic"%>
            <figure><%= simple_format(@note.rule) %></figure>
          </a>

と a href で指定してみましたが、No route matchesとなりました。

出力されたHTML

<div class="row">
        <div id="demo-test-gallery" class="demo-gallery">

           <a href= "public/uploads/user_images/#{@user.user_image1}" data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x683" >


            <img class="face_pic" src="/public/uploads/image_1/20160813112838.jpg" alt="20160813112838" />
            <figure><p>a</p></figure>
          </a>
<script type="text/javascript">
    (function() {
    var initPhotoSwipeFromDOM = function(gallerySelector) {
      var parseThumbnailElements = function(el) {
          var thumbElements = el.childNodes,
              numNodes = thumbElements.length,
              items = [],
              el,
              childElements,
              thumbnailEl,
              size,
              item;
          for(var i = 0; i < numNodes; i++) {
              el = thumbElements[i];
              // include only element nodes 
              if(el.nodeType !== 1) {
                continue;
              }
              childElements = el.children;
              size = el.getAttribute('data-size').split('x');
              // create slide object
              item = {
            src: el.getAttribute('href'),
            w: parseInt(size[0], 10),
            h: parseInt(size[1], 10)

              };
              item.el = el; // save link to element for getThumbBoundsFn
              if(childElements.length > 0) {
                item.msrc = childElements[0].getAttribute('src'); // thumbnail url
                if(childElements.length > 1) {
                    item.title = childElements[1].innerHTML; // caption (contents of figure)
                }
              }
          var mediumSrc = el.getAttribute('data-med');
                if(mediumSrc) {
                  size = el.getAttribute('data-med-size').split('x');
                  // "medium-sized" image
                  item.m = {
                      src: mediumSrc,
                      w: parseInt(size[0], 10),
                      h: parseInt(size[1], 10)
                  };
                }
                // original image
                item.o = {
                  src: item.src,
                  w: item.w,
                  h: item.h
                };
              items.push(item);
          }
          return items;
      };

Javascriptについての知識は全くありません。Javascriptで取得する方法などがあれば教えていただきたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/22 17:39

    出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記されたほうが回答を得やすいと思います。

    キャンセル

  • mig2332

    2016/08/22 17:55

    追加しました。ありがとうございます!

    キャンセル

回答 2

+2

aタグの所に、imgタグのsrcと同じURLが入ればいいんですよね?

<div class="row">
  <div id="demo-test-gallery" class="demo-gallery">
    <%= link_to image_path @user.user_image1,  "data-size" => "1600x1068", "data-med" => "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg", "data-med-size" => "1024x683" do %>
      <%= image_tag @user.user_image1 ,class: "face_pic"%>
      <figure><%= simple_format(@note.rule) %></figure>
    <% end %>
  </div>
</div>


こんな感じで、image_pathヘルパで、画像のURLを取得してあげればいいかと思いますが。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/22 21:02

    ありがとうございます!
    image_pathヘルパで、画像のURLを取得してみましたが、画像をクリックできなくなりました。やはりJavaScriptのほうに問題があるのかな。と考えています。

    キャンセル

  • 2016/08/22 22:05

    何か特別な動作をアレンジしているのでしょうか?
    そうでないなら、素直に lightbox.cssとlightbox.jsを読み込んで、一般的なlightboxの利用方法を試した方が良いかと思います。

    キャンセル

  • 2016/08/23 15:09

    Magnific Popupのプラグインで変更したら、教えていただいいた 

    <%= link_to image_path @user.user_image1, "data-size" => "1600x1068", "data-med" => "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg", "data-med-size" => "1024x683" do %>
    <%= image_tag @user.user_image1 ,class: "face_pic"%>
    <figure><%= simple_format(@note.rule) %></figure>
    <% end %>

    上記の方法で無事表示されました! a href 以外の方法を知らなかったので、勉強になりました。
    ありがとうございました!!!

    キャンセル

checkベストアンサー

+1

LightBox はその機能の名前として使っておられるようですが、実際に組み込まれているのは PhotoSwipe というライブラリですよね?
下記記事にも書かれているように、PhotoSwipe はある程度のJavaScriptの知識が必要とされます。

【モバイルにも対応!完璧なLightBox「PhotoSwipe」をjQueryプラグイン化しました。 | 1design】
http://1design.jp/web-development/1154

こんなことが書いてあります。
    PhotoSwipe is not a simple jQuery plugin, at least basic JavaScript knowledge is required to install
「jQueryのプラグインとかじゃないので、実装するのに最低限のJavaScriptの知識が必要です」とのことですが、なんか、実装が地味に面倒ですよね…(笑)


なので、別のギャラリー機能を持った「LightBox系」を使われるのが手早いかと思います。

【高機能画像ギャラリーを手軽に設置できるjQueryプラグイン「lightGallery」】
http://nelog.jp/jquery-lightgallery

【ライトボックスの定番jQueryプラグイン「Lightbox2.js」 | Web模様】
http://www.webmoyou.sakura.ne.jp/web/305/


探せばもっとあるとは思います。

【[jQuery]レスポンシブなフリーのライトボックスプラグインを集めてみた - おやつ部】
http://oyatsu-bu.com/toshianaka/2016/06/lightbox-plugin/

【【jQuery】あると便利!Light Box系プラグイン10選】
http://voyager-jp.com/blog/jquery/lightbox_plugin_01/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/23 15:06

    教えていただいた通りPhotoSwipeは少し違ったみたいで、

    http://oyatsu-bu.com/toshianaka/2016/06/lightbox-plugin/
    こちらの記事にあるMagnific Popupを使用して、

    <%= link_to image_path @user.user_image1, "data-size" => "1600x1068", "data-med" => "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg", "data-med-size" => "1024x683" do %>
    <%= image_tag @user.user_image1 %>
    <% end %>


    の方法でポップアップでユーザーの画像が表示されるようになりました。
    詳細のご回答ありがとうございました!!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる