I have View with images and on image click I need to open fancybox
Here is my View code
<%= form_tag front_check_path(@search), remote: true, class: "step_1_hotel_form",
"data-price" => currency.raw_amount(itineraries[0].price_obj[:sales_price]),
"data-price_per_pax" => currency.raw_amount(itineraries[0].price_obj[:sales_price]/@search.count_passengers_object[:total]),
"data-price_part" => currency.raw_amount(itineraries[0].price_obj[:annuity_sales_price]) do %>
<div class="hotel_result">
<div class="image_wrap">
<a class="fancybox_<%= hotel.id %> thumb_a" href="<%= hotel.pictures.first['url'] %>">
<div class="image">
<%= image_tag 'shared/ajax-loader_white.gif', realsrc: hotel.pictures.first['url'], class: 'thumb', alt: hotel.pictures.first['description'] %>
</div>
</a>
<div class="other_images">
<% hotel.pictures.each do |hr_pic| %>
<div class="small_image">
<a class="fancybox_<%= hotel.id %>" href="<%= hr_pic['url'] %>">
<%= image_tag 'shared/ajax-loader_white.gif', realsrc: hr_pic['url'], class: 'small_thumb', alt: hr_pic['description'], style: 'display: none;' %>
</a>
</div>
<% end %>
</div>
</div>
<div class="information">
<div class="name_group">
<div class="name"><%= popup_ajax hotel.name, hotel_info_path(hotel) %></div>
<div class="rating">
<% 1.upto(hotel.rating).each do %>
<%= image_tag 'shared/star.png', fetch_format: :auto %>
<% end %>
</div>
<div class="address">
<%= popup_ajax_do hotel_map_path(hotel) do %>
<%= hotel.address %><%= image_tag 'shared/map_view.png' %>
<% end %>
</div>
</div>
<div class="price-box-hotel">
<% if itineraries[0].price_obj[:annuity_sales_price] %>
<div class="resurs">
<%= popup_ajax_do payment_annuity_description_path((itineraries[0].price_obj[:sales_price] * 100).to_i) do %>
<div class="resurs_text"><%= _('Delbetala fr.') %></div>
<div class="resurs_price"><%= _('%{amount}/mån') % { amount: currency.amount(itineraries[0].price_obj[:annuity_sales_price]) } %></div>
<% end %>
</div>
<% end %>
<div class="pax-price">
<div class="price"><%= currency.amount(currency.raw_amount(itineraries[0].price_obj[:sales_price]) / @search.count_passengers_object[:total]) %></div>
<div class="smallprice"><%= _('per person') %></div>
</div>
<div class="total-price">
<div class="price"><%= currency.amount(itineraries[0].price_obj[:sales_price]) %></div>
<% if @search.search_type == 'package' %>
<div class="smallprice"><%= _('totalt flyg+hotell') %></div>
<% else %>
<div class="smallprice"><%= _('totalt') %></div>
<% end %>
</div>
</div>
<div class="hotel_clear"></div>
<div class="description">
<% tripdata = @tripadvisor_data[hotel.unique_id] if @tripadvisor_data && @tripadvisor_data[hotel.unique_id] %>
<% tripdata = hotel.tripadvisor_data if !tripdata %>
<% if tripdata %>
<div class="tripadvisor">
<%= _('TripAdvisor-betyg') %>
<div class="tripadvisor_image"><%= image_tag tripdata[:rating_image_url].gsub('http://', "//") if tripdata[:rating_image_url] %></div>
<div class="tripadvisor_rating"><%= tripdata[:rating] %></div>
<div class="tripadvisor_reviews"><%= _('Baserat på') %> <%= link_to tripdata[:web_url], target: '_blank' do %><%= tripdata[:num_reviews] %> <%= _('omdömen') %><% end %></div>
</div>
<% end %>
<%= hotel.short_description_strip %> <%= popup_ajax _('Läs mer'), hotel_info_path(hotel) %>
</div>
<% if (@search.legs[0][4] && @search.legs[0][4] != @search.legs[0][2]) || (@search.legs[1][4] && @search.legs[1][4] != @search.legs[1][2]) %>
<% nights = (itineraries[0].hotels.first[:checkout_date].to_date - itineraries[0].hotels.first[:checkin_date].to_date).to_i %>
<div class="dates"><%= _('från %{origin} till %{dest}') % { origin: itineraries[0].hotels.first[:checkin_date].to_date.to_s(:short).downcase, dest: itineraries[0].hotels.first[:checkout_date].to_date.to_s(:short).downcase } %> (<%= n_("1 natt", "%{num} nätter", nights) % { num: nights } %>)</div>
<% end %>
<div class="rooms">
<% 0.upto(@search.search_parameters[:rooms].size - 1).each do |room_i| %>
<div class="room">
<div class="headline"><%= _('Rum') %> <%= room_i + 1 %> <div class="pax-text">(<%= room_pax_text(@search, room_i + 1) %>)</div></div>
<div class="options">
<% used_hrs = [] %>
<% itineraries.each_with_index do |i, index| %>
<% next if used_hrs.include?("#{room_i}|#{i.hotels[room_i][:description]}|#{i.hotels[room_i][:boardtype]}") %>
<% used_hrs << "#{room_i}|#{i.hotels[room_i][:description]}|#{i.hotels[room_i][:boardtype]}" %>
<ul class="table <%= 'selected_hotel' if index == 0 %>">
<li class="radio">
<%= radio_button_tag "hr_#{hotel.id}_#{room_i + 1}", i.hotels[room_i][:uuid], (index == 0),
"data-price" => currency.raw_amount(i.price_obj[:sales_price] - itineraries[0].price_obj[:sales_price]),
"data-price_per_pax" => currency.raw_amount((i.price_obj[:sales_price] - itineraries[0].price_obj[:sales_price])/@search.count_passengers_object[:total]),
"data-price_part" => currency.raw_amount(i.price_obj[:annuity_sales_price]) %>
</li>
<div class="table_div">
<li class="li_1"><%= i.hotels[room_i][:description] %></li>
<li class="li_2"><%= nice_boardtype(i.hotels[room_i][:boardtype]) %></li>
<li class="li_3"><%= currency.amount(i.price_obj[:sales_price] - itineraries[0].price_obj[:sales_price], add_plus: true, hide_unit: current_gate.supremecard?) %></li>
</div>
</ul>
<% end %>
</div>
</div>
<% end %>
</div>
<div class="continue-button-hotel">
<% unless current_gate.supremecard? && !supreme_open? %>
<div class="spinner" id="step_1_<%= hotel.id %>_spinner" style="display: none;"><%= image_tag 'shared/ajax-loader_white.gif' %></div>
<% if @search.search_type == 'package' %>
<div class="y-button"><%= submit_tag _('Välj flyg + hotell: %{amount}') % { amount: currency.amount(itineraries[0].price_obj[:sales_price]) }, class: 'hotel' %></div>
<% else %>
<div class="y-button"><%= submit_tag _('Välj hotell: %{amount}') % { amount: currency.amount(itineraries[0].price_obj[:sales_price]) }, class: 'hotel' %></div>
<% end %>
<% end %>
</div>
</div>
</div>
<% end %>
And I was having java script tag on View
Here is code of javascript tag
<%= javascript_tag "$('.fancybox_#{hotel.id}').attr('rel', 'gallery').fancybox({ prevEffect : 'none', nextEffect : 'none', closeBtn : true, showNavArrows: true, beforeShow : function() { var alt = this.src; this.title = alt; }, helpers : { title : { type : 'inside' }} });" %>
I need to move this js from View
So I move this code to js file
Like this
$('.fancybox_#{hotel.id}').attr('data-fancybox', 'gallery').fancybox({ prevEffect : 'none', nextEffect : 'none', closeBtn : true, arrows: true, beforeShow : function() { var alt = this.src; this.title = alt; }, helpers : { title : { type : 'inside' }} });
But now I get an error on page load
Syntax error, unrecognized expression: .fancybox_#{hotel.id}
How I can solve this error?
Thanks for help
