Can anyone tell me whats wrong with this section of code? I recently got this to work, but found out soon after the functionality for the Fancybox gallery stopped working. The a link element is only a sliver compared to the over all element. Im not sure if thats it. I know the most recent edit I made was to fix the surrounding row from .row-fluid to .row since that broke my layout. Below is the code:
<body id="portfolio">
<div class="container-fluid" id="particles-js"></div>
<%= render 'layouts/altmenu_gallery' %>
<h1>Portfolio</h1>
<div id="gallery" class="container-fluid">
<% #photos.each_slice(4) do |group| %>
<div class="row ">
<% group.compact.each do |photo| %>
<div class= "col-md-3">
<a class="fancybox" data-fancybox="gallery" href="<%=image_path photo.file_url %>" data-caption="<%= photo.description %>">
<%= image_tag photo.file_url, class:' img-fluid img-thumbnail' if photo.file.present? %>
</a>
</div>
<% end %>
</div>
<% end %>
<br class="clear">
</div>
<%= link_to 'New Photo', new_photo_path %>
</body>
Sorry, but it is not possible to tell without seeing the actual html code or, preferably, live demo. Maybe this issue arises because you have not escaped photo.description and that breaks html code, but, as I said, I can not be sure.
Related
I'm trying to implement lightbox2 into a rather simple rails 5 app and seem to be getting the following error:
ActionController::RoutingError (No route matches [GET] "/images/lightbox/bpo.jpg"):
Ive been following steps from: https://lokeshdhakar.com/projects/lightbox2/ & https://github.com/gavinkflam/lightbox2-rails
All images for the Lightbox are located within "images/lightbox" folder & images are properly displayed on the page however upon clicking on an image to enlarge and bring up the Lightbox modal the above routing error is displayed in the logs & no image appears.
gallery_controller.rb
def index
#images = Dir.chdir(Rails.root.join('app/assets/images')) do
Dir.glob('lightbox/*.jpg')
end
end
index.html.erb
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<% #images.each do |image| %>
<div class="col-md-3">
<a href='<%= "images/#{image}" %>' class="img-fluid" data-lightbox="my-images">
<%= image_tag image, class: "img-fluid" %>
</a>
</div>
<% end %>
</div>
</div>
</div>
The following has been added to my application.html.erb file
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> just before the closing body tag.
Any help is greatly appreciated as I'm confused on how to proceed.
Jus try this code snippet.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<% #images.each do |image| %>
<div class="col-md-3">
<a href='<%= image_path(image) %>' class="img-fluid" data-lightbox="my-images">
<%= image_tag image, class: "img-fluid" %>
</a>
</div>
<% end %>
</div>
</div>
</div>
You need to use image_path helper method for href because assets are coming from through asset pipeline.
I've never used lightbox2 before
but if it's me, I would take 3 different solutions
change "a" into "div"
remove href from "a"
overwrite event handler of lightbox to preventDefault
hope any of those can solve your problem
My apologies for the confusing title. I am not very sure how to describe this question, please suggest alternative titles if possible!
I'm building a web app where you can like an answer, like most social apps. The problem is, I am new to using coffeescript and erb, so I am not sure how to target my jQuery animations to specific elements.
So my html.erb file looks like this. It has a ERB loop where I go through each answer and display it.
<% #question.answers.each do |answer| %>
<div class="row">
<div class="col-lg-2 col-sm-2">
<div class="like">
<button class="heart-btn">
</button>
<div class="liked">
+1
</div>
</div>
<div class="option">
<a href='/'>Report</a>
<br><a href='/'>Edit</a>
<br>
<%= link_to 'Delete', question_answer_path(#question, answer), method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
</div>
<div class="col-lg-10 col-sm-10">
<div class="row" style="margin:0">
<!-- USER PROFILE -->
<a href='/users/2/profile'>
<div class="mini-profile">
<%= image_tag(#tutor.picture_url) %>
<ul style="list-style-type:none">
<li class="username"><%= #tutor.username %></li>
<li><i class="fa fa-flag" style="padding: 2px"></i><%= #tutor.country %></li>
<li><i class="fa fa-graduation-cap"></i><%= #tutor.educational_level %></li>
</ul>
</div>
</a>
</div>
<div class="row">
<div class="ans-box">
<ul style="list-style-type:none">
<li><strong>This answer was written on:</strong> <%= answer.created_at %></li>
<li class="ans-content"><strong>This is my answer:</strong> <%= raw answer.answercontent %></li>
</ul>
</div>
</div>
</div>
</div>
<hr class="line">
<% end %>
Now, for the div of class 'like', I have the following js written (document ready omitted):
# Heart like
$(".heart-btn").click ->
$(this).toggleClass('clicked')
$(".liked").show().fadeOut(500)
the 'liked' class is the +1 that will show when the heart is clicked.
But as you can probably imagine, this makes ALL the hearts on the page display the '+1'. I want to target only the 'heart' of the 'answer' that was clicked. I reckon I can do this by referencing the current 'answer' as a dom object, but I am unsure on how to do this. My attempt is doing something like:
# Heart like
current_ans = <%= answer %>
$(".heart-btn").click ->
$(this).toggleClass('clicked')
current_ans.$(".liked").show().fadeOut(500)
But the syntax seems very off to me and it doesn't seem to work.
(I think partially I'm not finding the solution because I cannot phrase my question so well. Please advise if this is the case. Thanks!)
jQuery closest is ideal for this:
$(".heart-btn").click ->
$(this).toggleClass('clicked')
$(this).closest('.like').find(".liked").show().fadeOut(500)
I'm trying to create a two column layout. The first side should span 9 columns and the next one 3. Inside the col-md-9 I want to nest two more columns, one that spans 4 and another one that spans 8.
<div class="row">
<% #huddles.each do |huddle| %>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", huddle_path(huddle) %>
</div>
</div>
<% end %>
</div>
<div class="col-md-3">Second Column</div>
</div>
This however, comes out looking like this:
Am I nesting my rows and columns wrong? Or maybe it is my ruby code itself that screws up the layout once new "Huddles" are created?
EDIT: With the fixed code, the second column "col-md-3" comes out next to the last created huddle. Inspecting it, all the huddles make one single row.
<div class="row">
<% #huddles.each do |huddle| %>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", huddle_path(huddle) %>
</div>
</div>
</div>
<% end %>
<div class="col-md-3">Second Column</div>
</div>
And looks like this, where the second column moves all the way down next to the last huddle created:
I think this is what you are going for. I am pretty confident the issue is with the html structure and has nothing to do with ruby.
I also want to clarify. The initial issue you were having was that you were starting a div inside the loop but only closing it outside the loop. So starting n amount of divs but only one closing tag, and that would cause it to look like the image you first posted.
<div class="row">
<div class="col-md-9">
<% #huddles.each do |huddle| %>
<div class="show-region" >
<div class="col-md-4" style="height:150px;">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8" style="height:150px;">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", subjects_path(huddle) %>
</div>
</div>
<% end %>
</div>
<div class="col-md-3">Second Column</div>
</div>
I m using carousel to display the images. I ve uploaded the images in the cloud. But somehow it is repeating it self.
Here is my code
div id="myCarousel" class="carousel slide">
<div class="carousell-inner">
<% #img.each_with_index do |i|%>
<% if i.gallery == "Art"%>
<div class="active item">
<%= image_tag (i.image.url) %>
</div>
<% i.next%> <!-- For incrementing the i value but it is not working-->
<div class="item">
<%= image_tag (i.image.url)%>
</div>
<%end%>
<%end%>
</div>
</div>
What i want is in the active item it should display the first url of the image array and in the inactive item (which ll be active afterwards) should have the other images. It should not repeat the images. Here it is repeating the image since the value of i is not changing.
I am starting to understand what you want :)
You can make your logic very simple, if you will separate your data.
<div id="myCarousel" class="carousel slide">
<div class="carousell-inner">
<% #img.keep_if{|i| i.gallery == "Art"}.each do |i|%>
<div class="active item">
<%= image_tag (i.image.url) %>
</div>
<%end%>
<% #img.keep_if{|i| i.gallery != "Art"}.each do |i|%>
<div class="item">
<%= image_tag (i.image.url)%>
</div>
<%end%>
</div>
</div>
And better to prepare your data in controller, not in view.
I first thought you needed each_with_index, but actually, you are only interested in images from the Art gallery, no telling if the first image is actually an Art image, so I tried as follows:
<div id="myCarousel" class="carousel slide">
<div class="carousell-inner">
<% art_images_counter = 0 %>
<% #img.each do |image|%>
<% if image.gallery == "Art" %>
<% if art_images_counter == 0 %>
<div class="active item">
<%= image_tag (image.image.url) %>
</div>
<% else %>
<div class="item">
<%= image_tag (image.image.url)%>
</div>
<% end %>
<% art_images_counter += 1 %>
<%end%>
<%end%>
</div>
</div>
Hope this helps.
ive found out the answer by doing it manually. First of all in the controller i ve found out all the images which belong to the Art Gallery by this code.
#image = Image.find_all_by_gallery("Art")
Now to display the first element of the array #image, we can use the simply #image.first and then we can call that first element of the array in the active item of carousel. Then for the item part the basic thing to understand is that if we directly call and display all the elements of the array then the first element of the array will also be display in this part. So the repetition can happen. To avoid this we can do like this:
i = #image.count
#image[1..i]
So that the first element will not repeat in the `item' part of the carousel.
Hope it might help others. Thanks for giving time.
I'm just starting out with Ruby from a java background. I'm trying to code a particular loop but can't figure out the right syntax:
Could someone help me troubleshoot this please? I'm trying to write a loop but use different css classes to change the style of each block.
Realise this is probably easy, but help is appreciated....
<%= #products.each do |product, i| %>
<% if i % 1 %>
<div class="items-row clearfix">
<div class="one_fourth">
<div class="item-thumb">
<img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" />
</div>
<p><%= product.name %></p>
<p class="bold">$79.95 AUD</p>
<p class="color-wrap">
<span class="color" style="background:#ddd;"></span>
<span class="color" style="background:#f9f9f9;"></span>
<span class="color" style="background:green;"></span>
<span class="color" style="background:red;"></span>
</p>
</div>
<% elsif i % 4 %>
<div class="one_fourth last">
<div class="item-thumb">
<img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" />
</div>
<p><%= product.name %></p>
<p class="bold">$79.95 AUD</p>
</div>
</div><!-- end row -->
<% else %>
<div class="one_fourth">
<div class="item-thumb">
<img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" />
</div>
<p>Item Name</p>
<p class="bold">$79.95 AUD</p>
</div>
<% end %>
<% end %>
You can do something like this using cycle:
<% products.each_slice(4) do |slice| %>
<div class="items-row clearfix">
<% slice.each_with_index do |product,i| %>
<div class="one_fourth <%= cycle("first", "second", "third", "fourth") %>">
<%= render product %>
<% if i != 3 %>
<p class="color-wrap">
<span class="color" style="background:#ddd;"></span>
<span class="color" style="background:#f9f9f9;"></span>
<span class="color" style="background:green;"></span>
<span class="color" style="background:red;"></span>
</p>
<% end %>
</div>
<% end %>
</div>
<% end %>
_product.html.erb:
<div class="item-thumb">
<img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" />
</div>
<p><%= product.name %></p>
<p class="bold">$79.95 AUD</p>
Rather than if/else statements and CSS markup in your views, you should probably externalize your CSS, make a few partials, and make use of ActionView::Helpers::TextHelper#cycle. For example:
<%= #products.each do |product| %>
<div class="<%= cycle('first', 'second', 'third', 'fourth') -%>">
<!-- 1. let the CSS class handle display differences -->
<!-- 2. render a partial based on #current_cycle -->
<%= render :partial => current_cycle %>
</div>
<% end %>
I'd say the mod's are your problem. It's never going to go into the first block as n%1 will always return 0. Try your logic out using irb to get you going.
You may want to try jQuery nth-child
I got part of the answer. Slight change of syntax to use "each_with_index" instead of just each.
Still trying to work out there's a lot of variations of when a product can be the last tile and require closing, first on row, first in set, last in a row.....
Thanks guys, I think I've answered my own question.