Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    cannot make the photo album script work

    I like the script on dynamic drive http://www.dynamicdrive.com/dynamici...photoalbum.htm and followed several steps now. Still not made it work and can need any help possible.

    1. The external javascript I put in a folder and call it via the coding in the header.
    2. I included the coding part in the header as explained in the script

    On the page I am using this part of coding:
    Code:
    <!-- start photo album code -->
    <div id="container-africa">
            <div id="gallery2" style="margin: 0pt 2px 0pt 2px; float: left; display: inline;">
    <script language="JavaScript">
    function LoadGallery(pictureName,imageFile)
    {
      if (document.all)
      {
        document.getElementById(pictureName).style.filter="blendTrans(duration=1)";
        document.getElementById(pictureName).filters.blendTrans.Apply();
      }
      document.getElementById(pictureName).src = imageFile;
      if (document.all)
      {
        document.getElementById(pictureName).filters.blendTrans.Play();
      }
      document.getElementById(titleCaption).innerHTML=captionText;
    }
    </script>
    <img src="afrika/foto1.jpg" alt="" title=" " id="" height="282" width="400">
    
    <div class="thumbs2">
    <a href="#_self" onclick="LoadGallery('','afrika/foto2.jpg')"><img src="afrika/foto2t.jpg" alt="" title="" height="68" width="97"></a>
    <a href="#_self" onclick="LoadGallery('','afrika/foto3.jpg')"><img src="afrika/foto3t.jpg" alt="" title="" height="68" width="97"></a>
    <a href="#_self" onclick="LoadGallery('',afrika/foto4.jpg')"><img src="afrika/foto4t.jpg" alt="" title="" height="68" width="97"></a>
    <a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a><br>
    <a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
    <a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
    <a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
    <a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
    </div>
    </div></div>
    <!-- end of photo album code -->
    I took it from http://www.stanseatonphotography.co.uk/portraits.php but get lost now.

    - the bigger image is loading and on the right place
    - the thumbs are also located on the right place

    I read a gallery name in the script on photography site. Images are however all in the same folder. Not understand the 'albumname' and if I can give it just a name there.

    When click on small image the bigger has to change without loading the page totally again.

    my photos are in: albums/africa/photonumber01.jpg
    photos for different country will be in the folder albums/othercountry/photonumber01.jpg

    Who can help me with this?

    thanks already a lot.

  • #2
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Random image failure

    I am trying to have three different images (bugs) randomly appear on a web page when it is open. Each time it will open, a different bug should appear. I am only including three. I'm not sure if I should be using a preloader for such a small file. Can some one help?!! I thought I was doing really great, but I'm getting know where and spending a lot of time. I think the answer to my problem is simple, but I can't get this to work. I am getting a "undefined" error message when I load, can't get pictures to show up. Here is my code:


    <script type="text/javascript"> //bug function

    var imageBugs = new Array();
    bugs[0] = "images/dragonfly3.gif"
    bugs[1] = "images/beetle1.gif"
    bugs[2] = "images/spider3.gif"
    bugs[3] = "images/dragonfly3.gif"

    var p=imageBugs.length;
    for (var i=0; i<=3; i++) {
    imageBugs[i]=""+(i+1)+".gif"
    }
    var p=imageBugs.length;
    var preBuffer = new Array()
    for (i=0; i<p; i++) {
    preBuffer[i]= new Image()
    preBuffer[i].src=imageBugs[i]
    }
    var whichBug = parseInt(Math.random()*(p)); // select 1 to highest array element
    function showBugs(whichBug) {
    var imageBugs = "" + whichBug() +".gif"
    }
    </script>
    </head>

    <body>

    <div id="banner">
    <img src="images/banner2.gif" width="100%" align="center" alt="Witch's Garden" />
    </div>
    <div id="bug">
    <script type="text/javascript"> //bug function
    //added color hoping this would show up better.
    var bg=showBugs(whichBug);
    document.write(showBugs(whichBug);


    //document.write('<img src="'+imageBugs[whichBug]+'"/>');
    </script>
    </div>

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Rather a lot of errors I am afraid.

    var imageBugs = new Array();
    imageBugs[0] = "images/dragonfly3.gif"
    imageBugs[1] = "images/beetle1.gif"
    imageBugs[2] = "images/spider3.gif"
    imageBugs[3] = "images/dragonfly3.gif" // why two images the same?

    var p=imageBugs.length;
    for (var i=0; i<=3; i++) {
    imageBugs[i]=""+(i+1)+".gif"
    }

    //This overwrites your image names with 1.gif, 2.gif etc.

    var BugToShow = "" + whichBug() +".gif"
    // second declaration overwrites first.

    ... and others

    A pre-loader is not necessary here.

    As I see it you are simply trying to show a random image. Try this:-


    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function randomizeImage(){
    var arr = new Array("dragonfly3.gif","beetle1.gif","spider3.gif");   //you can put as many images as you wish
    var x = Math.floor(Math.random()*arr.length);
    document.images['myimage'].src=arr[x];
    }
    </script>
    </head>
    
    <body onload="randomizeImage()">
    <img name="myimage" src="beetle1.gif">  // or any of your images
    </body>
    </html>

    Not sure why you have hijacked this old thread, but in future please start a new thread for a new topic.


    "In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)
    Last edited by Philip M; 10-12-2009 at 08:09 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •