現在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で取得する方法などがあれば教えていただきたいです。
回答2件
あなたの回答
tips
プレビュー