Home/ Questions/Q 6786479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:15:01+00:00

My page worked locally before when it was just a static html page with

  • 0

My page worked locally before when it was just a static html page with jQuery. However, I built it on top of rails because I wanted free web hosting on heroku.

All I did was move the jQuery into the application.js file and changed the application.html.erb file because that’s all that’s needed, right?

I have the following included in my gemfile:

gem 'sqlite3'
gem 'jquery-rails'
gem 'thor'

Here’s my Application.html.erb file:

      <head>
          <title>Me</title>
            <%= stylesheet_link_tag :all %>
  <%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" %>
  <%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" %>
  <%= javascript_include_tag "jquery-rails.js" %>
  <%= javascript_include_tag "jquery.fancybox-1.3.4.js" %>
  <%= javascript_include_tag "jquery.fancybox-1.3.4.pack.js" %>
  <%= javascript_include_tag "jquery.fancybox-1.3.4.css" %>
  <%= javascript_include_tag "jquery.easing-1.3.pack.js" %>
  <%= javascript_include_tag "jquery.mousewheel-3.0.4.pack.js" %>
  <%= render 'layouts/stylesheets' %>
  <%= csrf_meta_tag %>
        </head>

And this is my application.js file:

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

            $("a#example1").fancybox();

            $("a#example2").fancybox({
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });

            $("a#example3").fancybox({
                'transitionIn'  : 'none',
                'transitionOut' : 'none'    
            });

            $("a#example4").fancybox({
                'opacity'       : true,
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'none'
            });

            $("a#example5").fancybox();

            $("a#example6").fancybox({
                'titlePosition'     : 'outside',
                'overlayColor'      : '#000',
                'overlayOpacity'    : 0.9
            });

            $("a#example7").fancybox({
                'titlePosition' : 'inside'
            });

            $("a#example8").fancybox({
                'titlePosition' : 'over'
            });

            $("a[rel=example_group]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

            /*
            *   Examples - various
            */

            $("#various1").fancybox({
                'titlePosition'     : 'inside',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });

            $("#various2").fancybox();

            $("#various3").fancybox({
                'width'             : '75%',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });

            $("#various4").fancybox({
                'padding'           : 0,
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });
        });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Remove

    <%= javascript_include_tag :defaults %>

    Because that adds prototype (in case you are still with ~ 2.x to 3.0.x).

    Also it seems you are trying to use fancybox but have not included the necessary JS file for fancybox.

    First copy the jquery.fancybox-x.x.x.pack.js to public/js/
    Then include this tag

    <%= javascript_include_tag "jquery.fancybox-x.x.x.pack.js" %>
    • 0