how to get Magento baseUrl through Javascript and then use it in jquery.hello-lightbox.min?

Question

i'm trying to get Magento BaseUrl through javascript in head.phtml file, and then use it in jquery.hello-lightbox.min file, where i need the baseUrl to get some images.

Here's what i have in head.phtml file:

<?php $baseUrl = $this->getBaseUrl() ; ?>

<script type="text/javascript">

var baseUrl = <?php echo $baseUrl ; ?>

function getBaseUrl(baseUrl)

</script>

Then in /js/jquery.hello-lightbox.min i have:

(function($){

function getBaseUrl(baseurl)
{
var domain = baseurl
}

var urrl = 'http://'+domain+'/skin/frontend/default/customtheme/images/lightbox/';

  $.fn.lightBox=function(settings)settings=jQuery.extend({overlayBgColor:'#000',overlayOpacity:0.8,fixedNavigation:false,imageLoading: urrl+'lightbox-ico-loading.gif',imageBtnPrev:urrl+'lightbox-btn-prev.gif', . . . . . . . . . . 

But this doesn't work. In fact it seems like i can't even pass the php variable $baseUrl to var baseUrl in head.phtml

Do you have any ideas?

Answer 1

There are syntax errors in your main code. I think what you want is to define a function that returns the base URL like so:

<?php $baseUrl = $this->getBaseUrl() ; ?>

<script type="text/javascript">

function getBaseUrl() { return '<?php echo $baseUrl; ?>'; } 

</script>

then use it in JavaScript: (get rid of the function getBaseUrl(baseurl) ... stuff there)

var urrl = 'http://'+getBaseUrl()+'/skin/frontend/default/customtheme/images/lightbox/';