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 2 of 2
  1. #1
    New Coder seanmarkham's Avatar
    Join Date
    Dec 2011
    Location
    Lincolnshire, England
    Posts
    50
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Image holder with previous and next buttons

    Got this very simple holder with a previous and next button that cycles through 5 images, problems are:

    When using the previous button the images cycle through as: image 2, image 4, image 3, image 1. there is no image 5 included.

    When using the next button the images cycle through as: image 5, image 3, image 4, image 1. there is no image 2 included.



    Code:
    <script src="http://www.mysite.co.uk/jquery-1.8.3.js"> </script>
    <script>
        var image1 = new Image()
        image1.src = "http://www.mysite.co.uk/images/image1.gif"
        var image2 = new Image()
        image2.src = "http://www.mysite.co.uk/images/image2.gif"
        var image3 = new Image()
        image3.src = "http://www.mysite.co.uk/images/image3.gif"
        var image4 = new Image()
        image4.src = "http://www.mysite.co.uk/images/image4.gif"
        var image5 = new Image()
        image5.src = "http://www.mysite.co.uk/images/image5.gif"
    
    
    
    
        $(document).ready(function () {
            $("#overlay").hide();
            $("#open").click(function () {
                $("#overlay").show();
                var totalpics = 5
                var step = 1
    
                    function slideit() {
                        //if browser does not support the image object, exit.
                        if (!document.images) return
                        document.images.slide.src = eval("image" + step + ".src")
                        $("#mailnext").click(function () {
                            if (step < totalpics) {
                                step++
                            } else {
                                step = 1
                            }
                            slideit()
                        });
    
                        $("#mailprev").click(function () {
                            if (step > 1) step--
                            else step = totalpics
                            slideit()
                        });
    
    
                    }
                slideit()
    
    
    
    
                $("#close").click(function () {
                    $(".overlay").hide();
                });
            });
        })
    </script>

    Code:
    <div id="open">Open</div>
    <div id="overlay" class="overlay">
      <div align="center" style="padding:5px; padding-top:100px;">
    <img src="http://www.mysite.co.uk/images/stag-hen-weekends.gif" 
    name="slide" width="810" height="486" border="4px solid #000" style="border-radius:10px; margin-top:0;"
    />
    <input name="mailprev" id="mailprev" type="button" value="Previous" /><input name="mailnext" id="mailnext" type="button" value="Next" />
              Click here to <div id="close">[close]</div>
       </div>
    </div>
    I know there are various plugins that can be used to make the desired effect that I am after in a more elegant way.

    Any help greatly appreciated.
    Last edited by seanmarkham; 10-11-2013 at 02:52 PM.
    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development

  • #2
    New Coder seanmarkham's Avatar
    Join Date
    Dec 2011
    Location
    Lincolnshire, England
    Posts
    50
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Please can a moderator move this to javascript programming, got too click happy!
    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development


  •  

    Posting Permissions

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