JavaScript slide show: Click the picture and go to next picture?

Discussion in 'Javascript' started by marslee@hotmail.com, Apr 18, 2005.

  1. Guest

    I know how to use buttons to go to the next and previous picture in
    slide show, but i want to change it so when the user clicks the picture
    instead of button, the script shows the next phicture.

    How can i change it?
    Any suggesstions?

    Thanks!

    <script language="JavaScript">
    <!--
    var x = 1
    images = new Array
    images[1] = "images/AidaL.jpg"
    images[2] = "images/mclaren10S.jpg"
    images[3] = "images/lotus6S.jpg"
    images[4] = "images/SENNAS.jpg"
    images[5] = "images/arytonsennaS.jpg"
    //add additional images here as required

    function backimg(){
    if (x != 1){
    document.image1.src = images[x-1]
    x-- }
    }
    function fwdimg(){
    if (x != 5){ //Change the 5 here to your total number
    document.image1.src = images[x+1]
    x++ }
    }
    // -->
    </script>

    <IMG SRC="images/AidaL.jpg" name="image1" border=0><br>
    <a href="" onClick="backimg();return false;"><img src=sback.gif
    border=0 width=30 height=16></a>
    <A href="" onClick="fwdimg(); return false;"><img src="ssfwd.gif"
    border=0 width=30 height=16></a>


    --------------------------------------------------------------------------------
    , Apr 18, 2005
    #1
    1. Advertising

  2. Mick White Guest

    wrote:

    > I know how to use buttons to go to the next and previous picture in
    > slide show, but i want to change it so when the user clicks the picture
    > instead of button, the script shows the next phicture.
    >
    > How can i change it?
    > Any suggesstions?
    >

    You may need to preload images:

    <script type="text/javascript">
    x = -1;
    images =["ann.jpg","dave.jpg","joe.jpg","gary.jpg","lee.jpg"]

    function stepimg(){
    if(x==images.length)x=-1;
    document.image1.src =images[x++];
    }

    </script>
    <a href="#" onClick="stepimg()">
    <img src="ann.jpg" name="image1" width="120" height="150" border=0>
    </a>
    Mick White, Apr 18, 2005
    #2
    1. Advertising

  3. Mick White <> wrote in message
    news:IXV8e.2042$...
    > wrote:




    > <script type="text/javascript">
    > x = -1;
    > images =["ann.jpg","dave.jpg","joe.jpg","gary.jpg","lee.jpg"]
    >
    > function stepimg(){
    > if(x==images.length)x=-1;
    > document.image1.src =images[x++];
    > }
    >


    I don't want to be negative in this 'post', but perhaps you would you like
    to revise that.
    --
    Stephen Chalmers
    Stephen Chalmers, Apr 19, 2005
    #3
  4. Mick White Guest

    Stephen Chalmers wrote:

    > Mick White wrote
    >
    >><script type="text/javascript">
    >>x = -1;
    >>images =["ann.jpg","dave.jpg","joe.jpg","gary.jpg","lee.jpg"]
    >>
    >>function stepimg(){
    >>if(x==images.length)x=-1;
    >>document.image1.src =images[x++];
    >>}



    > I don't want to be negative in this 'post', but perhaps you would you like
    > to revise that.
    > --


    It should work, but I would preload the images.
    Mick
    Mick White, Apr 19, 2005
    #4
  5. J. J. Cale Guest

    <> wrote in message
    news:...
    > I know how to use buttons to go to the next and previous picture in
    > slide show, but i want to change it so when the user clicks the picture
    > instead of button, the script shows the next phicture.
    >
    > How can i change it?
    > Any suggesstions?
    >
    > Thanks!
    >
    > <script language="JavaScript">
    > <!--
    > var x = 1
    > images = new Array
    > images[1] = "images/AidaL.jpg"
    > images[2] = "images/mclaren10S.jpg"
    > images[3] = "images/lotus6S.jpg"
    > images[4] = "images/SENNAS.jpg"
    > images[5] = "images/arytonsennaS.jpg"
    > //add additional images here as required
    >
    > function backimg(){
    > if (x != 1){
    > document.image1.src = images[x-1]
    > x-- }
    > }
    > function fwdimg(){
    > if (x != 5){ //Change the 5 here to your total number
    > document.image1.src = images[x+1]
    > x++ }
    > }
    > // -->
    > </script>
    >
    > <IMG SRC="images/AidaL.jpg" name="image1" border=0><br>
    > <a href="" onClick="backimg();return false;"><img src=sback.gif
    > border=0 width=30 height=16></a>
    > <A href="" onClick="fwdimg(); return false;"><img src="ssfwd.gif"
    > border=0 width=30 height=16></a>
    >
    >
    > --------------------------------------------------------------------------

    ------
    >

    I would consider if this would be 'expected' behavior. If the user is used
    to clicking a picture to enlarge it or select it this might be annoying.
    Maybe use arrows or img controls to move forward or backwards. Like you
    would see in most slide show and image viewers.
    Jimbo
    J. J. Cale, Apr 19, 2005
    #5
  6. Mick White <> wrote in message
    news:gf09e.3661$...>

    > It should work, but I would preload the images.
    > Mick


    >x = -1;
    >images =["ann.jpg","dave.jpg","joe.jpg","gary.jpg","lee.jpg"]
    >
    >function stepimg(){
    >>if(x==images.length)x=-1;

    >document.image1.src =images[x++];
    >}


    What is the value of x in the subscript?

    --
    Stephen Chalmers
    Stephen Chalmers, Apr 19, 2005
    #6
  7. Mick White Guest

    Stephen Chalmers wrote:

    > Mick White <> wrote in message
    > news:gf09e.3661$...>
    >
    >>It should work, but I would preload the images.
    >>Mick

    >
    >
    >>x = -1;
    >>images =["ann.jpg","dave.jpg","joe.jpg","gary.jpg","lee.jpg"]
    >>
    >>function stepimg(){
    >>
    >>>if(x==images.length)x=-1;

    >>
    >>document.image1.src =images[x++];
    >>}

    >
    >
    > What is the value of x in the subscript?
    >


    document.image1.src =images[++x];

    Would be better...
    Mick
    Mick White, Apr 19, 2005
    #7
  8. Grant Wagner Guest

    "Mick White" <> wrote in message
    news:pp89e.3309$...
    > Stephen Chalmers wrote:
    >
    >> Mick White <> wrote in message
    >> news:gf09e.3661$...>
    >>
    >>>It should work, but I would preload the images.
    >>>Mick

    >>
    >>
    >>>x = -1;
    >>>images =["ann.jpg","dave.jpg","joe.jpg","gary.jpg","lee.jpg"]
    >>>
    >>>function stepimg(){
    >>>
    >>>>if(x==images.length)x=-1;
    >>>
    >>>document.image1.src =images[x++];
    >>>}

    >>
    >>
    >> What is the value of x in the subscript?
    >>

    >
    > document.image1.src =images[++x];
    >
    > Would be better...
    > Mick


    Taking your modification to the existing source:

    x = -1;
    images = ["ann.jpg","dave.jpg","joe.jpg","gary.jpg","lee.jpg"];
    function stepimg()
    {
    if (x == images.length)
    {
    x = -1;
    }

    document.image1.src = images[++x];
    }

    We now have a situation where a call to stepimg() will attempt to access
    images[5], which returns undefined. You'd need to modify the condition
    as: if (x == images.length - 1) in order to avoid this. I'm also not a
    big fan of global variables to track the next image, I'd prefer the
    images Array to "know" it's next position. So something like this would
    be preferable (to me):

    var images = ["ann.jpg", "dave.jpg", "joe.jpg", "gary.jpg", "lee.jpg"];
    function stepimg()
    {
    document.images['image1'].src = images[images.nextImage =
    images.nextImage || 0];
    images.nextImage = (images.nextImage + 1) % images.length;
    }

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Grant Wagner, Apr 19, 2005
    #8
  9. Mick White Guest

    Grant Wagner wrote:
    [snip]
    So something like this would
    > be preferable (to me):
    >
    > var images = ["ann.jpg", "dave.jpg", "joe.jpg", "gary.jpg", "lee.jpg"];
    > function stepimg()
    > {
    > document.images['image1'].src = images[images.nextImage =
    > images.nextImage || 0];
    > images.nextImage = (images.nextImage + 1) % images.length;
    > }
    >

    Elegant...
    Thanks.
    Mick
    Mick White, Apr 19, 2005
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Deniz Bahar
    Replies:
    2
    Views:
    449
    Andrey Tarasevich
    Mar 9, 2005
  2. akshar108 via DotNetMonster.com

    get all word of slide through aspose.slide

    akshar108 via DotNetMonster.com, Oct 30, 2007, in forum: ASP .Net
    Replies:
    0
    Views:
    586
    akshar108 via DotNetMonster.com
    Oct 30, 2007
  3. Gerald Bauer
    Replies:
    0
    Views:
    250
    Gerald Bauer
    Aug 26, 2008
  4. john woo
    Replies:
    1
    Views:
    133
  5. banyan

    Slide-in & slide-out Scroller Help!

    banyan, Nov 16, 2005, in forum: Javascript
    Replies:
    0
    Views:
    119
    banyan
    Nov 16, 2005
Loading...

Share This Page