Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.ruby > #7276

Ruby each loop only grabs first image when using getElementsbyClassName

Show all headers | View raw

I am using the Ruby Carrierwave gem and Fabric.js in my canvas app. I use CarrierWave to assist on storing my images in the database and I use Ruby's .each iterator to display the images on the page(see below). It works great.

<canvas id="canvas" width="300" height="550"></canvas>
 <% @images.each do |m| %>
  <%= image_tag m.photo_pic.url, :class => "my-image",  %>
 <% end %>

I then use a javascript function and fabric.js to display the images in my canvas.(see below) It works, However no matter what image I click it always displays the FIRST image into the canvas.For Example, if I click the 10th image that is displayed the first image will always be added to the canvas. I would like to click any image and have that particular image display in the canvas. Im not sure what the problem is. 
 
var canvas = new fabric.Canvas('canvas');
 $(".my-image").on('click',function() {
  var imgElement = document.getElementsByClassName("my-image")
  var imgInstance = new fabric.Image(imgElement, {
   left: 50,
   top: 50,
 });
 canvas.add(imgInstance);
 });

I think this could help out alot of people who are using Ruby and Fabric.js in there apps.

Back to comp.lang.ruby | Previous | Next — Next in thread | Find similar

Thread

Ruby each loop only grabs first image when using getElementsbyClassName patrick lowry <plowry05@gmail.com> - 2016-07-09 21:13 -0700
  Ruby each loop only grabs first image when using getElementsbyClassName Sayth Renshaw <flebber.crue@gmail.com> - 2016-07-11 18:32 -0700
    Re: Ruby each loop only grabs first image when using getElementsbyClassName patrick lowry <plowry05@gmail.com> - 2016-07-17 06:07 -0700

csiph-web