Javascript issue

Get help with installation and running PivotX 2.0.x here. Please do not post Extension or Theme related questions here.

Javascript issue

Postby Pieter » Wed Dec 08, 2010 10:46 am

Hi all,

I'm coding a website that must run on PivotX. The website (design was created by another person) needs to have a background animation and a weblink that points to the location where the image was stored.
I'm using a script from another person, which contains the following code:
Code: Select all
   var aImages = new Array();
   var aURL = new Array();
   var aArtists = new Array();
   var iPrev = -1;
   var iRnd = -1;
   
   aImages[0] = "img/food.jpg";
   aImages[1] = "img/dumper.jpg";
   //aImages[2] = "img/muis.jpg";

   aURL[0] = "http://www.write-it.nl";
   aURL[1] = "http://www.google.nl";
   aURL[2] = "http://www.write-it.nl";
   
   aArtists[0] = "Pieter Beens";
   aArtists[1] = "Pieter Beens";
   aArtists[2] = "Pieter Beens";
   
   $(document).ready(function() {
   
      /* Define the function that triggers to fade in the background as soon as the image has loaded */
      $("img#bg").load(function()
         {
            /* Fade in during 3 seconds */
            $("img#bg").fadeTo(3000,1);
            
            /* Animate the picture description during 1 second */
            setTimeout(function() { $("#image_description").animate({right: '+=150'}, 1000) }, 1000);
         
            /* Set the timeout to fade out the image and the description after 10 seconds*/
             setTimeout(function()
                {
                   $("#image_description").animate({right: '-=150'}, 1000);
                   $("img#bg").fadeOut(1000);
                   
                   /* Load the next image after 4 seconds */
                   setTimeout(LoadImages,1000);
                }
                ,10000);
         }         
      )
   
      /* Start the slideshow one second after the page is ready */
      setTimeout(LoadImages,0000);
      
    });

    function LoadImage(iNr)
   {
   
      /* Assign the new image to the background */
      $("img#bg").attr("src", aImages[iNr]);
       
       /* Assign the artist name to the description */
       $("#image_artist").html(aArtists[iNr]);
       
       /* Assign the image url to the description */
        $("a#image_url").attr("href", aURL[iNr]);
        $("a#image_url").html("Bekijk foto");
    };
   
    function LoadImages()
    {
       
       /* Select a random image number and make sure this is not equal to the previous image */
       while(iPrev == iRnd)
       {
          iRnd = Math.floor(Math.random()*aImages.length);
       }
       
       /* Show the selected image */
       LoadImage(iRnd);
       
       iPrev = iRnd;
       
    };


However, I would like to have the link pointed to a#image_url on a very different location. Inspite, I don't know how to add these link in Javascript. Who can help me? I guess the solution lies in something like

Code: Select all
document.write('<a href=a#image_url>test</a>')


Thanks in advance!
Webdesigner, copywriter, translator and SEO specialist at www.write-it.nl
Pieter
 
Posts: 71
Joined: Mon Mar 23, 2009 6:53 pm
Location: Elspeet

Return to 2.x Support Forum

Who is online

Users browsing this forum: No registered users and 7 guests

cron