0

I've got an image display page. I want to add a modal with a larger version of the image. I have created a button according to the bootstrap instructions that does the job:

<button type="button" data-toggle="modal" data-target="#myModal">View</button>

I'm trying to apply the data-toggle and data-target portions of that code to my image_tag but I can't figure out how. Here's my best guess:

 <%= image_tag(@illustration.image.url),  :options => { :data-toggle => "modal", :data-target => myModal}  %>

Thanks for any suggestions.

Joe Essey
  • 3,457
  • 8
  • 40
  • 69

1 Answers1

2

The syntax of your data attributes hash is wrong, you can do it two ways: 

<%= image_tag(@illustration.image.url),  :options => { "data-toggle" => "modal", "data-target" => myModal}  %>

Or

<%= image_tag(@illustration.image.url),  :options => { :data => {toggle => "modal"}, :data => {target => myModal}}  %>

UPDATE:

See this for the link_to with image_tag inside: link_to image_tag with inner text or html in rails

Community
  • 1
  • 1
MurifoX
  • 14,991
  • 3
  • 36
  • 60
  • Thanks that makes sense and doesn't break. However, I can't click the image to get the action to work. Any idea how I'd change this to a link_to and get the modal functionality? – Joe Essey Jun 08 '13 at 15:04
  • You can put a image_tag inside a link_to block and get the functionality. – MurifoX Jun 08 '13 at 15:19
  • I'm familiar with that, however all the different ways I'm trying to incorporate `:options => { "data_toggle" => "modal", "data_target" => "myModal" }` are throwing 'wrong number of arguements' errors, or just linking me back to the same page. I can't find anything telling me how to nest image_tag in to link_to with a call to a javascript function. – Joe Essey Jun 08 '13 at 15:35
  • Keep in mind that the data options must be on the link, not on the image. – MurifoX Jun 08 '13 at 15:36
  • Ok, I understand. It's just that no configurations are working. Have you gotten this to work before? I'm beginning to believe this scheme is just not possible with the provided bootstrap scheme. Thanks for your help. – Joe Essey Jun 08 '13 at 15:43
  • Use the javascript code then. On clicking the link, you do a `$('#myModal').modal('show')`, as stated on bootstrap documentation. – MurifoX Jun 08 '13 at 16:14