Question

I’m using a JavaScript within an article of Joomla, which is supposed auto load images every 5 seconds on that page. Initially I was unable to add JavaScript which has now been solved with the help of other users.

I now have a new problem. When JavaScript is supposed to refresh the image it is unable to load the image. I do not get a broken path symbol but neither is the image displayed. I’m attaching the code I’m using.

    <script type="text/javascript">// <![CDATA[
     var picPaths = ['C:/wamp/www/joomla1/images/snapshots/cal01.jpeg'];
 var curPic = -1;
 var imgO = new Array();
 for (i = 0; i < picPaths.length; i++) {
    imgO[i] = new Image();
    imgO[i].src = picPaths[i];
 }
 function swapImage() {
    curPic = (++curPic > picPaths.length - 1) ? 0 : curPic;
    imgCont.src = imgO[curPic].src;
    setTimeout(swapImage, 5000);
 }
 window.onload = function() {
    imgCont = document.getElementById('alpana');
    swapImage();
 }
     // ]]></script>

/* this is a module with position akrudi which I call in an article like this */

    {loadposition akurdi}
     <p><img id="alpana" src="" height="250" width="250" />
     </p>

SECOND CODE

    function refresh() 
   {         
var imgsrc = document.getElementById("pic");
alert("message box"+imgsrc);
  document.images["pic"].src = "images/CB1.jpeg" + "?" + new Date().getTime();
  }
  window.onload=function(){
  setInterval(function(){refresh()}, 5000 ); //set interval onload just one time 
 }

Answer 1

I don’t know how you have been trying to add Javascript into a Joomla article before but try installing the Sourcerer plugin which allow you to add custom javascript, php and many other languages to your Joomla article.

Update:

I have just tested adding javascript to a module and embedding the module in an article to see whether or not the javascript actually works and it does. Sourcerer is not needed. You can simply add something like the following code to the default.php or mod_xxx.php of your module:

$document = JFactory::getDocument();    
$js = '$(document).ready(function(){ 
          //more javascript in here
       });';
$document->addScriptDeclaration($js);

Then embed the module as you normally would, using the {loadposition xxx} method