adding base url in javascript code

Question

i'm having a problem of adding my base url in javascript to load images (for effect), here is the code

 $(function(){

        $.mbBgndGallery.buildGallery({
            containment:"#home",
            timer:4000,
            effTimer:700,
            controls:"#controls",
            grayScale:false,
            shuffle:false,
            preserveWidth:false,
            effect:"slideDown",
            effect:{enter:{top:"-100%",opacity:1},exit:{top:0,opacity:0}, enterTiming:"ease-in", exitTiming:"ease-in"},



             images:[
             "/css/login/images/1.jpg",
             "/css/login/images/2.jpg",
             "/css/login/images/3.jpg"
             ],

            onStart:function(){},
            onPause:function(){},
            onPlay:function(opt){},
            onChange:function(opt,idx){},
            onNext:function(opt){},
            onPrev:function(opt){}
        });


    });

my codeigniter base url is localhost/project, so those links in javascript should be like localhost/project/css/login/images/1.jpg

appreciate the help, thank you :)

Why don't you define a variable like `base_url = "localhost/project/"` and use that in front of your images. — putvande, Dec 23 '13 at 18:18
Please see first part of [this](http://goo.gl/fG39rc) answer, it explains the problem you are facing. — Kyslik, Dec 23 '13 at 18:19
@kyslik i can't, because this code is in a javascript file, not html file — galih, Dec 23 '13 at 18:31
Isn't your js file called by a view in codeigniter? if so, the answer mentioned by @Kyslik perfectly solves your problem as the variable declared inside the script tags will be available for every piece of JavaScript loaded after it regardless of its origin. — user1778770, Dec 23 '13 at 18:56

score 1 · Answer 1 · edited May 23 '17 at 12:11

A simple way to do that is to have a variable inside a script tag before you load your javascripts.

Add this at the header of the view that loads the javascript file which needs the base url:

<script type="text/javascript">
//A global variable which may hold any server variables
var ServerVariables = {
    baseUrl:"<?php echo $this->config->base_url() ?>"
}
</script>

Then you can load your scripts and the base URL will be available through the variable you declared before:

images:[
         ServerVariables.baseUrl + "/css/login/images/1.jpg",
         ServerVariables.baseUrl + "/css/login/images/2.jpg",
         ServerVariables.baseUrl + "/css/login/images/3.jpg"
         ],

EDIT: As stated by @Kyslik, this answer seems to be the right one for your problem.

score 0 · Answer 2 · answered Dec 23 '13 at 18:27

0

function my_url(url){
   return "localhost/project/"+url;
}

images:[
             my_url("/css/login/images/1.jpg"),
             my_url("/css/login/images/2.jpg"),
             my_url("/css/login/images/3.jpg")
             ],

answered Dec 23 '13 at 18:27

Eisa Adil

1,743
11
16

adding base url in javascript code

2 Answers2