By NRaf on

I have a simple JavaScript item I developed for another website that I'm trying to port over into Drupal. It's basically a div with three tabs stacked on top of each other and an image. When the user scrolls over a tab, the image changes (depending on the tab scrolled over). The JS is:

<script type="text/javascript">

var imageOne = new Image(); imageOne.src = "images/slideshow/slideshow-image1.png";
var imageTwo = new Image(); imageTwo.src = "images/slideshow/slideshow-image2.png";
var imageThree = new Image(); imageThree.src = "images/slideshow/slideshow-image3.png";
var currentSlideshowImage = new Image();

function changeSlideshowImage(val)
{
  if (val == '1')
  {
    currentSlideshowImage = imageOne;
    document.getElementById("slideshow-image-object").src = currentSlideshowImage.src;
    document.getElementById('slideshow1').className = "active";
    document.getElementById('slideshow2').className = "";
    document.getElementById('slideshow3').className = "";
  }
  else if (val == '2')
  {
    currentSlideshowImage = imageTwo;
    
    document.getElementById("slideshow-image-object").src = currentSlideshowImage.src;
        
    document.getElementById('slideshow2').className = "active";
    document.getElementById('slideshow1').className = "";
    document.getElementById('slideshow3').className = "";
  }
  else if (val == '3')
  {
    currentSlideshowImage = imageThree;

    document.getElementById("slideshow-image-object").src = currentSlideshowImage.src;
  
    document.getElementById('slideshow3').className = "active";
    document.getElementById('slideshow1').className = "";
    document.getElementById('slideshow2').className = "";
  }
}

</script>

The code isn't exactly what I'd call an elegant solution but it got the job done. I have the three tab div which have the changeSlideShowImage(x) (where x is >= 1 && <= 3) as their onmouseover property stored in a block at the moment. The above JS code is stored in an external file and I've added the script to the .info file. Everything works fine like this but I want to be able to pass in a variable from PHP to the JavaScript.

I want to read the basepath or the Drupal files directory in the code to make the image paths dynamic over different websites. I've looked into the drupal_add_js() method to do this but have only been able to access the variable inside of JQuery functions (namely $(document).ready(function(){...});

What do I have to do to be able to use a Drupal.settings variable in my JS code?

⋅ Categories: Drupal 6.x

Comments

NRaf’s picture

NRaf commented

bump

Any ideas? If you guys can think of a better way to achieve what I'm after, I'm open to ideas as well.

NRaf’s picture

NRaf commented

I tried my hand at converting my code to JQuery. It seems a simple enough task however for some inexplicable reason, I'm only able to add one event handler. :/

$(document).ready(function () {

    var imageOne = new Image(); imageOne.src = "images/slideshow/slideshow-image1.png";
    var imageTwo = new Image(); imageTwo.src = "images/slideshow/slideshow-image2.png";
    var imageThree = new Image(); imageThree.src = "images/slideshow/slideshow-image3.png";
    var currentSlideshowImage = new Image();

    $("#slideshow1").hover(
        function () {
            alert(imageOne.src);

            currentSlideshowImage = imageOne;
            document.getElementById("slideshow-image-object").src = currentSlideshowImage.src;
            document.getElementById('slideshow1').className = "active";
            document.getElementById('slideshow2').className = "";
            document.getElementById('slideshow3').className = "";
        }
    );

    $("#slideshow2").hover(
        function () {
            alert(imageTwo.src);

            currentSlideshowImage = imageTwo;

            document.getElementById("slideshow-image-object").src = currentSlideshowImage.src;

            document.getElementById('slideshow2').className = "active";
            document.getElementById('slideshow1').className = "";
            document.getElementById('slideshow3').className = "";
        }
    );

});

Looking at the above code, there is a function attached to the hover event of two elements. For some reason, only the first event added will work. If I hover over slideshow1, the function calls as expected however slideshow2 does nothing. If I was to modify the code and move slideshow2 before slideshow1, the hover event on slideshow2 will run as expected however slideshow1 will do nothing.

Am I missing something simple here? Is this how I'd go about adding events to elements in my theme (this code is stored in an external file referenced in the .info theme file)? Any help at this point will be greatly appreciated.

NRaf’s picture

NRaf commented

bump