www.webdeveloper.com
Results 1 to 2 of 2

Thread: How to Create a Next and Previus button for Javascript pictures ?

  1. #1
    Join Date
    Mar 2009
    Posts
    1

    How to Create a Next and Previus button for Javascript pictures ?

    Hi gang i am really stuck. I have this project where i am given this JAVASCRIPT :

    var flowergallery = new Array();

    function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    var myImage = document.getElementById("myImage");
    myImage.setAttribute("src",source);
    return false;
    }

    function prepareGallery() {
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("photo")) return false;
    var gallery = document.getElementById("photo");
    var links = gallery.getElementsByTagName("a");
    for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
    return showPic(this);
    }
    }
    }

    function preLoadImages()
    {
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("photo")) return false;
    var gallery = document.getElementById("photo");
    var links = gallery.getElementsByTagName("a");
    for ( var i=0; i < links.length; i++) {
    flowergallery[i] = links[i].getAttribute("href");
    }
    }

    function insertAfter(newElement,targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
    } else {
    parent.insertBefore(newElement,targetEle...
    }
    }

    function prepareNewElements() {
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("photo")) return false;

    var flowerholder = document.createElement("img");
    flowerholder.setAttribute("id","myImage"...
    flowerholder.setAttribute("src","images/...
    flowerholder.setAttribute("alt","Flower Gallery");
    var list = document.getElementById("photo");
    insertAfter(flowerholder,list);

    var newitem1 = document.createElement("li");
    var newlink1 = document.createElement("a");
    newlink1.setAttribute("href","images/flo...
    var textlink = document.createTextNode("[First]");
    newlink1.appendChild(textlink);
    newitem1.appendChild(newlink1);
    var firstChild = list.firstChild;
    firstChild.parentNode.insertBefore(newit...

    var newitem2 = document.createElement("li");
    var newlink2 = document.createElement("a");
    newlink2.setAttribute("href","images/flo...
    var textlink = document.createTextNode("[Last]");
    newlink2.appendChild(textlink);
    var lastChild = list.lastChild;
    newitem2.appendChild(newlink2);
    insertAfter(newitem2,lastChild);
    }

    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    oldonload();
    func();
    }
    }
    }

    addLoadEvent(preLoadImages);
    addLoadEvent(prepareNewElements);
    addLoadEvent(prepareGallery);



    HERE IS THE HTML PAGE



    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Flower Gallery</title>
    <script type="text/javascript" src="scripts/flowers.js"></script>
    <link rel="stylesheet" href="styles/layout.css" type="text/css" />
    </head>

    <body>

    <ul id = "photo">
    <li><a href="images/flower1.jpg" title = "Sunflower" >[1]</a> </li>
    <li><a href="images/flower2.jpg" title = "Bleeding heart">[2]</a></li>
    <li><a href="images/flower3.jpg" title = "Dahlia">[3]</a></li>
    <li><a href="images/flower4.jpg" title = "Rose">[4]</a></li>
    <li><a href="images/flower5.jpg" title = "Poppy">[5]</a></li>
    <li><a href="images/flower6.jpg" title = "Marguerite">[6]</a></li>
    </ul>
    </body>
    </html>

    that is the javascript. there is a webpage with pictures on it. What i need to do is : if the next link is clicked the flower to be viewed is the next flower in the list. If you reach athe end of the list then the first flower is the next flower to be viewed. The same for the Previous button but backwards.. You have to use a global variable that will keep track of the current image..

  2. #2
    Join Date
    Feb 2008
    Posts
    59
    Hi Javaprogrammer
    There is some of your code missing so I can't say exactly how to implement, however http://projectwownow.blogspot.com/20...slideshow.html has an example of a simple slideshow with next and previous buttons to switch the images which you may be useful to you.
    Hope this helps

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles