Why the images on mi javascript are not found?

Question

i have my page in wordpress and i'm trying to include a javascript file for that im using the next code in the footer:

<script src="<?php bloginfo('template_url')?>/js/main.js"></script>

the file it seems is loaded properly but inside that javascript code i call some images.

function sliderimgchange(){

        if ($(window).width() <= 600) {

        var sliderOne  =  $('.slideuno').attr('src', '../images/sliderone-mobile.jpg'),
        sliderTwo  =  $('.slidedos').attr('src', '../images/slidertwo-mobile.jpg'),
        sliderThree  =  $('.slidetres').attr('src', '../images/sliderthree-mobile.jpg');

        } else if ($(window).width() > 600) {

        var sliderOne  =  $('.slideuno').attr('src', '../../images/sliderone.jpg'),
        sliderTwo  =  $('.slidedos').attr('src', '../../images/slidertwo.jpg'),
        sliderThree  =  $('.slidetres').attr('src', '../../images/sliderthree.jpg');
        }
    }

All the images in that javascript file are not loaded when i go to the page. i check the console and the error says that the image is not found. i want to know how to call this scritp so that the images are recognized when i go to the page.

Answer 1

You are missing /wp-content/themes/YOUR_theme_NAME_FOLDER like this:

function sliderimgchange(){

        if ($(window).width() <= 600) {

        var sliderOne  =  $('.slideuno').attr('src', '/wp-content/themes/YOUR_theme_NAME_FOLDER/images/sliderone-mobile.jpg'),
        sliderTwo  =  $('.slidedos').attr('src', '/wp-content/themes/YOUR_theme_NAME_FOLDER/images/slidertwo-mobile.jpg'),
        sliderThree  =  $('.slidetres').attr('src', '/wp-content/themes/YOUR_theme_NAME_FOLDER/images/sliderthree-mobile.jpg');

        } else if ($(window).width() > 600) {

        var sliderOne  =  $('.slideuno').attr('src', '/wp-content/themes/YOUR_theme_NAME_FOLDER/images/sliderone.jpg'),
        sliderTwo  =  $('.slidedos').attr('src', '/wp-content/themes/YOUR_theme_NAME_FOLDER/images/slidertwo.jpg'),
        sliderThree  =  $('.slidetres').attr('src', '/wp-content/themes/YOUR_theme_NAME_FOLDER/images/sliderthree.jpg');
        }
    }