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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1962閲覧

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

mig2332

総合スコア33

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/08/22 08:31

編集2016/08/22 08:54

現在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>

JavaScript

1 2 3 <script type="text/javascript"> 4 (function() { 5 var initPhotoSwipeFromDOM = function(gallerySelector) { 6 var parseThumbnailElements = function(el) { 7 var thumbElements = el.childNodes, 8 numNodes = thumbElements.length, 9 items = [], 10 el, 11 childElements, 12 thumbnailEl, 13 size, 14 item; 15 for(var i = 0; i < numNodes; i++) { 16 el = thumbElements[i]; 17 // include only element nodes 18 if(el.nodeType !== 1) { 19 continue; 20 } 21 childElements = el.children; 22 size = el.getAttribute('data-size').split('x'); 23 // create slide object 24 item = { 25 src: el.getAttribute('href'), 26 w: parseInt(size[0], 10), 27 h: parseInt(size[1], 10) 28 29 }; 30 item.el = el; // save link to element for getThumbBoundsFn 31 if(childElements.length > 0) { 32 item.msrc = childElements[0].getAttribute('src'); // thumbnail url 33 if(childElements.length > 1) { 34 item.title = childElements[1].innerHTML; // caption (contents of figure) 35 } 36 } 37 var mediumSrc = el.getAttribute('data-med'); 38 if(mediumSrc) { 39 size = el.getAttribute('data-med-size').split('x'); 40 // "medium-sized" image 41 item.m = { 42 src: mediumSrc, 43 w: parseInt(size[0], 10), 44 h: parseInt(size[1], 10) 45 }; 46 } 47 // original image 48 item.o = { 49 src: item.src, 50 w: item.w, 51 h: item.h 52 }; 53 items.push(item); 54 } 55 return items; 56 };

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/22 08:39

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

2016/08/22 08:55

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

回答2

0

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

Ruby

1<div class="row"> 2 <div id="demo-test-gallery" class="demo-gallery"> 3 <%= 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 %> 4 <%= image_tag @user.user_image1 ,class: "face_pic"%> 5 <figure><%= simple_format(@note.rule) %></figure> 6 <% end %> 7 </div> 8</div>

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

投稿2016/08/22 11:56

rifuch

総合スコア1901

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mig2332

2016/08/22 12:02

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

2016/08/22 13:05

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

2016/08/23 06: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 以外の方法を知らなかったので、勉強になりました。 ありがとうございました!!!
guest

0

ベストアンサー

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/22 15:02

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mig2332

2016/08/23 06: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 %> の方法でポップアップでユーザーの画像が表示されるようになりました。 詳細のご回答ありがとうございました!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問