Troubles setting up a jQuery slideshow on a local server

  • I’ve been trying to add a jQuery slideshow (flexslider) to a WordPress website I have on a local server. The problem is, once I load the scripts with the functions.php or add it in the header and include the slideshow in the body, nothing shows. Absolutely nothing. I’ve tried different methods and none of them worked.

    One thing I’ve noticed is that when, for example, I try to embed an image on a page, using this code <img src="image.jpg">, the image won’t show, since for some reason, the html can’t find the image even though its in the same folder. What could be the problem?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Are you adding in jQuery itself again? If so, you don’t need to do that. It’s already added automatically.

    Also follow this guide https://codex.www.ads-software.com/Using_Javascript

    Thread Starter Reick

    (@reick)

    Still doesn’t load anything for some reason. Here’s my <head> code (I’m trying with Nivo Slider now):

    <head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>

<!--Nivo Slider-->
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

    I’m using a child theme of the TwentyTwelve theme, and of course I added the slider in the body as indicated in the Nivo Slider documentation.

    You need to read the link that Andrew posted above. You don’t hard code links to javascript files. You use wp_enqueue_script() and attach your function to the wp_enqueue_scripts action hook.

    What your doing is hardcoding your nivo slider stuff before jQuery is even loaded.
    This snippet assumes your jquery.nivo.slider.pack.js is located in a directory named js in the root of your theme.

    function load_nivo_js() {
    wp_enqueue_script( 'nivo-slider', get_stylesheet_directory_uri() . '/js/jquery.nivo.slider.pack.js', array( 'jquery' ), false);
    }
add_action( 'wp_enqueue_scripts', 'load_nivo_js' );

function load_nivo_vars() { ?>
    <script type="text/javascript">
        $(window).load(function() {
        $('#slider').nivoSlider();
        });
    </script>
<?php }
add_action( 'wp_head', 'load_nivo_vars', 99 );  //99 makes sure jquery and other stuff is already loaded.

    Thread Starter Reick

    (@reick)

    Thanks for your answer. As you may have guessed I’m not an experienced user. I’m going to try it now, but, where do I have to include the css file? In the header or with the enqueue script too?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Troubles setting up a jQuery slideshow on a local server’ is closed to new replies.